2

我的学校组织目前有一个包含 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);
                        }

                    });
                }
            }
        }
    });
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 回答