2016-04-06 6 views
0

Hier ist meine Testseite - http://mymsaa.org/lightbox_test/hinzufügen Cookie jQuery Pop-Up Lightbox

ich meine Pop-up Leuchtkasten Arbeits haben.

Ich muss ein Cookie zum Leuchtkasten hinzufügen, so dass es nur einmal alle 15 Tage angezeigt wird.

Dies ist eine neue Lightbox, die ich benutze, also bin ich nicht so vertraut mit dem Code.

Hier ist der FULL-Code, den ich verwende.

<script type="text/javascript" src="http://mymsaa.org/wp-content/themes/dw-focus/assets/js/jquery-1.12.0.min.js"></script> 
<noscript>Your browser does not support JavaScript</noscript> 
<script src="http://mymsaa.org/lightbox_test/src/ezmodal.js"></script> 
<noscript>Your browser does not support JavaScript</noscript>   
<link rel="stylesheet" href="http://mymsaa.org/lightbox_test/src/ezmodal.css"> 

<!--[if lt IE 9]> 
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
<![endif]--> 

<!--LIGHTBOX-->      
<div class="ezmodal" ezmodal-autoopen="true"> 
<div class="ezmodal-container"> 

<!--IFRAME FORM-->            
<div id='subscribe_popup' style='overflow: hidden; overflow-y:hidden;'> 
<div style="padding: 10px;"> 
<iframe src="http://mymsaa.org/wp-content/themes/dw-focus/video_register/iframe/iframe.php" border="0" frameborder="0" scrolling="no" name="pop"></iframe> 
</div> 
</div> 
<!--IFRAME FORM--> 

<div class="ezmodal-footer"> 
<button type="button" class="btn1" data-dismiss="ezmodal">Skip Registration</button> 
</div> 

</div> 
</div> 
<!--LIGHTBOX-->  

<!--IFRAME CSS--> 
<style type="text/css"> 

#subscribe_popup { width: 470px; height: 380px; overflow: hidden; overflow-y:hidden; } 

#subscribe_popup iframe { width: 446px; height: 380px; } 

/*992px*/ 
@media only screen and (min-width: 992px) and (max-width: 1200px) { 

#subscribe_popup { width: 470px;} 
} 

/*768px*/ 
@media only screen and (min-width: 768px) and (max-width: 992px) { 

#subscribe_popup { width: 470px;} 

} 

/*480px*/ 
@media only screen and (min-width: 480px) and (max-width: 768px) { 

#subscribe_popup { width: 280px; height: 420px; margin-left: auto; 
margin-right: auto;} 

#subscribe_popup iframe { width: 250px; height: 400px; } 

} 

/*320px*/ 
@media only screen and (min-width: 320px) and (max-width: 480px) { 

#subscribe_popup { width: 280px; height: 420px; margin-left: auto; 
margin-right: auto;} 

#subscribe_popup iframe { width: 250px; height: 400px; } 

} 

</style> 
<!--IFRAME CSS--> 

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean scelerisque  malesuada ligula, id cursus diam facilisis ac. Sed id pulvinar mauris. Phasellus ac arcu velit. Cras tempor vestibulum volutpat. Proin consectetur lectus elementum imperdiet congue. Quisque quis nunc libero. Praesent gravida urna metus, ut elementum arcu posuere quis. Suspendisse mattis, enim vitae semper porta, metus mauris dignissim lorem, non eleifend risus mauris non diam. Ut in ullamcorper tortor, eu lobortis nibh.<p> 

<p>Ut quis lectus sit amet tortor tempus imperdiet. Maecenas enim lacus, hendrerit ac volutpat quis, ornare eu diam. Maecenas nec odio odio. Aenean eu lectus lacinia, luctus mi non, placerat metus. Proin id tortor nec est suscipit ullamcorper sed eu metus. Donec efficitur, massa eu sagittis vehicula, magna erat gravida elit, dapibus vehicula tellus dolor sed purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris auctor vel tellus vitae congue. Proin tincidunt quam velit, at posuere odio lobortis sit amet. Etiam posuere condimentum leo, a auctor elit sollicitudin nec. Vivamus faucibus tortor rhoncus orci fermentum, vitae efficitur orci mattis. Nunc est nunc, euismod vel magna vitae, fermentum dapibus libero. Maecenas quis erat aliquam enim scelerisque scelerisque sed vel metus. Sed eget finibus justo, consequat ornare sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>         

Ich weiß, dass ich ... haben

ezmodal-autoopen="true" 

in meinem Code, so dass es auf jeder Seite Last öffnet, aber das war der einzige Weg, ich den Leuchtkasten kommen konnte.

Ich habe mit Cookies zuvor auf einem anderen Lichtkasten gearbeitet und unten ist der Code, den ich zuvor verwendet habe, wenn ich versuche, es zu verwenden, funktioniert es nicht, jede Hilfe würde sehr geschätzt werden.

<script type="text/javascript" language="javascript"> 
$("document").ready(function(){ 
$("#skipbutton").click(function() { 
$("#colorbox").fadeOut(300); 
$('#cboxOverlay').remove(); 

}); 

if (document.cookie.indexOf('MSAAvideo_register_lightbox_WP_live=true') == -1) { 
var fifteenDays = 1000*60*60*24*30; 
var expires = new Date((new Date()).valueOf() + fifteenDays); 
document.cookie = "MSAAvideo_register_lightbox_WP_live=true;expires=" + expires.toUTCString(); 
$.colorbox({ inline:true, href:"#subscribe_popup"}); 
} 

$(".open_popup").colorbox({ inline:true, href:"#subscribe_popup"}); 
}); 

</script> 
<noscript>Your browser does not support Javascript</noscript> 
+1

Setzen Sie Auto auf "Falsch" um zu starten. Dann auf Cookie prüfen, wenn kein Cookie, Ezmodal auslösen, um über JS zu öffnen. Hier ist ein Artikel über Cookies w. JS. http://www.w3schools.com/js/js_cookies.asp – Mark

+0

Wie löse ich Ezmodal über JS zu öffnen? –

Antwort

0

Ich konnte es mit PHP machen.

<?php 
$cookie_name = "MSAAEmailSignUpForm_New"; 
$cookie_value = "MSAA"; 
setcookie($cookie_name, $cookie_value, time() + (86400 * 1), "/"); //  86400 = 1 day 

if(!isset($_COOKIE[$cookie_name])) { 
echo " 
<!--LIGHTBOX-->  

<div class=\"ezmodal\" ezmodal-autoopen=\"true\"> 
<div class=\"ezmodal-container\"> 

<!--IFRAME FORM-->            
<div id='subscribe_popup' style='overflow: hidden; overflow-y:hidden;'> 
<div style=\"padding: 10px;\"> 
<iframe src=\"http://mymsaa.org/wp-content/themes/dw-focus/video_register/iframe/iframe.php\" border=\"0\" frameborder=\"0\" scrolling=\"no\" name=\"pop\"></iframe> 
</div> 
</div> 
<!--IFRAME FORM--> 

<div class=\"ezmodal-footer\"> 
<button type=\"button\" class=\"btn1\" data-dismiss=\"ezmodal\">Skip Registration</button> 
</div> 

</div> 
</div> 

<!--LIGHTBOX-->"; 
} else { 
echo ""; 

} 
?>