jquery ui dialog弹出div层对话框
jquery ui全教程之一(dialog的使用教程)
jQuery UI目前的版本已经更新到了1.8.7。
个人感觉和easyui相比起来，jQuery UI在界面的美观程度和可定制型更强一些。
所以再次将一些jQuery UI组件的用法说明一下，方便日后查阅。
也方面没接触jQuery UI的人能早日使用jQuery UI套件(一)首先来说jQuery UI使用频率较高dialog组件：dialog就是我们常说的弹出层，应用还是比较广泛的，比如：可以使用弹出层做登录、注册和消息提示等功能下面来详细说说dialog的使用方法在官方提供的官方文档和示例中有六种形式的dialog,但是前五种都是大同小异，包括在编写代码方面也仅仅是多设置两个属性而已，没什么太大的不同，先来看看使用jQuery UI组件的时候需要那些前期贮备工作。
首先将需要依赖的js文件导入到你的页面中。
需要依赖的文件如下：jquery-ui-1.8.7.custom.css这个是jQuery UI套件的CSS样式表，demos.css这个是jQuery UIdemo中用到的CSS样式，因为我用到了这些样式所以将它导入进来，如果大家不需要可以不导这个文件，jquery-1.4.4.min.js这个不用说了吧，jQuery的核心文件，没有它一切工作都无法开展。
切记一点：一定要在引入其他的js文件之前引入jquery-1.4.4.min.js文件，别问为什么，懂点jQuery的人都能想的到。
jquery-ui-1.8.7.custom.min.js这个是jQueryUI的核心js文件，也是必须的。
有了上述的引用后就可以在你的页面中使用jQuery UI了。
先看一个超级简单的DEMO：<div id="dialog" title="basic dialog"><p>这是一个采用默认样式的对话框</p></div>在页面中加入上边的一行代码，然后加入一个script标签对，在脚本写如下代码：$(function(){$("#dialog").dialog();});打开你的页面看一下吧，如果没什么意外你会看到一个类似这样的对话框简单吧，这就是一个弹出层，其中div的title被当作了dialog的title,右上角有关闭的xx，右下角则可以拖拽改变大小这就是一个默认的dialog，虽然我们没有为它指定高度和宽度，但是它有默认的值，在我们没有设定情况下dialog默认会弹出在屏幕的中央，大小也是有默认值的，可以改变大小，显示关闭按钮，这都是默认的样式，那么如果我们想自己定制一下dialog，不想让他这样显示该如何做？下面介绍一些属性和方法来改变一下这个dialog，用到的属性如下：autoOpen,modal,buttons，根据这些属性我们来定制一个不会自动打开(当点击按钮或者通过其他的事件来触发弹出dialog的事件)，并且带有遮罩(模式窗体)和按钮的dialogbuttons属性是一个复合属性，使用形式如下：buttons{ok:function(){点击按钮执行的事件},cancel:function(){点击按钮执行的事件}}其中ok是按钮显示的文本，而function是点击按钮后执行的事件。
实现了弹出DIV对话框
实现了弹出DIV对话框实现了弹出DIV对话框[原]关于弹出DIV对话框，网上已经有许多代码可提供参考。
愚认为，许多代码具有以下两个缺点。
其一、代码都是通过DOM来实现的，很难对它进行修改以适应自己应用。
其二、这些弹出的DIV大多注重如何实现弹出的对话框，但并没有强调与页面的交互。
下面实现的弹出DIV对话框，代码简单，同时它通过向网页注册回调方法的，使得与页面的交互非常方便。
布局假设假设页面的布局如下，Content页面放面main.html下面的一个iframe里面。
Divdlg.js 由main.html加载。
这个布局可以使得js文件不必要在每次请求都需要加载，提高了速度。
但是，如果页面不是这样的布局，同样可以工作。
对话框实现原理实现图如下。
整个对话框显示子系统由半透明的遮罩层，对话框层，iframe页面容器，和对话框内容页面组成。
显示对话框：显示遮罩层和对话框层，并在iframe中加载对话框内容页面。
隐藏对话框：隐藏遮罩层和对话框层。
代码实现：接口对话框参数配置结构包括内容页面的URL，标题，高宽等一些定制。
此外，还包括一个回调函数用来与页面交互。
//// 对话框配置类的定义//var cfgClass = function(sUrl, sTitle, callBack, nDlgWidth, nDlgHeight){this.url = sUrl;this.title = sTitle;this.width = nDlgWidth;this.height = nDlgHeight;this.callBack = callBack;}方法createDlg：创建对话框openDialog：打开对话框hideDialog：关闭对话框onDialogCallBack：回调事件定义////生成对话框html//function createDlg() {// 遮罩层document.write('document.write(' \n');document.write('。
jquery实现点击弹出对话框
jquery实现点击弹出对话框HTML<div class="dialog" id="delallpartdialog"><div class="title"><img alt="点击可以关闭" src="/static/images/disk.png" width="30px" height="30px;">确认提⽰</div><div class="content"><span>你真的要删除所有分区吗？</span></div><div class="bottom"><input type="button" value="确定" class="btnok"><input type="button" value="取消" class="btnnoOk"></div></div>CSS.dialog{width:360px;border:1px #666 solid;position:absolute;display:none;z-index:101;}.dialog .title {background: #333;padding:10px; color: #fff; font-weight: bold; }.dialog .content {background: #fff;padding:25px;height: 60px;}.dialog .content img {float: left;}.dialog .content span {float: left;padding:10px;}.dialog .bottom {text-align: right;padding:10px 10px 10px 0px;background: #eee;}.dialog .btn {border: #666 1px solid;width:65px;}JQuery$(".delallpart").on("click",function () {$.ajax({url:"/osd/opt/delallpart",type: "POST",datatype:'json',data: {"action":"del_all","del_mount":"2"},beforeSend: function (xhr, settings) {xhr.setRequestHeader("X-CSRFToken", getCookie2('csrftoken'));},success: function (arg) {var div = $("#delallpartdialog");div.css("display", "block");div.css("left", 500).css("top", 500);}});});$(".dialog").on("click",".btnnoOk", function () {alert("not ok");$(this).parents(".dialog").css("display", "none");});$("#delallpartdialog").on("click",".btnok", function () {alert("ok!");});。
jQuery Dialog对话框事件用法实例分析
jQuery Dialog对话框事件用法实例分析这篇文章主要介绍了jQuery Dialog对话框事件用法,结合实例形式分析了Dialog对话框实现的静态提示类对话框、动态提示类对话框以及遮罩类对话框的概念、使用方法与相关注意事项,需要的朋友可以参考下本文实例讲述了jQuery Dialog对话框事件用法。
分享给大家供大家参考，具体如下：Dialog对话框事件对话框应用场景对话框是最常用、最实用的功能。
1）静态提示类对话框，对话框的内容是固定的2）动态提示类对话框，对话框内容是根据事件源变化的3）遮罩类对话框，对话框弹出时背景变灰并且不可选使用jQuery UI的Dialog 组件可以轻松实现上面三种效果Dialog组件的主要特点是可以拖动（Draggable），可以改变大小（Resizable）。
Dialog对话框的使用也十分简单，选中了一个元素后，可以通过对这个元素使用".dialog "让其变成一个对话框，通过传递各种options属性类修改对话框的各种行为。
通常一个对话框是一个div元素：弹出层下面的语句将使用默认的options属性生成一个对话框。
jQuery("#divTip").dialog ;执行完上面的语句后，这个div元素变成了一个可以拖动、可以拉伸的对话框。
当然这只是最简单的应用。
下面通过一个完整的实例来快速上手dialog对话框组件。
使用Dialog控件实现三种具体的弹出框。
一种是静态弹出层，即弹出层的内容是固定的。
一种是动态弹出层，即弹出层的内容根据事件的触发者而不同。
另外一种是常见的遮罩类弹出层，即弹出层显示后，页面上除了弹出层以外的元素都不能操作。
首先看一下页面上的几个元素的HTML片段。
Demo.共享同一个静态弹出层，弹出层内容固定：显示提示显示提示显示提示显示提示Demo.每个弹出层内容不同，弹出层内容存在事件源的元素属性中：红色绿色Demo.弹出IFrame元素页面上显示的元素，用来触发显示弹出层的事件。
弹出一个DIV层窗口
弹出一个DIV层窗口<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>点击按钮弹出一个DIV层窗口</title><script type="text/javascript" src="jquery/jquery-1.11.1.min.js"></script><script type="text/javascript">$(function(){$("#imya").click(function(){alert("显示层窗口示例程序");$("#fade").show();$("#light").show();});});$(function(){$("#uduf").click(function(){alert("关闭层窗口");$("#fade").hide();$("#light").hide();});});</script><style>.black_overlay{display: none;position: absolute;top: 0%; <!-设置top、left、width、height使其在全窗口显示>left: 0%;width: 100%;height: 100%;background-color: black;z-index:1001;-moz-opacity: 0.8;opacity:0.5; <!-透明度，设置其值，可以看到层下的内容>filter: alpha(opacity=88);}.white_content {display: none;position: absolute;top: 25%; <!-调整top、left、width、height的比例，使其在中央显示>left: 25%;width: 50%;height: 50%;padding: 10px;border: 1px solid red;background-color: white;z-index:1002; <!-数字大的显示在前面>overflow: auto;}</style></head><body><h2>这是一个层窗口示例程序. </h2><div id="yz"><button id="imya">点击我测试一下</button></div><div id="fade" class="black_overlay"></div><div id="light" class="white_content"><h2>层窗口</h2><button id="uduf">关闭层窗口</button></div></body></html>。
jquery ui dialog弹出div层对话框
jquery ui弹出div层对话框.以下是完整代码，保存到html文件，打开也可以预览效果：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><title>jquery ui弹出div层对话框--柯乐义</title><link rel="stylesheet"href="/keleyi/pmedia/jquery/ui/1.10.3/css/smoothness/jquery-ui.min.css"/><script type="text/javascript"src="/keleyi/pmedia/jquery-1.9.1.min.js"></script><script src="/keleyi/pmedia/jquery/ui/1.10.3/js/jquery-ui-1.10.3.min.js"type="text/javascript"></script><script type="text/javascript">function keleyidialog() {$("#dialog").dialog();}</script><style type="text/css">#dialog{display:none;}</style></head><body><div style="width:338px;height:100px;margin:10px auto;"><input type="button"onclick="keleyidialog()" value="点击我"/><a href="/a/bjac/5939d3b2c920ff6d.htm" target="_blank">原文</a><ahref="/keleyi/phtml/jui/dialog/1.htm">无动画</a><ahref="/keleyi/phtml/jui/dialog/2.htm">动画</a><a href="/keleyi/phtml/jui/dialog/3.htm">redmond</a><a href="/keleyi/phtml/jui/dialog/4.htm">sunny</a><br />点击按钮弹出对话框</div><div id="dialog" title="div层对话框"><p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p><p>柯乐义：这是一个弹出div层对话框，可用于显示信息。
jquery弹出框的用法示例（一）
jquery弹出框的⽤法⽰例（⼀）最近做⼀个项⽬，许多功能都是关于弹出框的，以前觉得弹出框就那⼀种，很容易实现，但是最近真的做起这个功能了，发现会有好多⾃⼰考虑不到的问题。
⽐如关于⼀些添加，删除，修改的弹出框，当添加⼀些⽤户的时候，弹出框⾥要提交⼀些关于⽤户的信息，设置密码等信息，当修改的时候，根据⽤户的名字和id号来修改密码等等。
例⼦如下：复制代码代码如下:<ul class="tabPanel clearfix"><li class="hover"><a href="" class="close"></a><div class="panelBox"><dl><dt id="dt1" contentid=".pwdTips">蓝枫前端</dt><dd>添加询盘【<a href="">10</a>】</dd><dd>跟踪询盘【<a href="">1000</a>】</dd></dl></div></li><li><a href="" class="close"></a><div class="panelBox"><dl><dt id="dt2" contentid=".pwdTips">蓝枫前端</dt><dd>添加询盘【<a href="">10</a>】</dd><dd>跟踪询盘【<a href="">1000</a>】</dd></dl></div></li><li><a href="" class="close"></a><div class="panelBox"><dl><dt id="dt3" contentid=".pwdTips">蓝枫前端</dt><dd>添加询盘【<a href="">10</a>】</dd><dd>跟踪询盘【<a href="">1000</a>】</dd></dl></div></li><li><a href="" class="close"></a><div class="panelBox"><dl><dt contentid=".pwdTips">蓝枫前端</dt><dd>添加询盘【<a href="">10</a>】</dd><dd>跟踪询盘【<a href="">1000</a>】</dd></dl></div></li><li><a href="" class="close"></a><div class="panelBox"><dl><dt id="" contentid=".pwdTips">蓝枫前端</dt><dd>添加询盘【<a href="">10</a>】</dd><dd>跟踪询盘【<a href="">1000</a>】</dd></dl></div></li><li><div class="panelBox addpanelBox"><a class="addPanelBtn" contentid="div#pwdRest">添加</a></div></li></ul>弹出框内容：复制代码代码如下:<div class="pwdTips" style="display:none;" id="pwdRest"><a class="closeBtn" href="javascript:;"></a><div class="traDBox"><div class="row" id="userName"><div class="label" >⽤户名：</div><div class="cell"><input type="text" class="text" id="name" name="" value=""></div></div><div class="row"><div class="label" >营销客服：</div><div class="cell"><input type="text" class="text" id="opename" name="" value=""></div> <input type="hidden" name="" id="onLineId"/></div><div class="row"><div class="label">登录密码：</div><div class="cell"><input type="text" class="text" id="" name="" value=""></div></div><div class="row"><div class="label">确认密码：</div><div class="cell"><input type="text" class="text" id="" name="" value=""></div></div><div class="row"><div class="dialogBtn"><button type="submit" class="diaSmtBtn">确认</button><button type="button" class="diaSmtRst">取消</button></div></div></div></div>实现的弹出框的js复制代码代码如下:$(function(){var $window = $(window),$doc = $(document),$body = $('body');//关于管理员添加删除的js代码var tabLi=$(".tabPanel").find("li");tabLi.hover(function(){$(this).addClass("hover").siblings().removeClass("hover");},function(){})/*弹出框定位*/$(window).scroll(function() {var pwdTips =$(".pwdTips");var height=pwdTips.height();var width=pwdTips.width();var bodyHieght=$(window).height() ;var bodyWidth=$(window).width() ;if(!pwdTips.is(":hidden")){pwdTips.css({position: "fixed",top: (bodyHieght-height)/2,left:(bodyWidth-width)/2});}});/*弹出框定位结束*//*弹出框半透明背景的设置*/var bgShadow = function(zindex) {zindex = zindex?zindex:999;var _bg = $('div.pwdTipsBg'),bg_html = '<div class="pwdTipsBg"></div>';if(_bg.length === 0) {_bg = $(bg_html);}$body.append(_bg);_bg.css({position : 'absolute',top : '0px',left : '0px',width : $window.scrollLeft()+$window.width()+'px', height : $doc.height(),'z-index' : zindex});return _bg;};/*弹出框半透明背景的设置*//*绑定事件*/var bindClick = function(obj,handlerEvent){obj.bind("click",function(e){e.preventDefault();bgShadow(1001);var select=$(this).attr('contentid');var onLineId=$(this).attr('id');var pwdTips=$(select);if(handlerEvent!=null){handlerEvent($(this));}pwdTips.show();pwdTips.find(".closeBtn,.diaSmtRst").click(function(){ pwdTips.hide();var _bg = $('div.pwdTipsBg');_bg.remove();});pwdTips.find('#onLineId').val(onLineId);});};var show=tabLi.find("dt"),addPanelBtn=$(".addPanelBtn"),clickBtn=$(".clickBtn");var setValue= function(obj){if($(obj).is('.addPanelBtn')){$('#opename').attr('value',"");$('#pwdRest').find('#userName').show();}else{$('#pwdRest').find('#userName').hide();$('#opename').attr('value',obj.text());$("input.shareId").attr('value',obj.attr('id'))}}$(function(){bindClick(show,setValue);bindClick(addPanelBtn,setValue);bindClick(clickBtn,setValue);});})所有的弹出内容根据情况做判断显⽰，获取相应的值，先根据触发的类型判断是修改密码或者添加⽤户客服，然后再显⽰相应的弹出内容。
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>。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
jquery ui dialog弹出div层对话框
以下是完整代码，保存到html文件，打开也可以预览效果：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html
xmlns="/1999/xhtml"><head><title>jquery ui弹出div层对话框--柯乐义</title><link rel="stylesheet"
href="/keleyi/pmedia/jquery/ui/1.10.3/css/smoothness/jquery
-ui.min.css"/><script type="text/javascript"
src="/keleyi/pmedia/jquery-1.9.1.min.js"></script><script
src="/keleyi/pmedia/jquery/ui/1.10.3/js/jquery-ui-1.10.3.mi n.js"type="text/javascript"></script><script type="text/javascript">function keleyidialog() {
$("#dialog").dialog();
}</script><style type="text/css">#dialog{display:none;}</style></head><body> <div style="width:338px;height:100px;margin:10px auto;"><input type="button" onclick="keleyidialog()" value="点击我"/><a
href="/a/bjac/5939d3b2c920ff6d.htm" target="_blank">原文</a> <a href="/keleyi/phtml/jui/dialog/1.htm">无动画</a><a
href="/keleyi/phtml/jui/dialog/2.htm">动画</a><a
href="/keleyi/phtml/jui/dialog/3.htm">redmond</a><a
href="/keleyi/phtml/jui/dialog/4.htm">sunny</a><br />点击按钮弹出对话框</div><div id="dialog"title="div层对话框"><p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p><p>柯乐义：这是一个弹出div层对话框，可用于显示信息。
可以拖动和关闭这个弹出层，还可以改变它的大小。
</p></div></body></html>。