jquery - 使 JQuery 对话框弹出框响应式

Question

我的学校组织目前有一个网站，其中包含 JQuery 并使用“对话框”弹出框(JQuery-UI？)。我正在使网站响应，但不知道如何使对话框响应。我找到的唯一解决方案是 JQuery mobile，但我不确定如何将其实现到我们当前的网站中。我知道我的问题有点模糊，但我想知道是否有人有一个简单的解决方案？

这是我认为是我的弹出框之一的代码。 (我不太理解代码)感谢任何和所有帮助。

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

                    });
                }
            }
        }
    }); 

Answer 1

我尝试了这个答案中的演示，当我调整笔记本电脑浏览器的大小时它就起作用了。不过还没有在移动设备上尝试过。

Responsive jQuery UI Dialog ( and a fix for maxWidth bug )

演示在这里: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);
            });
        }

    });
}