如何对 Jquery UI 对话框弹出窗口进行分组？答案

【问题标题】：How to Group Jquery UI Dialog Popups?如何对 Jquery UI 对话框弹出窗口进行分组？
【发布时间】：2014-02-28 03:27:14
【问题描述】：

我现在正在使用http://jqueryui.com/dialog/#animated 插件。我需要帮助扩展它以供我使用。

<script>
  $(function() {
    $( "#dialog" ).dialog({
      autoOpen: false,
      show: {
        effect: "blind",
        duration: 1000
      },
      hide: {
        effect: "explode",
        duration: 1000
      }
    });

    $( "#opener" ).click(function() {
      $( "#dialog" ).dialog( "open" );
    });
  });
  </script>


<div id="dialog" title="Basic dialog">
  <p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>

<button id="opener">Open Dialog1</button>

我想像这样扩展这个脚本而不复制 javascript 代码：

<div id="dialog" title="Basic dialog1"><p>content1</p></div>
<div id="dialog" title="Basic dialog2"><p>content2</p></div>
<div id="dialog" title="Basic dialog3"><p>content3</p></div>


<button id="opener">Open Dialog1</button>
<button id="opener">Open Dialog2</button>
<button id="opener">Open Dialog3</button>

是否可以对所有这些事件弹出窗口进行分组，这样我就不会超载 javascript？

【问题讨论】：

标签： javascript jquery jquery-ui modal-dialog jquery-ui-dialog

【解决方案1】：

试试这个，

<script>
      $(function() {
        $( ".dialog" ).dialog({
          autoOpen: false,
          show: {
            effect: "blind",
            duration: 1000
          },
          hide: {
            effect: "explode",
            duration: 1000
          }
        });

        $( ".opener" ).click(function() {
          var id = $(this).attr("id");
          $( "#dialog"+id ).dialog( "open" );
        });
      });
      </script>

    <div id="dialog_1" title="Basic dialog1" class="dialog"><p>content1</p></div>
    <div id="dialog_2" title="Basic dialog2" class="dialog"><p>content2</p></div>
    <div id="dialog_3" title="Basic dialog3" class="dialog"><p>content3</p></div>


    <button id="_1" class="opener">Open Dialog1</button>
    <button id="_2" class="opener">Open Dialog2</button>
    <button id="_3" class="opener">Open Dialog3</button>

【讨论】：