44

jQuery UI を利用する多くのサイトでは、克服しなければならない大きな欠点がいくつかあります。これは、jQuery UI がレスポンシブ デザインをサポートしておらずmaxWidth、 を と組み合わせて使用​​すると長年のバグがあるためwidth:'auto'です。

jQuery UI ダイアログをレスポンシブにするにはどうすればよいでしょうか?

4

14 に答える 14

68

以下は、レスポンシブ jQuery UI ダイアログを実現する方法です。

これを行うために、config - に新しいオプションを追加しましたfluid: true。これは、ダイアログをレスポンシブにすることを示しています。

次に、サイズ変更イベントとダイアログを開くイベントをキャッチして、その場でダイアログの最大幅を変更し、ダイアログの位置を変更します。

ここで実際の動作を確認できます: http://codepen.io/jasonday/pen/amlqz

編集や改善点を確認して投稿してください。

// Demo: http://codepen.io/jasonday/pen/amlqz
// movemaine@gmail.com

$("#content").dialog({
    width: 'auto', // overcomes width:'auto' and maxWidth bug
    maxWidth: 600,
    height: 'auto',
    modal: true,
    fluid: true, //new option
    resizable: false
});


// on window resize run function
$(window).resize(function () {
    fluidDialog();
});

// catch dialog if opened within a viewport smaller than the dialog width
$(document).on("dialogopen", ".ui-dialog", function (event, ui) {
    fluidDialog();
});

function fluidDialog() {
    var $visible = $(".ui-dialog:visible");
    // each open dialog
    $visible.each(function () {
        var $this = $(this);
        var dialog = $this.find(".ui-dialog-content").data("ui-dialog");
        // if fluid option == true
        if (dialog.options.fluid) {
            var wWidth = $(window).width();
            // check window width against dialog width
            if (wWidth < (parseInt(dialog.options.maxWidth) + 50))  {
                // keep dialog from filling entire screen
                $this.css("max-width", "90%");
            } else {
                // fix maxWidth bug
                $this.css("max-width", dialog.options.maxWidth + "px");
            }
            //reposition dialog
            dialog.option("position", dialog.options.position);
        }
    });

}

編集

更新されたアプローチ: https://github.com/jasonday/jQuery-UI-Dialog-extended

上記のリポジトリには、次のオプションも含まれています。

  • ダイアログの外側をクリックして閉じます
  • タイトルバーを隠す
  • 閉じるボタンを隠す
  • レスポンシブ (上記のアドレスに)
  • レスポンシブの幅と高さをスケールします (例: ウィンドウ幅の 80%)
于 2013-05-09T22:03:36.817 に答える
10

jQuery や Javascript は必要ありません。CSSはこれをすべて解決します。

これは、レスポンシブ jquery ダイアログ ボックスの私のプロジェクト ソリューションです。デフォルトの幅と高さ、次にブラウザーの縮小に合わせて最大の幅と高さ。次に、コンテンツが利用可能な高さにまたがるようにするフレックスボックスがあります。

フィドル: http://jsfiddle.net/iausallc/y7ja52dq/1/

編集

サイズ変更とドラッグをサポートする更新されたセンタリング手法

.ui-dialog {
    z-index:1000000000;
    top: 0; left: 0;
    margin: auto;
    position: fixed;
    max-width: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
.ui-dialog .ui-dialog-content {
    flex: 1;
}

フィドル: http://jsfiddle.net/iausallc/y7ja52dq/6/

于 2015-10-23T02:35:09.767 に答える
8

これらのコードをいくつかの情報源から収集し、まとめました。これが、レスポンシブ jQuery UI ダイアログを思いついた方法です。お役に立てれば..

<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">

<title>jQuery UI Dialog - Modal message</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<script>
  $(document).ready(function() {
  $("#dialog-message").dialog({
    modal: true,
    height: 'auto',
    width: $(window).width() > 600 ? 600 : 'auto', //sets the initial size of the dialog box 
    fluid: true,
    resizable: false,
    autoOpen: true,
    buttons: {
       Ok: function() {
         $(this).dialog("close");
       }
    }
  });
    $(".ui-dialog-titlebar-close").hide();
  });
  $(window).resize(function() {
  $("#dialog-message").dialog("option", "position", "center"); //places the dialog box at the center
  $("#dialog-message").dialog({
    width: $(window).width() > 600 ? 600 : 'auto', //resizes the dialog box as the window is resized
 });
});
</script>

</head>
<body>

<div id="dialog-message" title="Responsive jQuery UI Dialog">
  <p style="font-size:12px"><b>Lorem Ipsum</b></p>
  <p style="font-size:12px">Lorem ipsum dolor sit amet, consectetur 
   adipiscing elit. Quisque sagittis eu turpis at luctus. Quisque   
   consectetur ac ex nec volutpat. Vivamus est lacus, mollis vitae urna 
   vitae, semper aliquam ante. In augue arcu, facilisis ac ultricies ut, 
   sollicitudin vitae  tortor. 
  </p>
</div>

</body>
</html>
于 2015-07-09T15:53:59.140 に答える
3

私の単純な解決策がこの質問の問題を解決するかどうかはわかりませんが、私がやろうとしていることにはうまくいきます:

$('#dialog').dialog(
{
    autoOpen: true,
    width: Math.min(400, $(window).width() * .8),
    modal: true,
    draggable: true,
    resizable: false,
});

つまり、ウィンドウの幅がそれより小さい幅を必要としない限り、ダイアログは 400px の幅で開きます。

幅を狭くするとダイアログが縮小するという意味では反応しませんが、特定のデバイスではダイアログが広すぎないという意味では反応します。

于 2015-11-01T21:03:03.963 に答える
3

古いものとの応答性の高いダイアログになんとか成功しました 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

このような

            var dWidth = $(window).width() * 0.9;
            var dHeight = $(window).height() * 0.9; 

            $('#dialogMap').dialog({
                autoOpen: false,
                resizable: false,
                draggable: false,
                closeOnEscape: true,
                stack: true,
                zIndex: 10000,
                width: dWidth,
                height: dHeight,    
                modal: true,
                open:function () {          

                }
            });
            $('#dialogMap').dialog('open');

JSFiddleの結果でウィンドウのサイズを変更し、 [実行] をクリックします。

于 2014-10-05T22:38:56.000 に答える
3 
$("#content").dialog({
    width: 'auto',
    create: function (event, ui) {
        // Set max-width
        $(this).parent().css("maxWidth", "600px");
    }
});

これは私のために働いた

于 2016-08-24T16:29:10.603 に答える
2

この問題の解決策を見つけました。

CSSスタイルを貼り付けました。これが誰かの助けになることを願っています

.ui-dialog{
  position: fixed;

  left: 0 !important;
  right: 0 !important;

  padding: rem-calc(15);
  border: 1px solid #d3dbe2;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);

  max-width: rem-calc(620);
  top: rem-calc(100) !important;

  margin: 0 auto;
  width: calc(100% - 20px) !important;
}
于 2016-06-08T17:43:56.143 に答える