Menu icon Foundation
How to use JS modal reveal in F5???

Hi there,

I just started working with this framework recently and I am delighted to see so many features packed inside. So thank you for that.

Nevertheless, I am really having a terrible time trying to make this nifty modal reveal work with JS... Past the fact that your documentation is lacking in clarity, I just cannot get it to work with the following code:

HTML:

<!-- Link: -->

<a href="http://www.google.com" data-reveal-id="myModal" data-reveal-ajax="true" class="launcher">
  Click Me For A Modal
</a>

<!-- Modal: -->

<div id="myModal" class="reveal-modal" data-reveal>
    <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>

JS:

$("a.launcher").click(function (e) {

    $('#myModal').foundation('reveal', 'open', 'http://www.google.com');

};

            

         
            

         

Could anyone help please ? Or at least give a clearer and more detailed explanation as to how to get things to work? Many thanks!

modalrevealjavascript

Hi there,

I just started working with this framework recently and I am delighted to see so many features packed inside. So thank you for that.

Nevertheless, I am really having a terrible time trying to make this nifty modal reveal work with JS... Past the fact that your documentation is lacking in clarity, I just cannot get it to work with the following code:

HTML:

<!-- Link: -->

<a href="http://www.google.com" data-reveal-id="myModal" data-reveal-ajax="true" class="launcher">
  Click Me For A Modal
</a>

<!-- Modal: -->

<div id="myModal" class="reveal-modal" data-reveal>
    <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>

JS:

$("a.launcher").click(function (e) {

    $('#myModal').foundation('reveal', 'open', 'http://www.google.com');

};

            

         
            

         

Could anyone help please ? Or at least give a clearer and more detailed explanation as to how to get things to work? Many thanks!


chegoon gave the most helpful answer for this post
chegoon over 5 years ago

I used this way
```HTML

$('a.reveal').on('click', function(event) {

event.preventDefault();
var modal = $('<div>').attr('id',$(this).attr('data-reveal-id')).addClass('reveal-modal medium').appendTo('body');
$.get($(this).attr('href'), function(data) {
  modal.empty().html(data).append('<a class="close-reveal-modal">&#215;</a>').foundation('reveal', 'open');

});

});
```

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

Cedric Hillion over 5 years ago

Changed external URL for a local one, and it worked... Any idea why?

chegoon over 5 years ago

I used this way
```HTML

$('a.reveal').on('click', function(event) {

event.preventDefault();
var modal = $('<div>').attr('id',$(this).attr('data-reveal-id')).addClass('reveal-modal medium').appendTo('body');
$.get($(this).attr('href'), function(data) {
  modal.empty().html(data).append('<a class="close-reveal-modal">&#215;</a>').foundation('reveal', 'open');

});

});
```