Menu icon Foundation
Can a _blank href within Reveal Modal Also be Set to Close the Modal?

I have an image link with target _blank within a modal. Is there a way to have the modal close when the image is clicked on? Seems awkward when returning to the page that the modal is still open.

reveal modallinktarget _blankclose modalhref

I have an image link with target _blank within a modal. Is there a way to have the modal close when the image is clicked on? Seems awkward when returning to the page that the modal is still open.

Wing-Hou Chan over 5 years ago

Hey Marc!

I read your comment on the other post and was a bit confused but this post clears any problems in my head.

What you need is this script:

$('[selector]').click(function(){
  $('#myModal').foundation('reveal', 'close');
});

Replace [selector] with the element that when clicked will close the modal. In your case it is an image so you would have this:

$('img').click(function(){
  $('#myModal').foundation('reveal', 'close');
});

It will be recommended to place a class on it if you have more than one image in the modal and you only want one image to close the modal.

You also will not require a link (anchor tag).

Here is a CodePen demo: http://codepen.io/winghouchan/pen/LItkr

I hope this clears any problems!

Marc McGee over 5 years ago

Hi Wing-Hou!

Thanks for responding. I got distracted with some other projects and only just getting back to the forum.

I'm not using an image. I have a text link that links to another site. I'll give your code a try. It looks like it's for using a custom button or image to close the modal. I guess what I'm trying to accomplish is close the modal and load the _blank at the same time.

I already have a dual modal (modal within a modal) setup that is working really well, so I'm pretty happy. I'm open with the modal still being open, or may just remove the _blank from the target. At this point users can click one of two buttons to load a modal and see either a floorplan or a map showing where the floorplan is located. Then from within either modal, they can click to load the other modal. It's working fantastic.

If your code solves my issue that would be icing on the cake! Thanks for posting.

Wing-Hou Chan over 5 years ago

Hey Marc!

In your other post you specified an image so I used an image in the demo.

Yep, I understand what you are trying to do.

Just use target="_blank" and href as you would normally on the link that closes the modal. Both actions, closing the modal and opening a page in a new tab, will be performed.

If you have an image link you will need to wrap the a tag around the image.

Marc McGee over 5 years ago

Thanks Wing-Hou. Much appreciated. I will be try this out later today.

roxanne sutton over 5 years ago

Wing-Hou i thank you for the script. I have gone one step further with it. I refer to a class, so i don't need to worry what selector uses that class. any link, button, img with that class will close the modal.

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

or for cases where there might be nested, modals

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