手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >可自己添加html的伪弹出框实现代码
可自己添加html的伪弹出框实现代码
摘要:js复制代码代码如下:varpopupStatus=0;//loadingpopupwithjQuerymagic!functionload...

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">

<div id="popupContact">

<>

</div>

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

</div>

</div>

【可自己添加html的伪弹出框实现代码】相关文章:

让插入到 innerHTML 中的 script 跑起来的实现代码

jquery实现弹出层效果实例

自己编写的支持Ajax验证的JS表单验证插件

会自动逐行上升的文本框

超酷右下浮出广告窗口代码

获得当前页面URL地址的三个JS代码

必须点击广告才能进入的代码

实现DIV圆角的JavaScript代码

JavaScript动态添加style节点的方法

打印/预览/设置的客户端代码

精品推荐
分类导航