我怎樣才能使用jquery來修改和修復一個模態窗口？

我現在有一些小問題模式jQuery窗口。我已將其定義爲：我怎樣才能使用jquery來修改和修復一個模態窗口？

function mywin() { 
    $(function() { 
     $("#dialog-confirm").dialog({ 
      resizable: false, 
      height: 300, 
      width: 460, 
      modal: true, 
     show: { 
      effect: "drop", 
      duration: 3000, 
     }, 
     hide: { 
      effect: "drop", 
      duration: 1000 
     }, 
      buttons: { 
      "OK": function() { 
       $(this).dialog("close"); 
      }, 
      "EXIT": function() { 
       $(this).dialog("close"); 
      } 
     } 
     }); 
    }); 
}

而且都行。當用戶調整它的大小並將結果固定到中心時，我也需要它將結果導向到Windows的中心（水平和垂直）。

當我第一次加載它時，關於居中父窗口是可以的，但是在第一次模態窗口結果不是完全居中在垂直位置上，而是在尊重確切位置的情況下。只是我刷新頁面，然後在垂直方向上採取正確的位置。居中的其他問題是當我調整瀏覽器窗口的大小時。模式窗口不更新位置方面新中心。
我試圖在這個網站搜索某些內容，例如：

$("#dialog-confirm").position({ 
    my: "center", 
    at: "center", 
    of: window 
});

，但問題沒有得到解決。所以第一個問題是：我怎麼能做到有模態窗口當用戶調整它的大小時，總是要瀏覽器的中心？

關於第二個問題，我如何解決因爲模式窗口是固定的總是居中？爲此，我在這裏搜索了一些東西，並找到了關於添加類與position:fixed的建議，但我看到，Windows不是固定的，我總是可以將它移動到屏幕上。

那麼誰能幫我解決這兩個問題呢。

來源

2015-07-19 Marcello Impastato

爲什麼重新發明輪子，當你可以使用Fancybox或類似的東西？它做你想要的，更沒有任何編碼你的部分：http://fancybox.net/ –

納撒尼爾，我已經發布了完整的代碼下試圖解釋更好的探針。但你說得好。原因是兩個：第一個因爲我學習太使用jQuery，所以我採取了很好的理由，第二個因素是好主意，當然使用一些準備和測試，但是太真實，往往需要更多的時間，而不是總是工作可能的，在這種情況下，第一個原因主要是相關的（關於我和學習它）。 –

我明白了。都好。 –

許多問題...

在CSS

#dialog-confirm { 
    position: fixed; 
}

將設置任何HTML元素漂浮在別人總是在屏幕的同一位置貼。所以，這可能是您需要作爲模態窗口的起點。

在JS

你應該設置窗口：

var posx = (screen.width() - $("#dialog-confirm").width())/2; 
var posy = (screen.height() - $("#dialog-confirm").height())/2; 
$("#dialog-confirm").offset({ top: posy , left: posx })

Bootstrap配備了一個很好的模式窗口和工作的CSS和JS解決所有此類問題。

許多模態窗口有垂直居中問題我不會爭辯這一點。

這是檢測視/瀏覽器的縮放：

$(document).ready(function() { 

    $(window).resize(function() { 

     var posx = (screen.width() - $("#dialog-confirm").width())/2; 
     var posy = (screen.height() - $("#dialog-confirm").height())/2; 
     $("#dialog-confirm").offset({ top: posy , left: posx }) 
    }); 
});

停止重新發明輪子，除非你剛開始學習:)

來源

2015-07-19 06:41:39 Heroselohim

關於這些我之前找到的解決方案;現在我試着再次複製你的建議。是的，jquery我從少數人開始。我與它合作主要是爲了解決cookie法的問題。所以我正在研究一個關於它的解決方案。關於cookie服務器/客戶端的管理，服務器端也是一樣的，但關於gui它還不完美。 :) –

我會充分推薦學習一點關於BOOTSTRAP。這非常簡單，它將解決你所有的前端（HTML + CSS + JS）的基本需求。標準功能和可視化組件比學習CSS和jQuery容易得多。 – Heroselohim

我試圖聽建議，但沒有得到解決。我發佈完整的例子代碼：

<html> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
    <title>Prova</title> 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
    <script src="//code.jquery.com/jquery-1.10.2.js"></script> 
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
    <style type="text/css"> 
     #dialog-confirm { 
     position: fixed; 
     } 
    </style> 
    <script type="text/javascript"> 
     $(function() { 
     $("#dialog-confirm").dialog({ 
      resizable: false, 
      height:140, 
      modal: true, 
      buttons: { 
      "I agree": function() { 
       $(this).dialog("close"); 
      }, 
      "Decline": function() { 
       $(this).dialog("close"); 
      } 
      } 
     }); 
     }); 
     $(document).ready(function() { 
     $(window).resize(function() { 
      var posx = (screen.width() - $("#dialog-confirm").width())/2; 
      var posy = (screen.height() - $("#dialog-confirm").height())/2; 
      $("#dialog-confirm").offset({ top: posy , left: posx }) 
     }); 
     }); 
    </script> 
    </head> 
    <body> 
    <div id="dialog-confirm" title="My Title"> 
     <p>My text</p> 
    </div> 
    </body> 
</html>

模態窗口正常顯示，但位置中心始終在調整大小的瀏覽器和固定位置居中不行。我試圖看，但不明白我的錯誤。非常感謝。

來源

2015-07-19 09:26:04

我怎樣才能使用jquery來修改和修復一個模態窗口？

回答

相關問題