web-dev-qa-db-ja.com

レスポンシブjQuery UIダイアログ（およびmaxWidthバグの修正）

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

したがって、jQuery UI Dialogをレスポンシブにする方法は疑問のままです。

jqueryjquery-uiresponsive-designjquery-dialogcss
38
Jason

以下に、応答性の高いjQuery UIダイアログをどのように実現したかを示します。

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

次に、ダイアログの最大幅をその場で変更し、ダイアログの位置を変更するために、サイズ変更およびダイアログのオープンイベントをキャッチします。

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

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

// Demo: http://codepen.io/jasonday/pen/amlqz
// [email protected]

$("#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);
        }
    });

}

[〜＃〜] edit [〜＃〜]

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

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

  • ダイアログの外側をクリックして閉じます
  • タイトルバーを非表示
  • 閉じるボタンを隠す
  • レスポンシブ（上記のアドレスへ）
  • レスポンシブのためのスケールの幅と高さ（例：ウィンドウ幅の80％）
63
Jason

maxWidthにcreateを設定するとうまくいきます：

$( ".selector" ).dialog({
  width: "auto",
  // maxWidth: 660, // This won't work
  create: function( event, ui ) {
    // Set maxWidth
    $(this).css("maxWidth", "660px");
  }
});
34
tsi

JQueryやJavascriptは必要ありません。 CSSはこのためにすべてを解決します。

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

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

[〜＃〜] edit [〜＃〜]

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

.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/

8
iautomation

これらのコードをいくつかのソースから収集し、まとめました。これが、応答性の高い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>
6
gracia16

私の簡単な解決策がこの質問の問題を解決するかどうかはわかりませんが、それは私がやろうとしていることのために機能します：

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

つまり、ウィンドウの幅にもっと狭い幅が必要でない限り、ダイアログは400px幅で開きます。

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

3
Jeffrey Simon

私は古いとレスポンシブなダイアログになんとかしました

<!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 resultでウィンドウのサイズを変更し、「実行」をクリックします。

3
Adrian P.
$("#content").dialog({
    width: 'auto',
    create: function (event, ui) {
        // Set max-width
        $(this).parent().css("maxWidth", "600px");
    }
});

これは私のために働いた

2
Himalaya Garg

サイトが最大サイズに制限されている場合、以下のアプローチが機能します。ダイアログにcssスタイルを添付します。

.alert{
    margin: 0 auto;
    max-width: 840px;
    min-width: 250px;
    width: 80% !important;
    left: 0 !important;
    right: 0 !important;
}

$('#divDialog').dialog({
    autoOpen: false,
    draggable: true,
    resizable: true,
    dialogClass: "alert",
    modal: true
});
2
kiranutt

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

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;
}
1
Fang Fang

私はこのようにレスポンシブなダイアログを行うことができました。 maxWidthの使用率が奇妙に見えたためです。

var wWidth = $(window).width();
var dWidth = wWidth * 0.8;

$('.selector').dialog({
    height: 'auto',
    width: 'auto',
    create: function(){
        $(this).css('maxWidth', dWidth);
    }
});
1
everis

ありがとう、これはレスポンシブになりますが、ダイアログが開いた後にコンテンツ（Djangoフォームテンプレート）がロードされていたダイアログが中心から外れているという問題がまだありました。したがって、$( "#my-modal" ).load(myurl).dialog("open" );の代わりに、$( "#my-modal" ).dialog("open" );を呼び出します。次に、ダイアログでオプション_'open'_を追加し、ロードを呼び出してから、fluidDialog()関数を呼び出します。

ダイアログオプション（モーダル、流体、高さなど）：

_open: function () {
    // call LOAD after open
    $("#edit-profile-modal").load(urlvar, function() {
    // call fluid dialog AFTER load
    fluidDialog();
});
_
0
amchugh89

投稿ありがとうございます！これにより、時間を大幅に節約できました。

ただし、特定の画面サイズでダイアログが最初に開かれたときに、ファンキーな位置を取得していました。このようなエラーが発生した場合は、次のようなことを試してください。

if (wWidth < dialog.options.maxWidth + 50) {
    // keep dialog from filling entire screen
    $this.css("max-width", "90%");

    // ADDED
    $this.css("left", "5%");
} else {
    // fix maxWidth bug
    $this.css("max-width", dialog.options.maxWidth);

    // ADDED
    var mLeft = (wWidth - dialog.options.maxWidth) / 2;
    $this.css("left", mLeft + "px");
}

うまくいけば、これで誰かの頭痛を和らげることができます=）

0
Chandler Zwolle

受け入れられているソリューションは、かなりバグが多く、設計が行き届いていません。私は dialogResize を思いつきました。

次のように実装します。

$("#dialog").dialogResize({
  width: 600,
  height: 400,
  autoOpen: true,
  modal: true
});

デモ

0
Adam Jimenez