jquery ui 弹出层

<!doctype html>

<html>

<head>

 <meta charset="utf-8">

 <title>jquery ui弹出层使用</title>

 <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">

 <script src="http://code.jquery.com/jquery-1.10.2.js"></script>

 <script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>

 <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">

 <script>

 $(function() {

   $( "#dialog-confirm" ).dialog({

     resizable: false,

     height:140,

     modal: true,

//按钮

     buttons: {

       "取消": function() {

//关闭按钮

         $( this ).dialog( "close" );

       },

       "确定": function() {

         $( this ).dialog( "close" );

alert("确定");

       },

  "删除": function() {

         $( this ).dialog( "close" );

alert("删除");

       }

     }

   });

 });

 </script>

</head>

<body>

<div id="dialog-confirm" title="jquery ui演示弹出层">

 <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>jquery ui弹出层内容测试中</p>

</div>

<p>jquery ui弹出层使用</p>

</body>

</html>

posted @ 2016-04-10 19:05  xiaye  阅读(570)  评论(0编辑  收藏  举报