使用jQuery ui 要有的东西：1、ui的css教程文件，2、jQuery框架文件，3、封装好的ui js 文件
这些文件到jquery官网都有得下http://jquery.com/ 。
首先把上面三个添加到页面中，注意jquery文件要先于ui 的js引用
页面代码：
<!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 runat="server"> <title>jQuery Ui Dialog Demo</title> <style type="text/css"> *{margin:0; padding:0;} body{font-size:12px;} p{padding:3px;} #dialog_normal,#dialog_modal{display:none;} </style> <link href="css/redmond/jquery-ui-1.8.14.custom.css" rel="Stylesheet" /> <script type="text/网页特效" src="js/jquery-1.6.2.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.8.14.custom.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ //普通Dialog按钮单击事件 $("#btnNormalDialog").click(function(){ $("#dialog_normal").dialog({ height:100, width:200, resizable:false }); });
//模态Dialog按钮单击事件 $("#btnModalDialog").click(function(){ $("#dialog_modal").dialog({ height:200, width:400, resizable:false, modal:true, //这里就是控制弹出为模态 buttons:{"确定":function(){$(this).dialog("close");}} //这里的主要用意是添加了一个确定按钮，关闭该弹出层 }); });
$("#btnIframeDialog").click(function(){ $("<iframe id='test' width='100%' height='100%' frameborder='0' title='弹出一个Iframe窗口测试' src='Test.asp教程x' scrolling='auto'></iframe>").dialog({ width:600, height:400, modal:true, resizable:false, buttons:{"关闭":function(){$(this).dialog("close");}} }); }); }); </script></head><body> <form id="form1" runat="server"> <div> <h2>jQuery ui dialog学习</h2> <p><input type="button" id="btnNormalDialog" value="弹出一个普通的Dialog" /></p> <p><input type="button" id="btnModalDialog" value="弹出一个模态的Dialog" /></p> <p><input type="button" id="btnIframeDialog" value="弹出一个IframeDialog" /></p> </div> <div id="dialog_normal" title="普通的Dialog"> <p>这里弹出的是一个普通的Dialog</p> </div> <div id="dialog_modal" title="模态的Dialog"> <p>这里弹出的是一个模态的Dialog，其实就是比普通的多了个属性：modal:true</p> </div> </form></body></html>
运行效果图：
以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索框架
， 文件
， dialog
， 事件
this
jquery ui dialog、jquery ui dialog参数、jquery ui dialog样式、jquery.ui.dialog.js、jquery ui dialog url，以便于您获取更多的相关知识。
时间： 2024-09-30 23:14:15