jquery ui弹出div层对话框,效果预览:http://keleyi.com/keleyi/phtml/jui/dialog/index.htm
以下是完整代码,保存到html文件,打开也可以预览效果:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jquery ui弹出div层对话框--柯乐义</title> <link rel="stylesheet" href="http://keleyi.com/keleyi/pmedia/jquery/ui/1.10.3/css/smoothness/jquery-ui.min.css" /> <script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery-1.9.1.min.js"></script> <script src="http://keleyi.com/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="http://keleyi.com/a/bjac/5939d3b2c920ff6d.htm" target="_blank">原文</a> <a href="http://keleyi.com/keleyi/phtml/jui/dialog/1.htm">无动画</a> <a href="http://keleyi.com/keleyi/phtml/jui/dialog/2.htm">动画</a> <a href="http://keleyi.com/keleyi/phtml/jui/dialog/3.htm">redmond</a> <a href="http://keleyi.com/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>
还有多种样式可供选择,例如eggplant或者vader等。只需将上面代码中的smoothness换掉就eggplant、sunny、redmond或者vader可以了。例如vader:http://keleyi.com/keleyi/phtml/jui/dialog/2.htm
sunny:http://keleyi.com/keleyi/phtml/jui/dialog/4.htm
jquery ui的dialog方法,有着很强大的功能,比如把上面代码中的keleyidialog函数换成以下代码则有不同效果:http://keleyi.com/keleyi/phtml/jui/dialog/1.htm
代码:
function keleyidialog() { $("#dialog").dialog({ resizable: false, height: 240, width: 400, modal: true, buttons: { "确定": function () { window.location.href = "http://keleyi.com"; }, "取消": function () { $(this).dialog("close"); } } }); }
参数:
resizable:是否能够改变对话框的大小(true、false)
height: 对话框的高度(240)
width: 对话框宽度(400)
modal: 是否有遮罩层(true,false),如果为ture,则弹出对话框时,网页中除了弹出的对话框纸袋,其他元素都被遮罩层盖住,无法操作
buttons:在对话框上显示按钮,点击按钮会执行相应方法。
参考:http://keleyi.com/a/bjac/5aed2303707e30fa.htm
相关推荐
两个版本:一个替换ui close按钮,对三个按钮设立同样css;一个不替换,修改ui的css文件;完美打开多个对话框,并可以分别控制最大最小关闭。jquery文件没有包含进来。
里面是经过修改的jquery.ui.dialog.js(版本jQuery UI Dialog 1.8.12),添加了parentElement: 'body',详情查看http://forum.jquery.com/topic/dialog-will-move-its-div-tag-to-body
我们可以看到,我对pop这个div,实现的方式是让它不要autoopen,点击的时候,我只要一句dialog,open就搞定了,借助于jquery ui,我们做弹窗就是这么简单。。。当然了,大家可以看到,我还有一个插入数据的功能,这...
本文实例讲述了jquery实现仿JqueryUi可拖动的DIV。分享给大家供大家参考。具体如下: 这是用Jquery写的代码,仿JQUERYUI的Draggable或者是Dialog,希望大家喜欢,写的一个小东西。参考了下网上的其他人写的类似代码,...
本文实例讲述了jquery ui dialog替代confirm的方法。分享给大家供大家参考,具体如下: js的confirm,有的浏览器会直接屏蔽掉,导致功能无法使用,推荐使用jquery ui 的dialog功能,完美替换confirm功能 1、html代码...
解决办法相当不科学~ 我的解决办法,个人感觉好过那个,因为我只隐藏横的滚动条,呵呵 附上修改的代码: 修改:jquery.ui.dialog.js 代码如下: var $el = (this.oldInstances.pop() || $(‘<div></div>’).addClass(‘ui-...
一款支持拖拽的jQuery层弹出窗口(TipsWindown1.0版本)下载 10.分享一款jquery Ajax弹出对话框插件SimpleModal 11.下载jQuery对话框Dialog弹出层插件演示与使用说明 12.实用jQuery漂亮浮动层插件,精美Dialog...
通过jQuery 实现弹出层,区别于jQuery.ui.dialog
button value=”点击弹出树的dialog对话框” onclick =”getTree()”/> <div id=”ztree” class=”ztree”/> </body> [removed] function getTree(){ var url = “’xx.html’/>”; var setting={
废话不多说了,直接给大家贴jquery dialog取消右上角删除按钮的代码了。 具体代码如下所示: $("#div1").dialog({ closeOnEscape:false, open:function(event,ui){$(".ui-dialog-titlebar-close").hide();} }); ...
popupDiv 弹出层插件1 virtual-tour 图片旅游,全景漫游效果 Fancybox 图片浏览特效1 formValidator 表单验证 jqueryplayer 音乐播放器 lightbox 图片浏览特效2 imagebox 图片展示特效3 tooltip 弹出层插件2 ...
这段代码通过jQuery UI自定义了一个confirm的确认对话框效果,通过html代码自定义对话框的显示界面和外观,可以自定义confirm框的按钮,本例中定义了一个confirm确认按钮和一个cancel取消按钮。 html代码 <...
再用到 dialog弹出框时,不想要右... 不希望用户通过jquery dialog 提供的x按钮关闭弹出框,这种方法的作用就是除非我提供了关闭按钮,不然是没办法关掉这个对话框的。 2、dialog 中 添加 dialogClass:”no-close” —
最近一直都在用easyui前端框架来开发设计UI,但在使用Dialog时,发现如果页面内容比较多,就会出现问题,首先看一下我的原代码: 代码如下: <input type=”button” value=”确认预约” id=”btnconfirm” ...
Struts2 jQuery Plugin是Struts2框架的一个插件,它为Struts2提供了Ajax支持和基于jQuery框架的一些常用Web UI控件。包括:Ajax Link、Ajax Forms、Ajax Div、Tabs、Datepicker、Dialog、Accordion、Autocompleter、...
设计的样式是这样的,点击父页面(页面宽度设置为100%)上的一个按钮整个页面往右侧移动页面比例为原来的50%,左侧弹出一个dialog页面,占整个页面的50%,结果dialog和原页面不在一个层上,dialog直接弹出的,并不在...