Simple fenêtre modale + Cookie jQuery

J'utilise ce plugin jQuery Simple Modal Window pour afficher une fenêtre modale. J'utilise également jQuery Cookie Plugin (jquery.cookie.js) pour configurer les cookies. Comment puis-je mélanger jQuery Simple Modal Window et jQuery Cookie? Il est nécessaire que, après avoir cliqué sur le bouton "Continuer", les cookies ont été définis et la fenêtre modale à l'avenir n'apparaît pas aux utilisateurs. Je suis désolé, je suis juste le débutant.Simple fenêtre modale + Cookie jQuery

Ceci est mon code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/jquery.cookie.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 

//Put in the DIV id you want to display 
launchWindow('#alert'); 
//if close button is clicked 
$('.window .close').click(function (e) { 
    $('#mask').hide(); 
    $('.window').hide(); 
}); 
}); 

//if close button is clicked 
$('.window .close').click(function (e) { 
//Cancel the link behavior 
    e.preventDefault(); 

    $('#mask').hide(); 
    $('.window').hide(); 
}); 

//if mask is clicked 
$('#mask').click(function() { 
    $(this).hide(); 
    $('.window').hide(); 
}); 

function launchWindow(id) { 

    //Get the screen height and width 
    var maskHeight = $(document).height(); 
    var maskWidth = $(window).width(); 
    //Set heigth and width to mask to fill up the whole screen 
    $('#mask').css({'width':maskWidth,'height':maskHeight}); 
    //transition effect 
    $('#mask').fadeIn(1000); 
    $('#mask').fadeTo("slow",0.95); 
    //Get the window height and width 
    var winH = $(window).height(); 
    var winW = $(window).width();    
    //Set the popup window to center 
    $(id).css('top', winH/2-$(id).height()/2); 
    $(id).css('left', winW/2-$(id).width()/2); 
    //transition effect 
    $(id).fadeIn(2000); 
} 
</script> 

<script type="text/javascript"> 
$(function() 
{ 
$('#button').click(function(e) 
{ 
$.cookie('the_cookie', '1', { expires: 999 }); 
}); 
}); 
</script> 

</head> 
<body> 
<!-- Start alert block --> 
<div id='boxes'> 
<div id='alert' class='window'> 
some text... 
<input type="button" id="button" value="" class='close warn_buttons'/> 

</div> 
<!-- Mask --> 
<div id='mask'></div> 
</div> 
<!-- End alert block --> 
</body> 
</html>

Source

2010-11-16 w00t

Ne pas appeler launchWindow() si cookie.

if(!$.cookie('the_cookie')){ 
    launchWindow('#alert'); 
}

Source

2010-11-16 11:13:42 Anpher

Oui, ça marche! Problème dans mes mains =)) Anpher, merci beaucoup! – w00t

Modifiez votre script avec celui-ci et incluez le dernier script jquery et cookie. Cela fonctionnera bien.

$(document).ready(function() { 
    if($.cookie("modal") != 'true') 
    { 
    //Put in the DIV id you want to display 
    launchWindow('#alert'); 


//if close button is clicked 
$('.window .close').click(function (e) { 
//Cancel the link behavior 
e.preventDefault(); 
$.cookie("modal", "true", { path: '/', expires: 7 }); 
$('#mask').hide(); 
$('.window').hide(); 
}); 

//if mask is clicked 
$('#mask').click(function() { 
$(this).hide(); 
$('.window').hide(); 
$.cookie("modal", "true", { path: '/', expires: 7 }); 
}); 

} 
}); 
function launchWindow(id) { 


    //Get the screen height and width 
    var maskHeight = $(document).height(); 
    var maskWidth = $(window).width(); 

    //Set height and width to mask to fill up the whole screen 
    $('#mask').css({'width':maskWidth,'height':maskHeight}); 

    //transition effect  
    $('#mask').fadeIn(1000);  
    $('#mask').fadeTo("slow",0.8); 

    //Get the window height and width 
    var winH = $(window).height(); 
    var winW = $(window).width(); 

    //Set the popup window to center 
    $(id).css('top', winH/2-$(id).height()/2); 
    $(id).css('left', winW/2-$(id).width()/2); 

    //transition effect 
    $(id).fadeIn(2000); 
}

Source

2011-02-16 14:59:38 Dodi

Ceci est le code de script que vous utilisez J'ai mis le cookie pendant 10 minutes dans ce code. Vous pouvez changer le temps de cookie selon votre besoin.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Simple JQuery Modal Window from Queness</title> 

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script> 
<script> 

$(document).ready(function() { 

//if the cookie hasLaunch is not set, then show the modal window 
if (!readCookie('hasLaunch')) { 
    //launch it 
    launchWindow('#dialog2');  
    //then set the cookie, so next time the modal won't be displaying again. 
    createCookie('hasLaunch', 1, 1); 
} 

//if close button is clicked 
$('.window #close').click(function() { 
    $('#mask').hide(); 
    $('.window').hide(); 
});  

//if mask is clicked 
$('#mask').click(function() { 
    $(this).hide(); 
    $('.window').hide(); 
});   


$(window).resize(function() { 

    var box = $('#boxes .window'); 

    //Get the screen height and width 
    var maskHeight = $(document).height(); 
    var maskWidth = $(window).width(); 

    //Set height and width to mask to fill up the whole screen 
    $('#mask').css({'width':maskWidth,'height':maskHeight}); 

    //Get the window height and width 
    var winH = $(window).height(); 
    var winW = $(window).width(); 

    //Set the popup window to center 
    box.css('top', winH/2 - box.height()/2); 
    box.css('left', winW/2 - box.width()/2); 

}); 

}); 

