web-dev-qa-db-ja.com

jQueryUIダイアログの幅

全画面表示の例

JQueryダイアログを使用してテーブルを開きます。それらの一部は大量のテキストを持ち、長すぎて画面から外れてしまう傾向があります。テーブルがフィドルの最初のテーブルのように長すぎる場合、どうすればダイアログを広くできますか？私はもう試した width:'auto'しかし、画面全体を占有しているようです。

HTML：

<button class='label'>Click</button><div class='dialog'><p><table>.....</table></div>
<button class='label'>Click</button><div class='dialog'><p><table>.....</table></div>

Javascript：

$(document).ready(function(){

 $('.label').each(function() {

 var dialogopen = $(this).next(".dialog"); 
 dialogopen.dialog({width:'auto',autoOpen: false,modal: true,
            open: function(){
            jQuery('.ui-widget-overlay').bind('click',function(){
                dialogopen.dialog('close');
            })
        }    
 });    
  $(this).click(function(){
        dialogopen.dialog('open');
         return false;
            }
        );
  });
});
jqueryhtmlcssjquery-ui
15
RedGiant

ダイアログオプションにwidthとmaxWidthを追加することをお勧めします。あなたのデザインがどのように見えるかはわかりませんが、たとえば次のようなものを試してください：

dialogopen.dialog({
   autoOpen: false,
   modal: true,
   open: function(){
      jQuery('.ui-widget-overlay').bind('click',function(){
         dialogopen.dialog('close');
      });
   },
   width: "90%",
   maxWidth: "768px"
});
30
Rodney Golpe