本篇文章主要是对JQUERY中dialog的用法进行了详细的分析介绍，需要的朋友可以过来参考下，希望对大家有所帮助

今天用到了客户端的对话框，把 jQuery UI 中的对话框学习了一下。   准备 jQuery 环境   首先，我们创建一个按钮，点击这个按钮的时候，将会弹出一个对话框。   <input type="button" value="删除" id="btn" />   为了设置这个按钮点击的事件，需要准备 jQuery 的环境。   <script type="text/javascript" src="scripts/jquery-1.4.2.js"></script>   在 ready 中设置按钮的点击事件。   代码如下:  $(function() {     // 初始化     $("#btn").click(function() {         alert("btn 被点击啦！");    }  );   确认这一步没有问题。   准备对话框 第二步，需要准备对话框的内容。这些内容来自 jQuery UI 的演示文件。    代码如下:  <div id="dialog-confirm" title="Empty the recycle bin?" >          <p>              <span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>              These items will be permanently deleted and cannot be recovered. Are you sure?</p>  </div>   为了使用 jQuery UI 的对话框，需要增加这些文件的引用。    <script type="text/javascript" src="scripts/jquery.ui.core.js"></script>  <script type="text/javascript" src="scripts/jquery.ui.widget.js"></script>  <script type="text/javascript" src="scripts/jquery.ui.mouse.js"></script>  <script type="text/javascript" src="scripts/jquery.ui.button.js"></script>  <script type="text/javascript" src="scripts/jquery.ui.draggable.js"></script>  <script type="text/javascript" src="scripts/jquery.ui.position.js"></script>  <script type="text/javascript" src="scripts/jquery.ui.dialog.js"></script>   增加样式 jQuery UI 中使用了大量的样式来修饰，需要引用 jQuery UI 的样式，注意，jquery.ui.all.css 这个文件引用了大量的其他样式文件，将 jQuery UI 中 development-bundlethemesbase 文件夹中的内容都复制过来。   <link type="text/css" href="styles/jquery.ui.all.css" rel="stylesheet" />   在 ready 函数中，同时也初始化这个对话框。  代码如下:  $(function() {      // 初始化      $("#btn").click(function() {          alert("btn 被点击啦！");      });        // 初始化对话框      $("#dialog-confirm").dialog();  });   现在，打开这个页面的时候，就已经可以看到对话框了。   通过按钮弹出对话框 我们希望页面上初始化的时候看不到这个对话框，在点击按钮的时候再出现。那么需要这几个工作。   先给对话框增加一个默认不显示的样式。style="display: none"，这样默认就不会看到这一部分。   码如下:  <div id="dialog-confirm" title="Empty the recycle bin?" style="display: none">      <p>          <span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>          These items will be permanently deleted and cannot be recovered. Are you sure?</p>  </div>   然后，在初始化对话框的时候，也不显示，仅仅完成初始化工作。   在初始化对话框的时候，传递一个参数 autoOpen: false   代码如下:  $("#dialog-confirm").dialog(      {          autoOpen: false      }  );   在按钮的点击事件中，弹出这个对话框。 代码如下:  $("#btn").click(function() {      // alert("btn 被点击啦！");      $("#dialog-confirm").dialog("open");  });   如果传递 close ，将会关闭对话框。   实现模式对话框 在实际应用中，我们经常需要实现模式对话框，在 Web 中需要增加一个遮罩层来挡住底层的元素，模拟模式效果，这可以在初始化对话框的时候，传递一个参数 modal: true 来实现。修改之后的初始化代码成为：   代码如下:  $("#dialog-confirm").dialog(      {          modal: true,             // 创建模式对话框          autoOpen: false,         // 只初始化，不显示       }  );   增加对话框的按钮 可以为对话框增加任意的按钮，并自定义按钮的事件处理。我们先增加两个按钮，一个确定，一个取消，并让他们先关闭对话框。  代码如下:  // 初始化对话框  $("#dialog-confirm").dialog(  {      modal: true,             // 创建模式对话框      autoOpen: false,      buttons: {          "Ok": function() {               $(this).dialog('close');          },          "Cancel": function() {              $(this).dialog('close');          }      }  });