Menu icon Foundation
Another Closing Button for Reveal Modal, f5

Ist there a way to close the reveal modal with a second closing button at the bottom of the modal? How can I trigger the js via an "OnClick"-Event?

revealreveal modalF5

Ist there a way to close the reveal modal with a second closing button at the bottom of the modal? How can I trigger the js via an "OnClick"-Event?


Wing-Hou Chan gave the most helpful answer for this post
Wing-Hou Chan over 5 years ago

Hey Julian!

Check out this Pen: http://codepen.io/winghouchan/pen/ptwJH/

The JavaScript you will need is:

$('a.custom-close-reveal-modal').click(function(){
  $('#myModal').foundation('reveal', 'close');
});

Wing-Hou Chan over 5 years ago

Hey Julian!

Check out this Pen: http://codepen.io/winghouchan/pen/ptwJH/

The JavaScript you will need is:

$('a.custom-close-reveal-modal').click(function(){
  $('#myModal').foundation('reveal', 'close');
});

Marc McGee over 5 years ago

Hi Wing-Hou Chan:
I just created a post, but perhaps this is the answer I am looking for. I don't necessarily want to create a different close button — I still like the "x" up in the corner.

But, I am linking from an image to another site, and hoping that the image link can also simultaneously close the modal. My href target is _blank, so it's a bit awkward to return to the page and the modal is still open.

I also have a text link within.

What you have on codepen is excellent. I can certain apply this in another location on my site.

If this aspect gets too tricky with my current modal, I might just omit the _blank aspect of the links.

Marc McGee over 5 years ago

Oh well. I made sure to include my modal id in the script, and place the script near the closing body and can't get it to work. Tried on the a tag and the img tag.

I think I'll just omit the _blank or live with the modal still being open.

roxanne sutton over 5 years ago

Wing-Hou, thank you for explaining this. The only change i make, is i don't refer to a specific selector, or a specific modal, so all a, img, button with this class will close the modal they are in

 $('.btn-close-reveal').click(function(){
  $('.reveal-modal').foundation('reveal', 'close');
});

Michael Fillier almost 5 years ago

Since you can technically chain reveals, Roxanne's code would close ALL reveals on the page. I have forked Wing-Hou's Pen: http://codepen.io/michaelfillier/pen/LagCf?editors=101

 $('a.close-reveal-modal-button').click(function(){
  $(this).parent('reveal-modal').foundation('reveal', 'close');
});

(I prefer the class name .close-reveal-modal-button personally, but you should use the class that you assign to the button.)