运维开发网

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

运维开发网 https://www.qedev.com 2020-02-17 16:49 出处:网络 作者: 网络整理
本文为大家介绍下html伪弹出框的实现,感兴趣的朋友可以了解下
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代码(默认隐藏)

复制代码 代码如下:

<div id="download" style="display: none;">

<div id="popupContact">

<!--自己的 HTML(body中)-->

</div>

<div id="backgroundPopup"></div>

</div>

</div>

0

精彩评论

暂无评论...
验证码 换一张
取 消