<!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/javascript" 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.aspx' 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> 