如何分組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>