Menu icon Foundation
How to Launch Reveal Modal from External Link?

So I have a Foundation reaveal opening a form on my landing page / everything works all well and good but the client wants the modal form to now open once an external link (from an HTML email) is clicked.

Is it possible to have a reveal modal open from an external link?

I have tried:
href="http://domain.com/" data-reveal-id="formModal"

However this only opens the URL and the form modal is not launched.

Please help if you have any advice.
Cheers.
> j

reveal modalexternal link

So I have a Foundation reaveal opening a form on my landing page / everything works all well and good but the client wants the modal form to now open once an external link (from an HTML email) is clicked.

Is it possible to have a reveal modal open from an external link?

I have tried:
href="http://domain.com/" data-reveal-id="formModal"

However this only opens the URL and the form modal is not launched.

Please help if you have any advice.
Cheers.
> j

Bob Sawyer about 3 years ago

What if the modal is always open on the page, so when the visitor arrives from the email, it's already in the open position? Will the page be accessed from anywhere else on the site, and if so, would the already-open modal be an impediment?

jinch about 3 years ago

Thanks Bob but unfortunately it needs to be accessed only when called upon so I cant set it up that way.

Bob Sawyer about 3 years ago

No problem, just a thought.

So, in thinking this through... you've got to have something that triggers the modal when someone clicks through from the email. What if the link in the email had a query on it, like so:

http://www.yoursite.com/?showModal=yes

Then, write a little JS snippet that parses the URL, checks for the query, and then fires up the modal. Off the top of my head (untested):

function getQueryVariable(variable) {
     var query = window.location.search.substring(1);
     var vars = query.split("&");
     for (var i=0;i<vars.length;i++) {
          var pair = vars[i].split("=");
          if(pair[0] == variable){return pair[1];}
     }
     return(false);
}

if (window.location.search) {
     var showModal = getQueryVariable('reveal');
     if (showModal == 'yes') {
          $('#myModal').foundation('reveal', 'open');
     }
}

jinch almost 3 years ago

Hi Bob,

Sorry for the delayed response / i got wrapped up on another project.

I plugged in your code but unfortunately the script isnt launching the reveal. Im not sure if its the query string or the javascript?

Is this working on your end?

Bob Sawyer almost 3 years ago

Ah, yes - I goofed. The second script should be:

 if (window.location.search) {
     var showModal = getQueryVariable('showModal');
     if (showModal == 'yes') {
          $('#myModal').foundation('reveal', 'open');
     }
}

That does indeed work:

http://codepen.io/bobsawyer/full/YyNmMj/?showModal=yes

Sheila Dent almost 3 years ago

Excellent! Thank you.

jinch 6 months ago

I know this is an older post now but wondering if this can be amended to work with multiple models? 

I'm tasked with creating a video library ~ and each video will need to have there own model with a unique ID. Is it possible to have the query string include a unique ID that can be called on in a URL?

Here is a codePen to demo what I currently have setup (https://codepen.io/jinch/full/eMJRrY?showModal=yes). This works but unfortunately is not specific to call the individual model and instead opens both of them. Also, I would like to get this to autoplay once opened but the code I have commented out calls both to play at the same time.

Any thoughts or suggestions to get this to work?

HTML:

<div class="row small-up-2 medium-up-3 large-up-4">
								  <div class="column column-block">
									<a href="#" class="vidLink" data-open="vid-001">
										<img src="../images/Binder-and-Slip-Case-Sets-Archival-Methods-18-feature.jpg" class="thumbnail" alt="">
										<h6>Albums and Pages</h6>
									</a>
									<!--Start Modal Reveal-->
									<div class="small reveal openVideo" id="vid-001" data-reveal data-reset-on-close="true">
										<h5>Albums and Pages</h5>
										<div class="responsive-embed widescreen">
											<iframe src="https://www.youtube.com/embed/XQWAeNbXZtI?enablejsapi=1&amp;version=3&amp;playerapi&amp;rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
										</div>					
										<button class="close-button" data-close aria-label="Close reveal" type="button">
											<span aria-hidden="true">&times;</span>
										</button>
									</div>
									<!--End Modal Reveal-->
								  </div>

								  <div class="column column-block">
									<a href="#" class="vidLink" data-open="vid-002">
										<img src="https://placehold.it/330x248" class="thumbnail" alt="">
										<h6>35mm Slide Storage</h6>
									</a>
									<!--Start Modal Reveal-->
									<div class="small reveal openVideo" id="vid-002" data-reveal data-reset-on-close="true">
										<h5>35mm Slide Storage</h5>
										<div class="responsive-embed widescreen">
											<iframe src="https://www.youtube.com/embed/c361iSyVIeU?enablejsapi=1&amp;version=3&amp;playerapi&amp;rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
										</div>					
										<button class="close-button" data-close aria-label="Close reveal" type="button">
											<span aria-hidden="true">&times;</span>
										</button>
									</div>
									<!--End Modal Reveal-->
								  </div>

 

JAVASCRIPT

/*START - OPEN VIDEO MODAL FROM EXTERNAL LINK + AUTOPLAY */

/*Opening modal from external link reference (http://foundation.zurb.com/forum/posts/35072-how-to-launch-reveal-modal-from-external-link)*/
function getQueryVariable(variable) {
	 //var videoID = 
     var query = window.location.search.substring(1);
     var vars = query.split("&");
     for (var i=0;i<vars.length;i++) {
          var pair = vars[i].split("=");
          if(pair[0] == variable){return pair[1];}
     }
     return(false);
}

if (window.location.search) {
     var showModal = getQueryVariable('showModal');
     if (showModal == 'yes') {
		 $('.openVideo').foundation('open');
		 /*$('.openVideo iframe')[0].src += "&autoplay=1";*/
		 /*$('.openVideo iframe')[0].contentWindow.postMessage('{"event":"command","func":"' + 'playVideo' + '","args":""}', '*');*/
     }
}

/*Detect when modal is open and auto play youTube Video */
/*$(document).ready(function() {
  $('.openVideo').on('open.zf.reveal', function() {
    $('.openVideo iframe')[0].contentWindow.postMessage('{"event":"command","func":"' + 'playVideo' + '","args":""}', '*');
  });
});*/
/*END - OPEN VIDEO MODAL FROM EXTERNAL LINK + AUTOPLAY */

jinch 6 months ago

 Ok - i think i figured it out by amending the query string with the video ID:

 
Now just need to figure out how to make it autoplay.