弹框中怎么添加html格式,可自己添加html的伪弹出框实现代码_jquery

本文介绍如何使用jQuery实现弹出对话框的加载、禁用及自适应中心显示,通过`loadPopup()`和`disablePopup()`函数控制弹出框状态,以及通过`centerPopup()`确保对话框在页面中居中。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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代码(默认隐藏)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值