How do you Reveal a modal programmatically in Foundation 4?
In Foundation 3 we had the easy to use reveal() method.
What can you use in Foundation 4? Please
Unfortunately, in Foundation 4 you must have this trigger link to open a modal =/ Unfortunately not because you'll have to write a lot more code (thats not true), but because this implementation isnt, let's say, pretty.
My code for the modal:
<!-- MODAL BOX START CONFIGURATION -->
<a class="reveal-link" data-reveal-id="modal"></a>
<div id="modal" class="reveal-modal medium">
<div id="modalContent"></div>
<a class="close-reveal-modal">×</a>
</div>
JS function to open and put some content into the modal
function openModal(url,params,text){
// If @url is not empty then we change the #modalContent value with the @url value
if(url !== '')
{
ajaxLoad('#modalContent',url,params);
}
// If @text is not empty then we change the #modalContent value with the @text value
else if(text !== '')
{
$('#modalContent').html(text);
}
// If both @url and @text are empty, then the #modalContent remains unchanged.
// Now we just show de modal with the changed (or not) content
$('a.reveal-link').trigger('click'); }
Hope it helps!
I am pretty sure you can simply use the .foundation method on your modal to call 'open' on it.. Something like:
$('#myModal').foundation('reveal', 'open');
e: Just checked the docs and yep, It's right there: http://foundation.zurb.com/docs/components/reveal.html
Look for "You can also open and close Reveal via JavaScript:"
$("#myModal").foundation('reveal', 'open');
For programmatic (javascript) access the docs seem to only suggest launching via click event.
Add your Modal:
<div id="myModal" class="reveal-modal">
<h2>Awesome. I have it.</h2>
<p class="lead">Your couch. It is mine.</p>
<p>Im a cool paragraph that lives inside of an even cooler modal. Wins</p>
<a class="close-reveal-modal">×</a>
</div>
Set the trigger:
<a href="#" data-reveal-id="myModal" id="my-trigger">Click Me For A Modal</a>
Activate trigger programmatically:
$('#my-trigger').trigger('click');
Admittedly it does seem like a work-around, maybe this is due to their heightened "lightweight/mobile-first" focus. Lets see what the next release brings.