如何將對話框放置在屏幕中央？

-2

我有JQuery對話框，我有一個問題將盒子放在中心。這裏是我的代碼：如何將對話框放置在屏幕中央？

$.extend({ 
    alert: function (message, title) { 
     $("<div></div>").dialog({ 
      buttons: { "Ok": function() { $(this).dialog("close"); } }, 
      close: function (event, ui) { $(this).remove(); }, 
      resizable: false, 
      title: title, 
      modal: true, 
      width:'auto', 
      .position({ 
        my: "center", 
        at: "center", 
        of: window 
      }) 
     }).html(message); 
    } 
});

這裏是我打電話給我的jQuery的對話框：

$.alert('<div>My Dialog Box test.</div>', 'My File');

這是我的工作例如：https://jsfiddle.net/dmilos89/wn1fy15f/1/

而且使用jQuery UI的1.12。 1個Jquery版本。如果有人能幫助請讓我知道。

來源

2016-10-06 espresso_coffee

jquery ui對話框默認爲中心：http://jqueryui.com/dialog/#default你在哪裏得到它？ – Aschab

它在屏幕的中心，但從中心一直延伸到屏幕的右邊緣。我想把我的盒子放在屏幕兩側均勻地拉伸。我不確定，但也許寬度：'汽車'造成這種情況。 –

我剛剛測試過，如果我將寬度設置爲800，例如我的盒子在中間，一切看起來都不錯。如果我將寬度更改爲自動，那麼我的框位於屏幕的右側。 –

哪個版本的jquery使用？如果1.12後使用，U不需要使用對話框屬性

來源

2016-10-06 18:59:50

我在上面的問題中列出了一切。謝謝。 –

，這樣您就可以取出位置屬性，試試吧 –

$.extend({ 
    alert: function (message, title) { 
     $("<div></div>").dialog({ 
      buttons: { "Ok": function() { $(this).dialog("close"); } }, 
      close: function (event, ui) { $(this).remove(); }, 
      resizable: false, 
      title: title, 
      modal: true, 
      width: '600px', 
      position : { 
        my: "center", 
        at: "center", 
        of: window 
      } 
     }).html(message); 
    } 
});

你有你在哪裏聲明position一個錯誤的位置。另外，當您聲明width:'auto'時，您需要將其設置爲固定寬度。

來源

2016-10-06 19:06:28

這會將框拉伸到屏幕的右側。仍然像以前一樣... –

嘗試設置固定寬度。或者完全去除寬度。我從來沒有見過任何人將寬度設置爲'auto'。 –

如何將對話框放置在屏幕中央？

回答

相關問題