Menu icon Foundation
Modal inside a paragraph in Foundation 6?

Is it possible to have a modal inside a paragraph? So far I've only managed to get them to reveal properly by placing them inside an h tag. That works - inside an h5, but it's not ideal. Is there a way of getting around this? This is an example of what I'm doing with the h5 tag right now:

 <h2>What’s actually going on?</h2>
                <h6>It is widely accepted that the immune system and genetics are involved in the development of psoriasis<sup><a data-toggle="psoriasis12">12</a></sup>
                    <div class="tiny reveal" id="psoriasis12" data-reveal>
                        <h2>Immunopathogenesis of psoriasis (2007)</h2>
                        <p>Nickoloff BJ, Qin JZ, Nestle FO</p>
                        <p>Clin Rev Allergy Immunol, 33, pp. 45–56</p>
                        <button class="close-button" data-close aria-label="Close reveal" type="button">
             <span aria-hidden="true">&times;</span>
            </button>
                    </div>
                    .   The skin lesions of psoriasis are thought to be caused by abnormal interactions between different parts of the immune system within the skin cells. For this reason, different therapies focus on affecting these different components of the immune system in an effort to reduce the symptoms.
                </h6>
            

         

Hope that makes sense. I'm a bit new to this, please be gentle....

modal paragraph foundation6

Is it possible to have a modal inside a paragraph? So far I've only managed to get them to reveal properly by placing them inside an h tag. That works - inside an h5, but it's not ideal. Is there a way of getting around this? This is an example of what I'm doing with the h5 tag right now:

 <h2>What’s actually going on?</h2>
                <h6>It is widely accepted that the immune system and genetics are involved in the development of psoriasis<sup><a data-toggle="psoriasis12">12</a></sup>
                    <div class="tiny reveal" id="psoriasis12" data-reveal>
                        <h2>Immunopathogenesis of psoriasis (2007)</h2>
                        <p>Nickoloff BJ, Qin JZ, Nestle FO</p>
                        <p>Clin Rev Allergy Immunol, 33, pp. 45–56</p>
                        <button class="close-button" data-close aria-label="Close reveal" type="button">
             <span aria-hidden="true">&times;</span>
            </button>
                    </div>
                    .   The skin lesions of psoriasis are thought to be caused by abnormal interactions between different parts of the immune system within the skin cells. For this reason, different therapies focus on affecting these different components of the immune system in an effort to reduce the symptoms.
                </h6>
            

         

Hope that makes sense. I'm a bit new to this, please be gentle....

This post has been closed. No new replies can be added.

Chris Oyler about 4 years ago

Your reveal doesn't need to be contained. You can just put your reveal markup somewhere within the body (likely at the end), and have your opening button/anchor where ever you need it to be.

Tim Hartwick about 4 years ago

Hi Max! We're glad you're trying out foundation, and we're always happy to help.

If I'm understanding correctly, you might want try mimicking the modal effect by using a callout. Check it out here: http://foundation.zurb.com/sites/docs/toggler.html#toggle-with-animation

From here you can style it to your heart's desire.

Hope this helps!

Max Drake about 4 years ago

Great, that works fine now. Thank you both for sorting me out so quickly. I used Chris's option. thanks again.

Max Drake about 4 years ago

Great, that works fine now. Thank you both for sorting me out so quickly. I used Chris's option. thanks again.