function createCookie(name,value,days) { 
if (days) { 
    var date = new Date(); 
    //date.setTime(date.getTime()+(days*24*60*60*1000)); 
    date.setTime(date.getTime()+(10*60*1000)); 
    var expires = "; expires="+date.toGMTString(); 
} 
else var expires = ""; 
document.cookie = name+"="+value+expires+"; path=/"; 
} 

function readCookie(name) { 
var nameEQ = name + "="; 
var ca = document.cookie.split(';'); 
for(var i=0;i < ca.length;i++) { 
    var c = ca[i]; 
    while (c.charAt(0)==' ') c = c.substring(1,c.length); 
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length); 
} 
return null; 
} 

function launchWindow(id) { 

    //Get the screen height and width 
    var maskHeight = $(document).height(); 
    var maskWidth = $(window).width(); 

    //Set heigth and width to mask to fill up the whole screen 
    $('#mask').css({'width':maskWidth,'height':maskHeight}); 

    //transition effect  
    $('#mask').fadeIn(1000);  
    $('#mask').fadeTo("slow",0.8); 

    //Get the window height and width 
    var winH = $(window).height(); 
    var winW = $(window).width(); 

    //Set the popup window to center 
    $(id).css('top', winH/2-$(id).height()); 
    $(id).css('left', winW/2-$(id).width()/2); 

    //transition effect 
    $(id).fadeIn(2000); 


} 

</script> 

<style> 
body { 
font-family:verdana; 
font-size:15px; 
} 

a {color:#333; text-decoration:none} 
a:hover {color:#ccc; text-decoration:none} 

#mask { 
    position:absolute; 
    left:0; 
    top:0; 
    z-index:9000; 
    background-color:#000; 
    display:none; 
} 

#boxes .window { 
    position:fixed; 
    width:440px; 
    height:200px; 
    display:none; 
    z-index:9999; 
    padding:20px; 
} 

#boxes #dialog { 
    width:375px; 
    height:203px; 
    padding:10px; 
    background-color:#ffffff; 
} 

#boxes #dialog1 { 
    width:375px; 
    height:203px; 
} 

#dialog1 .d-header { 
    background:url(images/login-header.png) no-repeat 0 0 transparent; 
    width:375px; 
    height:150px; 
} 

#dialog1 .d-header input { 
    position:relative; 
    top:60px; 
    left:100px; 
    border:3px solid #cccccc; 
    height:22px; 
    width:200px; 
    font-size:15px; 
    padding:5px; 
    margin-top:4px; 
} 

#dialog1 .d-blank { 
    float:left; 
    background:url(images/login-blank.png) no-repeat 0 0 transparent; 
    width:267px; 
    height:53px; 
} 

#dialog1 .d-login { 
    float:left; 
    width:108px; 
    height:53px; 
} 

#boxes #dialog2 { 
    background:url(images/notice.png) no-repeat 0 0 transparent; 
    width:326px; 
    height:229px; 
    padding:50px 0 20px 25px; 
} 
</style> 
</head> 
<body> 
<h2><a href="http://www.queness.com">Simple jQuery Modal Window Examples from Queness WebBlog</a></h2> 

<ul> 
<li><a href="http://www.queness.com">Normal Link</a></li> 
<li><a href="#dialog" name="modal">Simple Window Modal</a></li> 
<li><a href="#dialog1" name="modal">Login Dialog Box</a></li> 
<li><a href="#dialog2" name="modal">Sticky Note</a></li> 
</ul> 

<div style="font-size:10px;color:#ccc">Except where otherwise noted, content on this site is licensed under a Creative Commons Attribution 3.0 License.</div> 

<div id="boxes"> 

<div id="dialog" class="window"> 
Simple Modal Window | 
<a href="#"class="close"/>Close it</a> 
</div> 

<!-- Start of Login Dialog --> 
<div id="dialog1" class="window"> 
    <div class="d-header"> 
    <input type="text" value="username" onclick="this.value=''"/><br/> 
    <input type="password" value="Password" onclick="this.value=''"/>  
    </div> 
    <div class="d-blank"></div> 
    <div class="d-login"><input type="image" alt="Login" title="Login" src="images/login-button.png"/></div> 
</div> 
<!-- End of Login Dialog --> 



<!-- Start of Sticky Note --> 
<div id="dialog2" class="window"> 
    So, with this <b>Simple Jquery Modal Window</b>, it can be in any shapes you want!  Simple and Easy to modify :) <br/><br/> 
<input type="button" value="Close it" class="close"/> 
</div> 
<!-- End of Sticky Note --> 



<!-- Mask to cover the whole screen --> 
    <div id="mask"></div> 
</div> 



</body> 
</html>

Source

2014-06-18 06:31:52

Répondre

Questions connexes