如何將Jquery UI中的“對話”框的寬度固定為窗口的60％

Question

我正在使用Jquery UI進行彈出，其中顯示了一個使用Ajax填充的表，腳本看起來像這樣

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

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

HTML非常基本

    <div id="dialog" title="Preview" style="width:60%">
    SOme COntent here 
<table></table>
    </div>

當彈出窗口出現時，寬度不會根據表格的寬度而增加。 我想將彈出窗口的寬度固定為窗口大小的60％

Answer 1

我認為您需要為對話框設置選項寬度：（從此處http://api.jqueryui.com/dialog/ ）

$("#dialog").dialog( "option", "width", '60%' );

看看這個小提琴： http : //jsfiddle.net/mykak5qx/