使JQuery对话框弹出框响应

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

这是我认为是我的弹出框之一的代码。（我不太了解代码）任何和所有的帮助表示赞赏。

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

        }); 
       } 
      } 
     } 
    });

来源

2013-07-12 Derek

一般来说，我不认为你应该让对话框响应。对话框应该小而简洁。因此，他们应该适合任何屏幕！如果他们很大，那么重新考虑你的设计。 – ZorleQ

我不知道这是什么最好的做法，但恕我直言对话框应该实现小屏幕。我觉得在手机上处理对话并不容易。 – Learner

这不是我的网站。一名前员工设计了它，当时它仅用于台式机。现在我的经理希望可以通过移动设备访问它。所以我必须让它响应。如果我有技能/时间重新设计整个事情，相信我我会。 – Derek

我试着从这个答案演示，它工作时，我调整我的笔记本浏览器。虽然没有尝试过移动设备。

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

    }); 
}

来源

2013-07-12 18:35:40 abromli

你可能会发布如何实现到我当前的代码。我不是一个非常强大的编码器。 :( – Derek

使JQuery对话框弹出框响应

回答

相关问题