用DIV实现弹出窗口
JQuery实现页面弹出框
JQuery实现页⾯弹出框本⽂实例为⼤家分享了JQuery实现页⾯弹出框的具体代码，供⼤家参考，具体内容如下bootstrap4⾥⾯有个模态框，点击页⾯中的某个按钮或者元素就会弹出⼀个框框：今天尝试⽤JQ来实现⼀下，具体的思路就是：1、在页⾯中创建⼀个div2、⽤JQ中的hide()和show()来控制上⾯的div的隐藏和显⽰第⼀步：创建按钮，div，样式<head><meta charset="UTF-8"><title>页⾯弹出框</title><style>#popUpBox{display: block; //⼀开始应该是隐藏状态，所以是nonewidth: 1080px; //弹出框的宽height: 630px; //弹出框的⾼background-color: yellow;margin:0 auto; //弹出框页⾯居中}</style></head><body><button id="ShowBox" onclick="ShowBox('popUpBox')">点击显⽰弹出框</button><div id="popUpBox">//⾥⾯是弹出框的内容</div></body>第⼆步：引⼊JQ⽂件和写函数实现功能<script type="text/javascript" src="../js/jquery-1.11.0.min.js" ></script><script>function ShowBox(BoxID){//获取页⾯要显⽰的弹出框的idvar popBox = $("#"+BoxID);//⽤show()⽅法使其显⽰出来popBox.show();}function HideBox(BoxID){//获取页⾯要隐藏的弹出框的idvar popBox = $("#"+BoxID);//⽤hide()⽅法使其隐藏popBox.hide();}</script>效果：第三步：优化⼀下弹出框的细节，⽐如右上⾓给它加个关闭的功能等等，放上全部代码<!DOCTYPE html><html><head><meta charset="UTF-8"><title>页⾯弹出框</title><style>#popUpBox{display: none;width: 1080px;height: 630px;margin: 0 auto;background-color: yellow;}#BoxHead{/*⽂字⽔平居中*/text-align: center;/*宽度继承popUpBox的,不需要设置*/height: 40px;border: 1px solid black;}#BoxHead>*{/*只有⼀⾏,将line-heigh的数值设置的和⽗容器的⾼度⼀样*//*可以实现垂直居中*/line-height: 40px;}#BoxHead>a{float: right;margin-right: 10px;}</style></head><body><button id="ShowBox" onclick="ShowBox('popUpBox')">点击显⽰弹出框</button><div id="popUpBox"><!--弹出框的头部，⾥⾯有弹出框标题和关闭按钮--><div id="BoxHead"><label>弹出框</label><a href="javascript:void(0)" onclick="HideBox('popUpBox')">x</a></div><!--弹出框的主体部分--><div id="BoxBody"></div><!--弹出框的底部，可以加⼀些功能按钮，⽐如说保存按钮--><div id="BoxFooter"></div></div></body><script type="text/javascript" src="../js/jquery-1.11.0.min.js" ></script><script>function ShowBox(BoxID){//获取页⾯要显⽰的弹出框的idvar popBox = $("#"+BoxID);//⽤show()⽅法使其显⽰出来popBox.show();}function HideBox(BoxID){//获取页⾯要隐藏的弹出框的idvar popBox = $("#"+BoxID);//⽤hide()⽅法使其隐藏popBox.hide();}</script></html>最终效果：上⾯这就是⽤JQ对弹出框功能的实现，实际应⽤中建议从外部引⼊CSS⽂件，免得太乱了，还有就是JQ的show()和hide()可以设置speed参数，就显⽰和隐藏的速度，会有⼀个淡⼊淡出的效果。
两种方式解决DIV弹出窗口问题
两种方式解决DIV弹出窗口问题本文向大家描述一下如何完美实现DIV弹出层功能，这里有二种方式处理DIV弹出窗口，一种是用JavaScript代码，另一种是用样式，具体内容请看本文详细介绍，相信本文介绍一定会让你有所收获。
完美实现DIV弹出层功能要想完美实现DIV弹出层功能，这里推荐一个轻量级JavaScript 工具：subModal（包括图片和样式仅8KB左右，JavaScript文件4.27KB），subModal实现用DIV模拟的模式DIV弹出窗口，非常漂亮且简单实用。
其中发表评论窗口就是DIV弹出窗口样式。
下面将介绍此JavaScript工具的使用：在开始使用之前需要下载文件：已经整理后的版本：subModal原始版本（英文）：/files/subModal/可以在此页面查看运行效果。
页面引用相关文件。
在需要DIV弹出窗口的页面上引用样式文件和Javascript文件：viewsourceprint?1.1.<linkrellinkrel="stylesheet"type="text/css"href="subm odal.css"/>2.2.<scripttypescripttype="text/javascript"src="submodal.J avaScript"></script>3.源代码中的submodal.JavaScript,submodal.css,loading.html,loading.gif,close .gif是必须文件，其他为演示实例文件。
若要改变DIV弹出窗口样式，或者改变close.gif图片路径，请编辑submodal.css若需要改变加载效果，需编辑loading.html，现在我们就可以编写代码来DIV弹出窗口了，有二种方式处理DIV弹出窗口：◆用JavaScript代码：DIV弹出窗口的函数为：showPopWin(url,width,height,returnFunc),url为弹出链接，width 为宽带，height为高度，returnFunc为当窗口弹出后的回调函数。
html里面自定义弹出窗口
html⾥⾯⾃定义弹出窗⼝ ⽹页上默认的提⽰框或对话框⼀般⽐较丑，可以利⽤div遮盖层来⾃定义对话框 1.定义⼀个按钮或者链接（项⽬⾥⾯是通过点击⼀个图⽚） <img src="images/zz.gif" style="margin-top:16%" onclick="myalert('描述（限200字）：')"/> 2.设置隐藏的遮罩层 <div id="divResult"></div><div id="bg"></div> <div class="box" style="display: none"> <div class="title">标题</div> <div class="list2"> <p></p> </div> <div> <textarea id="remark" style="width:80%;margin-left:5%"></textarea> </div> <div class="end"> <center> <a id="btnZhuanhui" href="#" class="close" style="color:#000000; font-size:16px; margin-right:5%">确定</a> <a id="btnCloseHref" href="#" class="close" style="color:#000000; font-size:16px; margin-left:5%">取消</a> </center> </div> </div> 3.⽤css设定⾃⼰的通⽤样式 .box { position: absolute; width: 250px; left: 50%; height: auto; z-index: 100; background-color: #fff; border: 1px solid rgb(0,153,153); /*padding: 1px;*/ } .box div.title { height: 35px; font-size: 16px; background-color: #099; position: relative; padding-left: 10px; line-height: 35px; color: #fff; } .box div.title a { position: absolute; right: 5px; font-size: 16px; color: #fff; } .box div.list { min-height:60px; padding: 10px; } .box div.list p { height: 24px; line-height: 60px; font-size:14px; } .box div.end { min-height:30px; padding: 5px; } #bg { background-color: #666; position: absolute; z-index: 99; left: 0; top: 0; display: none; width: 100%; height: 100%; opacity: 0.5; filter: alpha(opacity=50); -moz-opacity: 0.5; } 4.编写myalert function myalert(msg) { $("#bg").css({ display: "block", //height:$(document).height() height: "100%", position: "fixed" }); var $box = $('.box'); $box.css({ //设置弹出层距离左边的位置 left: ($("body").width() - $box.width()) / 2 + "px", //设置弹出层距离上⾯的位置 top: ($(window).height() - $box.height()) / 2 - $(window).scrollTop() - $box.height() + "px", display: "block" }).find("p").html(msg); }。
delphi popup 方法
delphi popup 方法Delphi弹出窗口方法（Popup）是一种常用的界面设计技术，在Delphi编程中起到了重要的作用。
本文将介绍Delphi中Popup方法的使用以及一些相关注意事项。
我们需要了解什么是弹出窗口。
弹出窗口是指在主界面的基础上，通过点击按钮或触发特定事件，弹出一个新的小窗口来显示额外的信息或提供其他功能。
Delphi中的Popup方法就是用来实现这个功能的。
在Delphi中，可以使用TForm类的Popup方法来创建弹出窗口。
这个方法接受一个TComponent类型的参数，参数可以是一个已经创建好的窗口，也可以是一个新创建的窗口。
当调用Popup方法时，程序会在主界面的基础上生成一个新的窗口，并显示在主界面的上方。
使用Popup方法创建的窗口可以自由拖动、调整大小，并且可以设置窗口的标题、背景色、字体样式等。
通过在窗口中添加控件，我们可以实现各种功能，比如输入数据、显示图表、执行计算等。
同时，我们还可以通过代码来控制窗口的行为，比如设置窗口的初始位置、关闭窗口的方式等。
在使用Popup方法创建窗口时，我们需要注意一些问题。
首先，要确保创建的窗口与主界面之间有合适的交互方式，比如通过按钮点击、菜单选择等触发弹出窗口的显示。
其次，要考虑到不同屏幕分辨率的适配性，保证弹出窗口在不同设备上的显示效果。
另外，要注意窗口的关闭方式，避免用户无法关闭窗口或者关闭窗口时出现异常情况。
除了Popup方法，Delphi还提供了其他一些弹出窗口的实现方式。
比如使用TForm的ShowModal方法可以创建一个模态窗口，该窗口在显示期间会阻塞主界面的操作，直到用户关闭该窗口才能继续操作主界面。
使用TForm的Show方法则可以创建一个非模态窗口，该窗口可以与主界面同时进行操作。
总结一下，Delphi中的Popup方法是一种常用的界面设计技术，可以用来创建弹出窗口并实现各种功能。
在使用Popup方法时，我们需要注意窗口的交互方式、屏幕适配性以及关闭方式等问题，以保证弹出窗口的正常使用。
用DIV实现弹出窗口
用D I V实现弹出窗口SANY GROUP system office room 【SANYUA16H-SANYHUASANYUA8Q8-用DIV实现弹出窗口.txt你无法改变别人，但你可以改变自己；你无法改变天气，但你可以改变心情；你无法改变生命长度，但你可以拓展它的宽度。
用DIV实现弹出窗口2008-04-08 11:12/** 创建弹出div窗口。
1、接口说明：DivWindow(id,title,width,height,content) 构造函数，创建一个弹出窗口对象参数：id 弹出窗口id；title：弹出窗口标题名称；width：弹出窗口宽度height：弹出窗口高度content：弹出窗口显示内容2、接口说明： closeDivWindow(id) 关闭窗口参数： id 弹出窗口id3、接口说明：setPopupTopTitleFontColor(PopupTopTitleFontColor) 设置弹出窗口标题字体颜色参数：4、接口说明：setPopupTopBgColor(tBgColor) 设置弹出窗口标题背景颜色5、接口说明：setPopupColor(borderColor,bgColor,tFontColor,cBgColor,fColor) 设置弹出窗口风格,包括标题栏的背景，弹出窗口边框颜色，内容窗体背景颜色，内容窗体字体颜色6、接口说明：open()使用方法：var a = new DivWindow("1","窗口测试",580,400,"Welcome to visited my personal website:<br><a href=target=_blank></a><br><ahref=http://www ... </a><br><br>thx!!!=)..."L);a.setPopupTopBgColor("black","blue","white","white","black");a.open();生成的html：<div id='"window" id'></div> 控制背景的div，使背景逐渐变暗<div id='"windowTopBg" id'><div id='"windowTop" id'><span id='"windowTopTitle" id'>title</span><span id='"windowTopOperate" id'>maxORmin</span><span id='"windowTopClose" id'>close</span></div><div id='"windowContent" id'>content</div></div>@author Nieger Dai@date 2007.11.15*/var isIe = (document.all)?true:false;var moveable=false;var topDivBorderColor = "#336699";//提示窗口的边框颜色var topDivBgColor = "#6795B4";//提示窗口的标题的背景颜色var contentBgColor = "white";//内容显示窗口的背景颜色var contentFontColor = "black";//内容显示窗口字体颜色var titleFontColor = "white"; //弹出窗口标题字体颜色var index=10000;//z-index;// 创建弹出窗口，构造函数function DivWindow(id,title,w,h,content){this.id = id;//窗口idthis.zIndex = index 2;this.title = title;//弹出窗口名称this.message = content;//弹出窗口内容this.width = w;//弹出窗口宽度this.height = h;//弹出窗口高度this.left = (document.body.clientWidth) ? (document.body.clientWidth - this.width)/2 : 0;//弹出窗口位置，距屏幕左边的位置this.top = (document.body.clientHeight) ? (document.body.clientHeight - this.height)/2 : 0;//弹出窗口位置，距屏幕上边的位置//this.init = init;//this.init();}//根据构造函数设定初始值，创建弹出窗口DivWindow.prototype = {//设置弹出窗口标题字体颜色setPopupTopTitleFontColor:function(tFontColor){titleFontColor = tFontColor;},//设置弹出窗口标题背景颜色setPopupTopBgColor:function(tBgColor){topDivBgColor = tBgColor;},//设置弹出窗口风格,包括标题栏的背景，弹出窗口边框颜色，内容窗体背景颜色，内容窗体字体颜色setPopupColor:function(borderColor,bgColor,tFontColor,cBgColor,fColor) {topDivBorderColor = borderColor;topDivBgColor = bgColor;titleFontColor = tFontColor;contentBgColor = cBgColor;contentFontColor = fColor;},//打开一个弹出窗口open: function(){var sWidth,sHeight;sWidth=document.body.clientWidth;sHeight=document.body.clientHeight;var bgObj=document.createElement("div");bgObj.setAttribute('id','window' this.id);varstyleStr="top:0px;left:0px;position:absolute;background:#245;width:" sWidth "px;height:" sHeight "px;";styleStr =(isIe)?"filter:alpha(opacity=0);":"opacity:0;";bgObj.style.cssText=styleStr;document.body.appendChild(bgObj);//让背景逐渐变暗showBackground(bgObj,25);// 弹出窗口框体背景容器var windowTopBgDiv = document.createElement("div");windowTopBgDiv.setAttribute('id','windowTopBg' this.id);windowTopBgDiv.style.position = "absolute";windowTopBgDiv.style.zIndex = this.zIndex ;windowTopBgDiv.style.width = this.width ;windowTopBgDiv.style.height = this.height;windowTopBgDiv.style.left = this.left;windowTopBgDiv.style.top = this.top;windowTopBgDiv.style.background = topDivBgColor;windowTopBgDiv.style.fontSize = "9pt";windowTopBgDiv.style.cursor = "default";windowTopBgDiv.style.border = "1px solid " topDivBorderColor; windowTopBgDiv.attachEvent("onmousedown",function(){if(windowTopBgDiv.style.zIndex!=index){index = index 2;var idx = index;windowTopBgDiv.style.zIndex=idx;}});// 弹出窗口头部框体var windowTopDiv = document.createElement("div");windowTopDiv.setAttribute('id','windowTop' this.id);windowTopDiv.style.position = "absolute";windowTopDiv.style.background = topDivBgColor;//"white";windowTopDiv.style.color = titleFontColor;windowTopDiv.style.cursor = "move";windowTopDiv.style.height = 20;windowTopDiv.style.width = this.width-2*2;//开始拖动;windowTopDiv.attachEvent("onmousedown",function(){if(event.button==1){//锁定标题栏;windowTopDiv.setCapture();//定义对象;var win = windowTopDiv.parentNode;//记录鼠标和层位置;x0 = event.clientX;y0 = event.clientY;x1 = parseInt(win.style.left);y1 = parseInt(win.style.top);//记录颜色;//topDivBgColor = windowTopDiv.style.backgroundColor;//改变风格;//windowTopDiv.style.backgroundColor = topDivBorderColor;win.style.borderColor = topDivBorderColor;moveable = true;}});//停止拖动windowTopDiv.attachEvent("onmouseup",function(){if(moveable){var win = windowTopDiv.parentNode;win.style.borderColor = topDivBgColor;windowTopDiv.style.backgroundColor = topDivBgColor;windowTopDiv.releaseCapture();moveable = false;}});// 开始拖动windowTopDiv.attachEvent("onmousemove",function(){if(moveable){var win = windowTopDiv.parentNode;win.style.left = x1 event.clientX - x0;win.style.top = y1 event.clientY - y0;}});// 双击弹出窗口windowTopDiv.attachEvent("ondblclick",function(){maxOrMinPopupDiv(windowTopOperateSpan,windowContentDiv);});//增加一个弹出窗口标题的显示var windowTopTitleSpan = document.createElement("span");windowTopTitleSpan.setAttribute('id','windowTopTitle' this.id);windowTopTitleSpan.style.width = this.width-2*12-4;windowTopTitleSpan.style.paddingLeft = "3px";windowTopTitleSpan.innerHTML = this.title;//增加一个弹出窗口最小化，最大化的操作var windowTopOperateSpan = document.createElement("span");windowTopOperateSpan.setAttribute('id','windowTopOperate' this.id); windowTopOperateSpan.style.width = 12;windowTopOperateSpan.style.borderWidth = "0px";windowTopOperateSpan.style.color = titleFontColor;//"white";windowTopOperateSpan.style.fontFamily = "webdings";windowTopOperateSpan.style.cursor = "default";windowTopOperateSpan.innerHTML = "0";//最大化或者最小化弹出窗口操作windowTopOperateSpan.attachEvent("onclick",function(){maxOrMinPopupDiv(windowTopOperateSpan,windowContentDiv);});//增加一个弹出窗口关闭的操作var windowTopCloseSpan = document.createElement("span");windowTopCloseSpan.setAttribute('id','windowTopClose' this.id); windowTopCloseSpan.style.width = 12;windowTopCloseSpan.style.borderWidth = "0px";windowTopCloseSpan.style.color = titleFontColor;//"white";windowTopCloseSpan.style.fontFamily = "webdings";windowTopCloseSpan.style.cursor = "default";windowTopCloseSpan.innerHTML = "r";// 关闭窗口windowTopCloseSpan.attachEvent("onclick",function(){windowTopDiv.removeChild(windowTopTitleSpan);windowTopDiv.removeChild(windowTopOperateSpan);windowTopDiv.removeChild(windowTopCloseSpan);windowTopBgDiv.removeChild(windowTopDiv);windowTopBgDiv.removeChild(windowContentDiv);document.body.removeChild(windowTopBgDiv);document.body.removeChild(bgObj);});// 内容var windowContentDiv = document.createElement("div");windowContentDiv.setAttribute('id','windowContent' this.id);windowContentDiv.style.background = contentBgColor;windowContentDiv.style.color = contentFontColor;windowContentDiv.style.cursor = "default";windowContentDiv.style.height = (this.height - 20 - 4);windowContentDiv.style.width = "100%";windowContentDiv.style.position = "relative";windowContentDiv.style.left = 0;windowContentDiv.style.top = 24;windowContentDiv.style.lineHeight = "20px";windowContentDiv.style.fontSize = "10pt";windowContentDiv.style.wordBreak = "break-all";windowContentDiv.style.padding = "3px";windowContentDiv.innerHTML = this.message;//将内容写入到文件中windowTopDiv.appendChild(windowTopTitleSpan);windowTopDiv.appendChild(windowTopOperateSpan);windowTopDiv.appendChild(windowTopCloseSpan);windowTopBgDiv.appendChild(windowTopDiv);windowTopBgDiv.appendChild(windowContentDiv);document.body.appendChild(windowTopBgDiv);}}//最大或者最小化探出窗口function maxOrMinPopupDiv(windowTopOperateSpan,windowContentDiv) {var win = windowTopOperateSpan.parentNode.parentNode;var tit = windowTopOperateSpan.parentNode;var flg = windowContentDiv.style.display=="none";if(flg){win.style.height = parseInt(windowContentDiv.style.height) parseInt(tit.style.height) 2*2;windowContentDiv.style.display = "block";windowTopOperateSpan.innerHTML = "0";}else{win.style.height = parseInt(tit.style.height) 2*2;windowTopOperateSpan.innerHTML = "2";windowContentDiv.style.display = "none";}}//让背景渐渐变暗function showBackground(obj,endInt){if(isIe){obj.filters.alpha.opacity =1;if(obj.filters.alpha.opacity<endInt){setTimeout(function(){this.showBackground(obj,endInt)},5);}}else{var al=parseFloat(obj.style.opacity);al =0.01;obj.style.opacity=al;if(al<(endInt/100)){setTimeout(function(){this.showBackground(obj,endInt)},5);}}}//关闭弹出窗口function closeDivWindow(id){var windowTopTitleSpan = document.getElementById("windowTopTitle" id); var windowTopOperateSpan = document.getElementById("windowTopOperate" id);var windowTopCloseSpan = document.getElementById("windowTopClose" id); var windowTopDiv = document.getElementById("windowTop" id);var windowTopBgDiv = document.getElementById("windowTopBg" id);var windowContentDiv = document.getElementById("windowContent" id); var bgObj = document.getElementById("window" id);windowTopDiv.removeChild(windowTopTitleSpan);windowTopDiv.removeChild(windowTopOperateSpan);windowTopDiv.removeChild(windowTopCloseSpan);windowTopBgDiv.removeChild(windowTopDiv);windowTopBgDiv.removeChild(windowContentDiv);document.body.removeChild(windowTopBgDiv);document.body.removeChild(bgObj);}。
ligerui一个dialog弹div的简单例子
ligerui一个dialog弹div的简单例子原理:• 为啥要弹div,因为iframe这种页面弹窗，多少涉及到内存泄漏，多次弹窗之后浏览器内存占用居高不下• 弹div没啥技术要点，关闭事件是用hide()来隐藏，初始化div隐藏外面多套一层div来控制• 这个例子的保存和删除都没有提交数据库，只是前台grid改写• 弹窗div里面的文本框有用到非空验证• 第二次之后打开dialog用show，避免重复创建liger对象<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ":///TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=":///1999/xhtml" ><head><title></title><link href="../lib/ligerUI1.1.9/skins/aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" /><link href="../lib/ligerUI1.1.9/skins/ligerui-icons.css" rel="stylesheet" type="text/css" /><script src="../lib/jquery/jquery-1.5.2.min.js" type="text/javascript"></script><script src="../lib/ligerUI1.1.9/js/core/base.js" type="text/javascript"></script><script src="../lib/ligerUI1.1.9/js/ligerui.min.js" type="text/javascript"></script><script src="../lib/jquery-validation/jquery.validate.min.js" type="text/javascript"></script><script src="../lib/jquery-validation/jquery.metadata.js" type="text/javascript"></script><script src="../lib/jquery-validation/messages_cn.js" type="text/javascript"></script><script type="text/javascript">//-----------------------全局变量------------------------------var grid=null;var dlgedit=null;var Validator = null;var edittype=null;var rowi=0;$(function () {//--------------------grid定义-------------------------------grid=$("#maingrid").ligerGrid({checkbox: true,rownumbers:true,toolbar: { items: [{ text: '新增',id:'add', icon:'add',click: itemclick}]},columns:[{ display: '编号', name:'AREAID'},{ display: '名称', name:'AREANAME'},{ display: '操作', render:function(r,i) {return '<a href="#" onclick="f_edit(\'modify\','+i+')">编辑</a>';}}],url: "/service/DataHandler.ashx?View=arealist",usePager:false});//--------------------form验证-------------------------------$.metadata.setType("attr", "validate");Validator = $("form").validate({debug: false,errorPlacement: function (l, dom){dom.ligerTip({ content: l.html(), appendIdTo: l});},success: function (l){l.ligerHideTip();}});$("form").ligerForm();$("#pageloading").hide();});//-----------------------------toolbar 按钮事件----------------------------function itemclick(item){if(item.id){switch (item.id)case "add":edittype="add"; f_edit("add",0);return; }}}//--------------------------保存事件，更新grid-------------------------------function f_save(){$("form").append($(".l-dialog"));if (!Validator.form()) return false;if (edittype=="add")grid.addRow({AREAID : $("#txtid").val(),AREANAME: $("#txtname").val()});else{var ss=grid.getRowObj(rowi);grid.updateRow(ss,{AREAID : $("#txtid").val(),AREANAME: $("#txtname").val()});}dlgedit.hide();}//-------------------------弹窗事件---------------------------------function f_edit(type,rowindex){if (type!="add"){$("#txtid").val(grid.getRow(rowindex).AREAID);$("#txtname").val(grid.getRow(rowindex).AREANAME);}else{$("#txtid").val("");$("#txtname").val("");}edittype=type;rowi=rowindex;if (dlgedit==null){dlgedit=$.ligerDialog.open({target:$("#divedit"),buttons: [ { text: '保存', onclick: function (i, d) { f_save(); }},{ text: '关闭', onclick: function (i, d) { $("input").ligerHideTip(); d.hide(); }}]});$(".l-dialog-close").bind('mousedown',function() //dialog右上角的叉{$("input").ligerHideTip();dlgedit.hide();});$(".l-dialog-title").bind('mousedown',function() //移动dialog时,隐藏tip{$("input").ligerHideTip();});}else{dlgedit.show();}}</script></head><body style="padding:20px 20px 20px 20px; overflow:hidden;"><div class="l-loading" style="display:block" id="pageloading" ></div><div style="width:80%;"><h2>这是一个dialog弹div的简单例子(1.1.9)</h2><div style="padding-left:20px"><br /><li>• 为啥要弹div,因为iframe这种页面弹窗，多少涉及到内存泄漏，多次弹窗之后浏览器内存占用居高不下</li> <li>• 弹div没啥技术要点，关闭事件是用hide()来隐藏，初始化div隐藏外面多套一层div来控制</li><li>• 这个例子的保存和删除都没有提交数据库，只是前台grid改写</li><li>• 弹窗div里面的文本框有用到非空验证</li><li>• 第二次之后打开dialog用show，避免重复创建liger对象</li></div><hr /><div id="maingrid"></div></div><form id="form1" name="form1"><div style=" display:none"><div id="divedit">编号<input id="txtid" name="txtid" ltype="text" runat="server" type="text" validate="{required:true}" />名称<input id="txtname" name="txtname" ltype="text" runat="server" type="text" validate="{required:true}" /></div></div></form></body></html>。
js控制div弹出层实现方法
js控制div弹出层实现⽅法本⽂实例讲述了js控制div弹出层实现⽅法。
分享给⼤家供⼤家参考。
具体分析如下：这是个功能很好，且容易调⽤和控制的弹出层。
感兴趣的朋友可以调试运⾏⼀下看看效果如何~O(∩_∩)O~<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>弹出窗⼝(可拖动，背景灰⾊透明)</title><script type="text/javascript"><!--/*FileName:AlertMsg.jstitle:提⽰标题content:提⽰的内容*/document.write("<style type=\"text/css\">*{padding:0; margin:0}.close{float:right;cursor:default}</style>")function $(id){ return document.getElementById(id)}function AlertMsg(title,content){var msgw,msgh,msgbg,msgcolor,bordercolor,titlecolor,titlebg,con;con = "<form><table style='margin:10px 15px 15px 15px; border:0;'><tr><th style='border:0; line-height:22px; padding:3px 0; vertical-align:top;font-weight:bold;'>分类：</th><td style='border:0; line-height:22px; padding:3px 0; vertical-align:top;width:75%;'><inpu //弹出窗⼝设置msgw = 300; //窗⼝宽度msgh = 150; //窗⼝⾼度msgbg = "#FFF"; //内容背景msgcolor = "#000"; //内容颜⾊bordercolor = "#000"; //边框颜⾊titlecolor = "#FFF"; //标题颜⾊titlebg = "#369"; //标题背景//遮罩背景设置var sWidth,sHeight;sWidth = screen.availWidth;sHeight = document.body.scrollHeight;//创建遮罩背景var maskObj = document.createElement("div");maskObj.setAttribute('id','maskdiv');maskObj.style.position = "absolute";maskObj.style.top = "0";maskObj.style.left = "0";maskObj.style.background = "#777";maskObj.style.filter = "Alpha(opacity=30);";maskObj.style.opacity = "0.3";maskObj.style.width = sWidth + "px";maskObj.style.height = sHeight + "px";maskObj.style.zIndex = "10000";document.body.appendChild(maskObj);//创建弹出窗⼝var msgObj = document.createElement("div")msgObj.setAttribute("id","msgdiv");msgObj.style.position ="absolute";msgObj.style.top = (screen.availHeight - msgh) / 4 + "px";msgObj.style.left = (screen.availWidth - msgw) / 2 + "px";msgObj.style.width = msgw + "px";msgObj.style.height = msgh + "px";msgObj.style.fontSize = "12px";msgObj.style.background = msgbg;msgObj.style.border = "1px solid " + bordercolor;msgObj.style.zIndex = "10001";//创建标题var thObj = document.createElement("div");thObj.setAttribute("id","msgth");thObj.className = "DragAble";thObj.style.cursor = "move";thObj.style.padding = "4px 6px";thObj.style.color = titlecolor;thObj.style.background = titlebg;var titleStr = "<a class='close' title='关闭' style='cursor:pointer' onclick='CloseMsg()'>关闭</a>"+"<span>"+ title +"</span>";thObj.innerHTML = titleStr;//创建内容var bodyObj = document.createElement("div");bodyObj.setAttribute("id","msgbody");bodyObj.style.padding = "10px";bodyObj.style.lineHeight = "1.5em";bodyObj.innerHTML = con;var txt = document.createTextNode(content)bodyObj.appendChild(txt);//⽣成窗⼝document.body.appendChild(msgObj);$("msgdiv").appendChild(thObj);$("msgdiv").appendChild(bodyObj);}function CloseMsg(){//移除对象document.body.removeChild($("maskdiv"));$("msgdiv").removeChild($("msgth"));$("msgdiv").removeChild($("msgbody"));document.body.removeChild($("msgdiv"));}//拖动窗⼝var ie = document.all;var nn6 = document.getElementById&&!document.all;var isdrag = false;var y,x;var oDragObj;function moveMouse(e) {if (isdrag) {oDragObj.style.top = (nn6 ? nTY + e.clientY - y : nTY + event.clientY - y)+"px";oDragObj.style.left = (nn6 ? nTX + e.clientX - x : nTX + event.clientX - x)+"px";return false;}}function initDrag(e) {var oDragHandle = nn6 ? e.target : event.srcElement;var topElement = "HTML";while (oDragHandle.tagName != topElement && oDragHandle.className != "DragAble") {oDragHandle = nn6 ? oDragHandle.parentNode : oDragHandle.parentElement;}if (oDragHandle.className=="DragAble") {isdrag = true;oDragObj = oDragHandle.parentNode;nTY = parseInt(oDragObj.style.top);y = nn6 ? e.clientY : event.clientY;nTX = parseInt(oDragObj.style.left);x = nn6 ? e.clientX : event.clientX;document.onmousemove = moveMouse;return false;}}document.onmousedown = initDrag;document.onmouseup = new Function("isdrag=false");//--></script></head><body><table width="600" border="0" cellspacing="0" cellpadding="0"><tr ><td height="100" align="center" ><p><a href="javascript:AlertMsg("温馨提⽰",'')">点我试试!</a></p> </td></tr></table></div></body></html>希望本⽂所述对⼤家的javascript程序设计有所帮助。
div弹出框定位方法
div弹出框定位方法
div弹出框的定位方法有很多种，下面我将介绍几种常用的方法。
1. 绝对定位：通过设置弹出框的position属性为absolute，然后利用top、right、bottom、left属性来控制弹出框的位置。
这种方法需要将弹出框的父级元素的position属性设置为relative，以保证弹出框相对于父级元素进行定位。
2. 相对定位：通过设置弹出框的position属性为relative，然后利用top、right、bottom、left属性来控制弹出框的位置。
相对定位是相对于元素本身的位置进行定位，不会影响其他元素的布局。
3. 固定定位：通过设置弹出框的position属性为fixed，然后利用top、right、bottom、left属性来控制弹出框的位置。
固定定位是相对于浏览器窗口进行定位，
无论页面滚动与否，弹出框都会保持在固定位置。
4. 使用CSS3的flexbox布局：通过将弹出框作为flex容器的一个子元素，利
用flex的属性来控制弹出框在父容器中的位置。
flex布局可以灵活地控制元素的位
置和排列。
5. 使用JavaScript计算位置：通过JavaScript计算得出弹出框的位置，并将其
应用于弹出框的CSS样式中。
这种方法可以根据具体情况灵活地调整弹出框的位置。
以上是几种常用的方法来定位div弹出框。
根据具体需求和使用场景，你可以
选择适合的方法进行定位。
希望对你有帮助！。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
用D I V实现弹出窗口SANY GROUP system office room 【SANYUA16H-SANYHUASANYUA8Q8-用DIV实现弹出窗口.txt你无法改变别人，但你可以改变自己；你无法改变天气，但你可以改变心情；你无法改变生命长度，但你可以拓展它的宽度。
用DIV实现弹出窗口2008-04-08 11:12/** 创建弹出div窗口。
1、接口说明：DivWindow(id,title,width,height,content) 构造函数，创建一个弹出窗口对象参数：id 弹出窗口id；title：弹出窗口标题名称；width：弹出窗口宽度height：弹出窗口高度content：弹出窗口显示内容2、接口说明： closeDivWindow(id) 关闭窗口参数： id 弹出窗口id3、接口说明：setPopupTopTitleFontColor(PopupTopTitleFontColor) 设置弹出窗口标题字体颜色参数：4、接口说明：setPopupTopBgColor(tBgColor) 设置弹出窗口标题背景颜色5、接口说明：setPopupColor(borderColor,bgColor,tFontColor,cBgColor,fColor) 设置弹出窗口风格,包括标题栏的背景，弹出窗口边框颜色，内容窗体背景颜色，内容窗体字体颜色6、接口说明：open()使用方法：var a = new DivWindow("1","窗口测试",580,400,"Welcome to visited my personal website:<br><a href=target=_blank></a><br><ahref=http://www ... </a><br><br>thx!!!=)..."L);a.setPopupTopBgColor("black","blue","white","white","black");a.open();生成的html：<div id='"window" id'></div> 控制背景的div，使背景逐渐变暗<div id='"windowTopBg" id'><div id='"windowTop" id'><span id='"windowTopTitle" id'>title</span><span id='"windowTopOperate" id'>maxORmin</span><span id='"windowTopClose" id'>close</span></div><div id='"windowContent" id'>content</div></div>@author Nieger Dai@date 2007.11.15*/var isIe = (document.all)?true:false;var moveable=false;var topDivBorderColor = "#336699";//提示窗口的边框颜色var topDivBgColor = "#6795B4";//提示窗口的标题的背景颜色var contentBgColor = "white";//内容显示窗口的背景颜色var contentFontColor = "black";//内容显示窗口字体颜色var titleFontColor = "white"; //弹出窗口标题字体颜色var index=10000;//z-index;// 创建弹出窗口，构造函数function DivWindow(id,title,w,h,content){this.id = id;//窗口idthis.zIndex = index 2;this.title = title;//弹出窗口名称this.message = content;//弹出窗口内容this.width = w;//弹出窗口宽度this.height = h;//弹出窗口高度this.left = (document.body.clientWidth) ? (document.body.clientWidth - this.width)/2 : 0;//弹出窗口位置，距屏幕左边的位置this.top = (document.body.clientHeight) ? (document.body.clientHeight - this.height)/2 : 0;//弹出窗口位置，距屏幕上边的位置//this.init = init;//this.init();}//根据构造函数设定初始值，创建弹出窗口DivWindow.prototype = {//设置弹出窗口标题字体颜色setPopupTopTitleFontColor:function(tFontColor){titleFontColor = tFontColor;},//设置弹出窗口标题背景颜色setPopupTopBgColor:function(tBgColor){topDivBgColor = tBgColor;},//设置弹出窗口风格,包括标题栏的背景，弹出窗口边框颜色，内容窗体背景颜色，内容窗体字体颜色setPopupColor:function(borderColor,bgColor,tFontColor,cBgColor,fColor) {topDivBorderColor = borderColor;topDivBgColor = bgColor;titleFontColor = tFontColor;contentBgColor = cBgColor;contentFontColor = fColor;},//打开一个弹出窗口open: function(){var sWidth,sHeight;sWidth=document.body.clientWidth;sHeight=document.body.clientHeight;var bgObj=document.createElement("div");bgObj.setAttribute('id','window' this.id);varstyleStr="top:0px;left:0px;position:absolute;background:#245;width:" sWidth "px;height:" sHeight "px;";styleStr =(isIe)?"filter:alpha(opacity=0);":"opacity:0;";bgObj.style.cssText=styleStr;document.body.appendChild(bgObj);//让背景逐渐变暗showBackground(bgObj,25);// 弹出窗口框体背景容器var windowTopBgDiv = document.createElement("div");windowTopBgDiv.setAttribute('id','windowTopBg' this.id);windowTopBgDiv.style.position = "absolute";windowTopBgDiv.style.zIndex = this.zIndex ;windowTopBgDiv.style.width = this.width ;windowTopBgDiv.style.height = this.height;windowTopBgDiv.style.left = this.left;windowTopBgDiv.style.top = this.top;windowTopBgDiv.style.background = topDivBgColor;windowTopBgDiv.style.fontSize = "9pt";windowTopBgDiv.style.cursor = "default";windowTopBgDiv.style.border = "1px solid " topDivBorderColor; windowTopBgDiv.attachEvent("onmousedown",function(){if(windowTopBgDiv.style.zIndex!=index){index = index 2;var idx = index;windowTopBgDiv.style.zIndex=idx;}});// 弹出窗口头部框体var windowTopDiv = document.createElement("div");windowTopDiv.setAttribute('id','windowTop' this.id);windowTopDiv.style.position = "absolute";windowTopDiv.style.background = topDivBgColor;//"white";windowTopDiv.style.color = titleFontColor;windowTopDiv.style.cursor = "move";windowTopDiv.style.height = 20;windowTopDiv.style.width = this.width-2*2;//开始拖动;windowTopDiv.attachEvent("onmousedown",function(){if(event.button==1){//锁定标题栏;windowTopDiv.setCapture();//定义对象;var win = windowTopDiv.parentNode;//记录鼠标和层位置;x0 = event.clientX;y0 = event.clientY;x1 = parseInt(win.style.left);y1 = parseInt(win.style.top);//记录颜色;//topDivBgColor = windowTopDiv.style.backgroundColor;//改变风格;//windowTopDiv.style.backgroundColor = topDivBorderColor;win.style.borderColor = topDivBorderColor;moveable = true;}});//停止拖动windowTopDiv.attachEvent("onmouseup",function(){if(moveable){var win = windowTopDiv.parentNode;win.style.borderColor = topDivBgColor;windowTopDiv.style.backgroundColor = topDivBgColor;windowTopDiv.releaseCapture();moveable = false;}});// 开始拖动windowTopDiv.attachEvent("onmousemove",function(){if(moveable){var win = windowTopDiv.parentNode;win.style.left = x1 event.clientX - x0;win.style.top = y1 event.clientY - y0;}});// 双击弹出窗口windowTopDiv.attachEvent("ondblclick",function(){maxOrMinPopupDiv(windowTopOperateSpan,windowContentDiv);});//增加一个弹出窗口标题的显示var windowTopTitleSpan = document.createElement("span");windowTopTitleSpan.setAttribute('id','windowTopTitle' this.id);windowTopTitleSpan.style.width = this.width-2*12-4;windowTopTitleSpan.style.paddingLeft = "3px";windowTopTitleSpan.innerHTML = this.title;//增加一个弹出窗口最小化，最大化的操作var windowTopOperateSpan = document.createElement("span");windowTopOperateSpan.setAttribute('id','windowTopOperate' this.id); windowTopOperateSpan.style.width = 12;windowTopOperateSpan.style.borderWidth = "0px";windowTopOperateSpan.style.color = titleFontColor;//"white";windowTopOperateSpan.style.fontFamily = "webdings";windowTopOperateSpan.style.cursor = "default";windowTopOperateSpan.innerHTML = "0";//最大化或者最小化弹出窗口操作windowTopOperateSpan.attachEvent("onclick",function(){maxOrMinPopupDiv(windowTopOperateSpan,windowContentDiv);});//增加一个弹出窗口关闭的操作var windowTopCloseSpan = document.createElement("span");windowTopCloseSpan.setAttribute('id','windowTopClose' this.id); windowTopCloseSpan.style.width = 12;windowTopCloseSpan.style.borderWidth = "0px";windowTopCloseSpan.style.color = titleFontColor;//"white";windowTopCloseSpan.style.fontFamily = "webdings";windowTopCloseSpan.style.cursor = "default";windowTopCloseSpan.innerHTML = "r";// 关闭窗口windowTopCloseSpan.attachEvent("onclick",function(){windowTopDiv.removeChild(windowTopTitleSpan);windowTopDiv.removeChild(windowTopOperateSpan);windowTopDiv.removeChild(windowTopCloseSpan);windowTopBgDiv.removeChild(windowTopDiv);windowTopBgDiv.removeChild(windowContentDiv);document.body.removeChild(windowTopBgDiv);document.body.removeChild(bgObj);});// 内容var windowContentDiv = document.createElement("div");windowContentDiv.setAttribute('id','windowContent' this.id);windowContentDiv.style.background = contentBgColor;windowContentDiv.style.color = contentFontColor;windowContentDiv.style.cursor = "default";windowContentDiv.style.height = (this.height - 20 - 4);windowContentDiv.style.width = "100%";windowContentDiv.style.position = "relative";windowContentDiv.style.left = 0;windowContentDiv.style.top = 24;windowContentDiv.style.lineHeight = "20px";windowContentDiv.style.fontSize = "10pt";windowContentDiv.style.wordBreak = "break-all";windowContentDiv.style.padding = "3px";windowContentDiv.innerHTML = this.message;//将内容写入到文件中windowTopDiv.appendChild(windowTopTitleSpan);windowTopDiv.appendChild(windowTopOperateSpan);windowTopDiv.appendChild(windowTopCloseSpan);windowTopBgDiv.appendChild(windowTopDiv);windowTopBgDiv.appendChild(windowContentDiv);document.body.appendChild(windowTopBgDiv);}}//最大或者最小化探出窗口function maxOrMinPopupDiv(windowTopOperateSpan,windowContentDiv) {var win = windowTopOperateSpan.parentNode.parentNode;var tit = windowTopOperateSpan.parentNode;var flg = windowContentDiv.style.display=="none";if(flg){win.style.height = parseInt(windowContentDiv.style.height) parseInt(tit.style.height) 2*2;windowContentDiv.style.display = "block";windowTopOperateSpan.innerHTML = "0";}else{win.style.height = parseInt(tit.style.height) 2*2;windowTopOperateSpan.innerHTML = "2";windowContentDiv.style.display = "none";}}//让背景渐渐变暗function showBackground(obj,endInt){if(isIe){obj.filters.alpha.opacity =1;if(obj.filters.alpha.opacity<endInt){setTimeout(function(){this.showBackground(obj,endInt)},5);}}else{var al=parseFloat(obj.style.opacity);al =0.01;obj.style.opacity=al;if(al<(endInt/100)){setTimeout(function(){this.showBackground(obj,endInt)},5);}}}//关闭弹出窗口function closeDivWindow(id){var windowTopTitleSpan = document.getElementById("windowTopTitle" id); var windowTopOperateSpan = document.getElementById("windowTopOperate" id);var windowTopCloseSpan = document.getElementById("windowTopClose" id); var windowTopDiv = document.getElementById("windowTop" id);var windowTopBgDiv = document.getElementById("windowTopBg" id);var windowContentDiv = document.getElementById("windowContent" id); var bgObj = document.getElementById("window" id);windowTopDiv.removeChild(windowTopTitleSpan);windowTopDiv.removeChild(windowTopOperateSpan);windowTopDiv.removeChild(windowTopCloseSpan);windowTopBgDiv.removeChild(windowTopDiv);windowTopBgDiv.removeChild(windowContentDiv);document.body.removeChild(windowTopBgDiv);document.body.removeChild(bgObj);}。