使JQuery对话框弹出框响应 [英] Making a JQuery Dialog pop up box responsive

问题描述

我的学校组织当前有一个包含JQuery并使用对话框"弹出框的网站(JQuery-UI?).我正在使网站具有响应能力，但不知道如何使对话框具有响应能力.我发现的唯一解决方案是JQuery mobile，但我不确定如何在当前网站中实现它.我知道我的问题有点含糊，但我想知道是否有人有一个简单的解决方案?

My school organization currently has a website that incorporates JQuery and uses "dialog" pop up boxes (JQuery-UI?). I am making the website responsive but do not know how to go about making the dialog boxes responsive. The only solution I have found is JQuery mobile but I am not sure how to implement it into our current website. I know my question is a little vague but I was wondering if anyone has a simple solution?

我认为这是我的弹出框之一的代码. (我对代码的理解不是很好)任何帮助都将受到赞赏.

Here is what I believe to be the code for one of my pop-up boxes. ( I don't understand code very well) Any and all help is appreciated.

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

                    });
                }
            }
        }
    }); 

推荐答案

我从这个答案尝试了演示，当我调整笔记本电脑浏览器的大小时，它可以正常工作.不过，还没有尝试在移动设备上使用.

I tried the demo from this answer and it worked when i resize my laptop browser. haven't tried on mobile, though.

响应式jQuery UI对话框(以及针对maxWidth bug)

此处的演示: http://codepen.io/jasonday/pen/amlqz

看起来适用于:
jquery-1.10.1.js
jquery-ui-1.9.2.js

edit:
looks like it works with:
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);
            });
        }

    });
}

这篇关于使JQuery对话框弹出框响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！