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

Question

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

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