Menu icon Foundation
Only show Reveal Modal on small device

Hi,

I have a shopping basket which shows product quantities and total price on medium and up devices. I want to show this differently on a small device. I have been trying to implement the Reveal Modal on small devices to only show the shopping basket after a link is clicked.

I thought i could achieve this by only showing the Reveal Modal opening div and closing div using the Foundation visibility class but that doesn't work. I have also tried using data interchange to insert a Reveal Modal version of the basket on small devices but after the code has been successfully inserted the Reveal Link doesn't do anything. Is their any other method i can use to achieve this behaviour?

Thanks!

revealmodalshow for smallvisibility

Hi,

I have a shopping basket which shows product quantities and total price on medium and up devices. I want to show this differently on a small device. I have been trying to implement the Reveal Modal on small devices to only show the shopping basket after a link is clicked.

I thought i could achieve this by only showing the Reveal Modal opening div and closing div using the Foundation visibility class but that doesn't work. I have also tried using data interchange to insert a Reveal Modal version of the basket on small devices but after the code has been successfully inserted the Reveal Link doesn't do anything. Is their any other method i can use to achieve this behaviour?

Thanks!

Rafi Benkual over 5 years ago

show-for-small does work, can you post your code so we can see what is happening?

Ronan over 5 years ago

Hi,

show-for-small-only works but i need to see the basket html on medium up also but not surrounded by the Reveal Div container. On small devices i want the basket hidden in a Reveal but on Medium Up i want it visible all the time.

I was hoping for some method for only having the Reveal Div container on small devices?

Thanks!

Rafi Benkual over 5 years ago

In order to help you, we will need to see the code you are attempting with interchange.

Ronan over 5 years ago

On a small device:

<a href="" data-reveal-id="myModal">View Basket</a>

<div id="myModal" class="reveal-modal show-for-small-only" data-reveal>
    <div class="row">
        <div class="small-12 columns">
            <h1>Shopping Basket</h1>
            <p>Text for inside the shopping basket</p>
        </div>
    </div>
</div>

On medium device and up:

<div class="row">
    <div class="small-12 columns">
        <h1>Shopping Basket</h1>
        <p>Text for inside the shopping basket</p>
    </div>
</div>


Ronan over 5 years ago

Bump!

Fredric Tillberg over 5 years ago

In your CSS file:

.mobileModalContainer {
    display: block;
}
@media (min-width: 768px) {
    .mobileModalContainer {
        display: hidden;
    }
}

If the window's width is more than that of a standard Tablet, the mobile modal will be hidden. If the condition isn't met, i.e. if we're at 767px or below - then we'll show it.

Edit the classes, pixel range, etc - to match your particular needs.