嘿伙计们,我在这里搜索过,但找不到关于此的答案。
我有一个 Joomla 网站,并希望在页面加载时使用模式框在网站中间显示横幅。到目前为止一切顺利,我使用了我在这里找到的这个脚本:http ://www.thesimplexdesign.com/2011/03/update-for-subscription-pop-up.html ,一切都像一个魅力。
我的问题是当我添加我自己的自动关闭模式框的代码时。此代码有效,但用户无法自行关闭模式。您能否指导我如何操作以使其正常工作(可以自动关闭,但也可以由用户关闭)?
我的代码是带有注释的代码//fade out after delay
代码:
var popupStatus = 0;
var $j = jQuery.noConflict();
//this code will load popup with jQuery magic!
function loadPopup(){
//loads popup only if it is disabled
if(popupStatus==0){
$j("#backgroundPopup").css({
"opacity": "0.7"
});
$j("#backgroundPopup").fadeIn("slow");
$j("#popupContact").fadeIn("slow");
popupStatus = 1;
}
}
//This code will disable popup when click on x!
function disablePopup(){
//disables popup only if it is enabled
if(popupStatus==1){
$j("#backgroundPopup").fadeOut("slow");
$j("#popupContact").fadeOut("slow");
popupStatus = 0;
}
}
//this code will center popup
function centerPopup(){
//request data for centering
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var popupHeight = $j("#popupContact").height();
var popupWidth = $j("#popupContact").width();
//centering
$j("#popupContact").css({
"position": "absolute",
"top": windowHeight/2-popupHeight/2,
"left": windowWidth/2-popupWidth/2
});
//only need force for IE6
$j("#backgroundPopup").css({
"height": windowHeight
});
}
//CONTROLLING EVENTS IN jQuery
$j(document).ready(function(){
if ($j.cookie("anewsletter") != 1) {
//centering with css
centerPopup();
//load popup
loadPopup();
$j.cookie("anewsletter", "1", { expires: 1 });
}
//CLOSING POPUP
//Click the x event!
$j("#popupContactClose").click(function(){
disablePopup();
});
//Click out event!
$j("#backgroundPopup").click(function(){
disablePopup();
});
//Press Escape event!
$j(document).keypress(function(e){
if(e.keyCode==27 && popupStatus==1){
disablePopup();
}
});
//fade out after delay
$j("#backgroundPopup").delay(15000).fadeOut("slow");
$j("#popupContact").delay(15000).fadeOut("slow");
});