使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對話框彈出框響應

回答

相關問題