3-6 对话框插件——dialog
本节编程练习不计算学习进度，请电脑登录imooc.com操作

对话框插件——dialog

对话框插件可以用动画的效果弹出多种类型的对话框，实现JavaScript代码中alert()和confirm()函数的功能，它的调用格式为：

$(selector).dialog({options});

selector参数为显示弹出对话框的元素，通常为<div>，options参数为方法的配置对象，在对象中可以设置对话框类型、“确定”、“取消”按钮执行的代码等。

例如，当点击“提交”按钮时，如果文本框中的内容为空，则通过dialog插件弹出提示框，提示输入内容不能为空，如下图所示：

在浏览器中显示的效果：

从图中可以看出，当文本框的内容为空时，调用自定义的sys_Alert函数，在该函数中再调用dialog插件的dialog()方法，弹出带模式的显示信息对话框。

任务

我来试试，亲自调用dialog插件弹出带模式的询问信息对话框

在下列代码的第30行，调用对话框插件的dialog()方法，弹出询问对话框。

index.htmlstyle.css 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.     <head>
  4.         <title>对话框插件</title>
  5.         <link href="http://www.imooc.com/data/jquery-ui.css" rel="stylesheet" type="text/css" />
  6.         <link href="style.css" rel="stylesheet" type="text/css" />
  7.         <script src="http://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script>
  8.         <script src="http://www.imooc.com/data/jquery-ui-1.9.2.min.js" type="text/javascript"></script>
  9.     </head>
  10.  
  11.     <body>
  12.         <div id="divtest">
  13.             <div class="content">
  14.                 <span id="spnName" class="fl">张三</span>
  15.                 <input id="btnDelete" type="button" value="删除"  class="fr"/>
  16.             </div>
  17.             <div id='dialog-modal'></div>
  18.         </div>
  19.  
  20.         <script type="text/javascript">
  21.             $(function () {
  22.                 $("#btnDelete").bind("click", function () { //询问按钮事件
  23.                     if ($("#spnName").html() != null) { //如果对象不为空
  24.                         sys_Confirm("您真的要删除该条记录吗？");
  25.                         return false;
  26.                     }
  27.                 });
  28.             });
  29.             function sys_Confirm(content) { //弹出询问信息窗口
  30.                 ?({
  31.                     height: 140,
  32.                     modal: true,
  33.                     title: '系统提示',
  34.                     hide: 'slide',
  35.                     buttons: {
  36.                         '确定': function () {
  37.                             $("#spnName").remove();
  38.                             $(this).dialog("close");
  39.                         },
  40.                         '取消': function () {
  41.                             $(this).dialog("close");
  42.                         }
  43.                     },
  44.                     open: function (event, ui) {
  45.                         $(this).html("");
  46.                         $(this).append("<p>" + content + "</p>");
  47.                     }
  48.                 });
  49.             }
  50.         </script>
  51.     </body>
  52. </html>
  1. body
  2. {
  3.     font-size: 62.5%;
  4. }
  5. #divtest
  6. {
  7.     width: 282px;
  8. }
  9. #divtest .content
  10. {
  11.     background-color: #eee;
  12.     padding: 8px;
  13.     height: 23px;
  14.     line-height: 23px;
  15. }
  16. .fl
  17. {
  18.     float: left;
  19. }
  20. .fr
  21. {
  22.     float: right;
  23. }
下一节