2

現在、私の学校組織には、JQuery を組み込み、「ダイアログ」ポップアップ ボックス (JQuery-UI?) を使用する Web サイトがあります。Web サイトをレスポンシブにしていますが、ダイアログ ボックスをレスポンシブにする方法がわかりません。私が見つけた唯一の解決策は JQuery モバイルですが、それを現在の Web サイトに実装する方法がわかりません。私の質問は少し漠然としていますが、誰かが簡単な解決策を持っているかどうか疑問に思っていましたか?

これは、私のポップアップ ボックスの 1 つのコードであると私が信じているものです。(私はコードをよく理解していません) ありとあらゆる助けに感謝します。

$( "#dialog-new" ).dialog({
        resizable: false,
        width:900,
        modal: true,
        autoOpen: false,
        buttons: {
            "Clear Form": function() {
      clearForm($("#newapsform"));

    },
            "Create Request": function() {

                if(formIsOkay($("#newapsform")))
                {
                    $.ajax
                    ({  
                      type: "POST",  
                      url: "system/aps2.newrequest.php",  
                      data: $("#newapsform").serialize(),  
                      success: function() 
                        {  
                            $( "#dialog-new" ).dialog( "close" );
                            $("#goodmsg").html("Created photo request successfully!");
                            $('#goodmsgdiv').fadeIn(1500).delay(3000).fadeOut(1500);

                            datatables.fnDraw();
                            searchtables.fnDraw();
                            phototables.fnDraw();
                            clearForm($("#newapsform"));
                        },
          error: function() 
                        {  
                            $( "#dialog-new" ).dialog( "close" );
                            $("#badmsg").html("Could not create request: Use the force next time.");
                            $('#badmsgdiv').fadeIn(1500).delay(3000).fadeOut(1500);
                        }

                    });
                }
            }
        }
    });
4

1 に答える 1

2

この回答のデモを試してみましたが、ラップトップのブラウザのサイズを変更するとうまくいきました。ただし、モバイルでは試していません。

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

デモはこちら: http://codepen.io/jasonday/pen/amlqz

編集: jquery-1.10.1.js jquery-ui-1.9.2.js
で動作するようです

$( "#dialog-new" ).dialog({
      autoOpen: true,
        width: 'auto', // overcomes width:'auto' and maxWidth bug
        height: 300,
        maxWidth: 600,
        modal: true,
        fluid: true, //new option
        resizable: false,
        open: function(event, ui){ 
           fluidDialog(); // needed when autoOpen is set to true in this codepen
        },

        buttons: {
            "Clear Form": function() {
      ....
});

// run function on all dialog opens
$(document).on("dialogopen", ".ui-dialog", function (event, ui) {
    fluidDialog();
});

// remove window resize namespace
$(document).on("dialogclose", ".ui-dialog", function (event, ui) {
    $(window).off("resize.responsive");
});

function fluidDialog() {
    var $visible = $(".ui-dialog:visible");
    // each open dialog
    $visible.each(function () {
        var $this = $(this);
        var dialog = $this.find(".ui-dialog-content").data("dialog");
        // if fluid option == true
        if (dialog.options.maxWidth && dialog.options.width) {
            // fix maxWidth bug
            $this.css("max-width", dialog.options.maxWidth);
            //reposition dialog
            dialog.option("position", dialog.options.position);
        }

        if (dialog.options.fluid) {
            // namespace window resize
            $(window).on("resize.responsive", function () {
                var wWidth = $(window).width();
                // check window width against dialog width
                if (wWidth < dialog.options.maxWidth + 50) {
                    // keep dialog from filling entire screen
                    $this.css("width", "90%");

                }
              //reposition dialog
              dialog.option("position", dialog.options.position);
            });
        }

    });
}
于 2013-07-12T18:35:40.843 に答える