可自己添加html的伪弹出框实现代码_jquery

js教程评论491 views阅读模式

js

复制代码 代码如下:

var popupStatus = 0;

//loading popup with jQuery magic!

function loadPopup(){

//loads popup only if it is disabled

if(popupStatus==0){

$("#backgroundPopup").css({

"opacity": "0.7"

});

$("#backgroundPopup").fadeIn("slow");

$("#popupContact").fadeIn("slow");

popupStatus = 1;

}

}

//disabling popup with jQuery magic!

function disablePopup(){

//disables popup only if it is enabled

if(popupStatus==1){

$("#backgroundPopup").fadeOut("slow");

$("#popupContact").fadeOut("slow");

popupStatus = 0;

}

}

//centering popup

function centerPopup(){

//request data for centering

var browser=navigator.userAgent;

var windowWidth = document.documentElement.clientWidth;

var windowHeight = document.documentElement.clientHeight;

var stop="";

var sleft="";

if(browser.indexOf('Chrome')!=-1){

stop=document.body.scrollTop;

sleft=document.body.scrollLeft;

}

else{

stop=document.documentElement.scrollTop;

sleft=document.documentElement.scrollLeft;

}

// windowWidth+=document.body.scrollLeft;

// windowHeight+=document.body.scrollTop;

var popupHeight = $("#popupContact").height();

var popupWidth = $("#popupContact").width();

//centering

$("#popupContact").css({

"position": "absolute",

"top": windowHeight/2-popupHeight/2+stop,

"left": windowWidth/2-popupWidth/2+sleft

});

//only need force for IE6

//背景色

$("#backgroundPopup").css({

"height": windowHeight

});

}

//调用弹出框事件

function bb(str){

$("#download").show();

centerPopup();

loadPopup();

//CLOSING POPUP

//Click the x event!

$("#popupContactClose").click(function(){

disablePopup();

});

//Click out event!,点击背景事件

$("#backgroundPopup").click(function(){

disablePopup();

});

//Press Escape event!

$(document).keypress(function(e){

if(e.keyCode==27 && popupStatus==1){

disablePopup();

}

});

}

html代码(默认隐藏)

复制代码 代码如下:

企鹅博客
  • 本文由 发表于 2019年9月5日 11:59:14
  • 转载请务必保留本文链接:https://www.qieseo.com/421468.html

发表评论