Revealing a Modal in Foundation 4

前端 未结 4 1288
温柔的废话
温柔的废话 2021-01-15 03:24

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

相关标签:
4条回答
  • 2021-01-15 03:39

    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">&#215;</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!

    0 讨论(0)
  • 2021-01-15 03:42

    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:"

    0 讨论(0)
  • 2021-01-15 03:42
    $("#myModal").foundation('reveal', 'open');
    
    0 讨论(0)
  • 2021-01-15 03:54

    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">&#215;</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.

    0 讨论(0)
提交回复
热议问题