Bonjour à tous
Sur le site que je construis actuellement j'ai mis un script permettant l'ouverture d'une modal box à l'ouverture de ma page index. Seulement j'aimerai que cette modal s'ouvre toutes les 15min, mais là pour le coup je ne saurai quoi entrer dans le code jquery pour mettre en place cette fonction.
Un petit coup de main?
<script>
$(document).ready(function() {
//Put in the DIV id you want to display
launchWindow('#dialog1');
//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 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();
$(id).css('top', winH/2-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);
//transition effect
$(id).fadeIn(2000);
}
</script>
Je vous remercie d'avance. J'imagine que la fonction à ajouter ne doit pas être bien compliquée mais ne m'y connaissant pas en jquery je bloque.
Salut,
pas besoin de jQuery, juste un petit setInterval :
setInterval(function()
{
launchWindow('#dialog1');
}, 900000);
Merci pour ta réponse mais j'ai certainement du mal intégrer le setinterval car cela ne fonctionne pas.
Peux tu m'indiquer où et comment l'ajouter à mon code posté plus haut?
En te remerciant
Dans ta fonction "ready" comme ceci :
$(document).ready(function() {
setInterval(function()
{
launchWindow('#dialog1');
}, 900000);
});
As-tu bien attendu 15 minutes pour voir si la fonction s'exécutait bien dans le setInterval ?
Sinon tu peux baisser la valeur 900000 pour que sa soit plus rapide. ( en 3000 pour 3 secondes )
Ou sinon, tu peux aller sur ce site pour tout savoir sur la méthode setInterval.
je viens de tenter ça
<script>
$(document).ready(function() {
setInterval(function()
{
launchWindow('#dialog1');
}, 900000);
//Put in the DIV id you want to display
launchWindow('#dialog1');
//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 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();
$(id).css('top', winH/2-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);
//transition effect
$(id).fadeIn(2000);
}
</script>
Mais le modal réapparait aussitôt que j'actualise la page...
oui car juste en dessous du setInterval tu fait appel à ta méthode :
//Put in the DIV id you want to display
launchWindow('#dialog1');
Tu dois l'enlever
$(document).ready(function() {
setInterval(function()
{
//Put in the DIV id you want to display
launchWindow('#dialog1');
}, 900000);
//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);
});
});