<!doctype html> <html> <head> <meta charset="utf-8"> <title>jquery ui 对话框</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <link href="../css/ui-lightness/jquery-ui-1.9.2.custom.css" rel="stylesheet"/> <script src="../js/jquery-ui-1.9.2.custom.js"></script> <!--自定义弹窗样式--> <style type="text/css"> .ui-dialog{ /**background-color: red;*/ } /*弹出层头部样式*/ .ui-widget-header{ background: rgba(157, 195, 159, 0.79);/*标题栏背景颜色*/ border: 0px solid #e78f08;/**/ color: #ffffff;/*标题颜色*/ } .ui-button-text-only .ui-button-text{ padding: 0.2em 3em; } </style> <script> $(function() { $( "#dialog" ).dialog({ autoOpen:true,//是否自动打开,如果是false $( "#dialog" ).dialog('open')需要用该方法打开 width:490, height:300, closeText:'关闭',//关闭按钮显示文字 title:'弹出确定框',//对话框标题 resizable:false, //对话框尺寸是否可变 draggable:false,//是否可以用标题头进行拖动 buttons:{"确定":function(){ok()} ,"取消":function(){$(this).dialog("close");},"重置":function(){alert("重置")}},//如果单击确定,触发ok()函数 position: ["center", "center"], //position: [100, 100]默认显示位置 hide:'fade',//对话框关闭的效果‘blind’向上卷起,'bounce'跳动,'clip'两边向中间折叠,'drop'向左淡出,'explode'爆炸,四分五裂,'fade'淡入淡出,'fold'折叠,'highlight'高亮显示 show:'fade',//对话框打开效果'pulsate'有规律的跳动,'puff'由大到小渐入 'scale'由小变大,'shake'摇动,'slide'滑动,overlay modal:false,//是否显示遮罩层 open:function(){},//打开触发事件 close:function(){}//关闭触发事件 }); function ok(){ alert("你单击了确定按钮"); } }); </script> </head> <body> <div id="dialog" title="" style="display:none"> <p>比特币中国比特币中国比特币中国</p> <p>比特币中国比特币中国比特币中国</p> <p>比特币中国比特币中国比特币中国</p> <p>比特币中国比特币中国比特币中国</p> <p>比特币中国比特币中国比特币中国</p> <p>比特币中国比特币中国比特币中国</p> <p>比特币中国比特币中国比特币中国</p> <p>比特币中国比特币中国比特币中国</p> <p>比特币中国比特币中国比特币中国</p> <p>比特币中国比特币中国比特币中国</p> <p>比特币中国比特币中国比特币中国</p> <p>比特币中国比特币中国比特币中国</p> </div> </body> </html>
相关推荐
一个小的网站等待效果的例子,jquery做的,jquery的dialog,这里有div的z-index控制着div层的重叠顺序
两个版本:一个替换ui close按钮,对三个按钮设立同样css;一个不替换,修改ui的css文件;完美打开多个对话框,并可以分别控制最大最小关闭。jquery文件没有包含进来。
NULL 博文链接:https://taotie119.iteye.com/blog/2075536
Jquery UI dialog 详解 (弹出层) 包含jquery弹出层的详细介绍,以及代码用例
JQuery UI 的对话框的一些属性的用法
选项说明:http://docs.jquery.com/UI/Dialog/dialog#options 选项实例:http://dev.jquery.com/view/trunk/plugins/ui/tests/dialog.html 2.3 sliders 滑动条 所需要的文件 jquery.dimensions.js ui.mouse.js ...
jQuery UI dialog IE6下处理select框被遮挡jquery.bgiframe.js
jQuery UI dialog 的使用 准备 jQuery 环境 首先,我们创建一个按钮,点击这个按钮的时候,将会弹出一个对话框。 详情内容可以参考文档
NULL 博文链接:https://wufan0023.iteye.com/blog/1446334
jquery 弹出窗口插件,包含js中的 alert confirm open 等。
里面是经过修改的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
添加按钮弹出层jqueryui实现,dialog
jQuery通用dialog对话框 popup提示信息窗口插件demo
jquery_dialogjquery_dialogjquery_dialogjquery_dialogjquery_dialogjquery_dialogjquery_dialog
jQuery_UI全教程之一_dialog以及Datepicker使用说明 jQuery UI全教程之一(dialog的使用教程) 2011-03-15 17:41 jQuery UI目前的版本已经更新到了1.8.7。个人感觉和easyui相比起来,jQuery UI在界面的美观程度和可...
最近在用一个JQUERY UI Dialog的插件,感觉特别强大,但样式设置比较麻烦,研究了俩天终于搞定了。 运行插件,需要的环境如下 [removed][removed] [removed][removed] <link href=”CSS/themes/redmond/jquery.ui...
JQuery UI Dialog 弹出框以及清楚数据
今天我们用jquery ui dialog来做一个弹窗特效。我们先看下效果截图: 我们可以看到,点击的时候,弹窗出现,而且这个弹窗是居中的,还是可以拖动的。。。实现这一切,只要以下代码: 我们可以看到,我对pop这个...
jQuery UI Cookbook(2013.7) Adam Boduch (pdf + ePub) 出版时间:2013.7 Adam Boduch Packt 内容简介: jQuery UI is the quintessential framework for creating professional user interfaces. While jQuery ...
jQuery UI 是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库。包含底层用户交互、动画、特效和可更换主题的可视控件。我们可以直接用它来构建具有很好交互性的web应用程序。 编辑本段组件构成 jQuery UI ...