jQuery UI - dialog使用

jQuery UI 的dialog 參數設定應用

語法：

<script>
   $("selector", context).dialog({
      option1: value1, 
      option2: value2,
      ******** more option setting ******** 
});
</script>

sample – dialog-1

<!-- Javascript -->
      <script>
         $(function() {
            $( "#dialog-1" ).dialog({
               autoOpen: false,  
            });
            $( "#opener" ).click(function() {
               $( "#dialog-1" ).dialog( "open" );
            });
         });
      </script>

preview demo

sample – dialog-2

<!-- Javascript -->
<script>
    $(function() {
            $( "#dialog-2" ).dialog({
               autoOpen: false, 
               buttons: {
                  OK: function() {$(this).dialog("close");}
               },
               title: "Success",
               position: {
                  my: "left center",
                  at: "left center"
               }
            });
            $( "#opener-2" ).click(function() {
               $( "#dialog-2" ).dialog( "open" );
            });
         });
</script>

preview demo

sample – dialog-3

<!-- Javascript -->
<script>
         $(function() {
            $( "#dialog-3" ).dialog({
               autoOpen: false, 
               hide: "puff",
               show : "slide",
               height: 200      
            });
            $( "#opener-3" ).click(function() {
               $( "#dialog-3" ).dialog( "open" );
            });
         });
      </script>

demo3與demo2不一樣的部分在於展示與隱藏時的效果不同。