如何分组Jquery UI对话框弹出窗口？

I'm working with a http://jqueryui.com/dialog/#animated plugin right now. And I need help extending it for my use.

我正在使用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>

I would like to extend this script like so without duplicating javascript code:

我想像这样扩展这个脚本而不重复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>

Is there away to group all these event popups so that I do not overload the javascript?

有没有把所有这些事件弹出窗口分组，以便我不重载javascript？

1 个解决方案

#1

Try this,

尝试这个，

<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>