<!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" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jquery_UI1.5(dialog)例子</title> <link rel="stylesheet" type="text/css" href="css/jquery-ui.css"> <script type="text/javascript" src="js/jquery-1.5.1.js"></script> <script type="text/javascript" src="js/jquery-ui.min.js"></script> <script type="text/javascript" src="js/jquery-ui-i18n.min.js"></script><!--国际化--> <script type="text/javascript"> $(function() { $( "#dialog-modal" ).dialog({ height: 160, stack:false, modal: true, title:"title", closeOnEscape:false, closeText:'关闭', resizable:false, close:function(){ }, buttons: [ { text: "Ok", click: function() { $(this).dialog("close"); } } ] }); }); </script> <style type="text/css"> </style> </head> <body style="font-size:62.5%;"> 这是body的内容 ui-corner-all { -moz-border-radius: 4px/*{cornerRadius}*/; -webkit-border-radius: 4px/*{cornerRadius}*/; border-radius: 4px/*{cornerRadius}*/; } //表示header显示圆边框 .ui-dialog { position: absolute; padding: .2em; width: 300px; overflow: hidden; } //padding: .2em表示dialog的padding距离 <div id="dialog-modal" > <p>Adding the modal overlay screen makes the dialog look more prominent because it dims out the page content.</p> </div> </body> </html>?