如何将对话框放置在屏幕中央？

-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'。 –

如何将对话框放置在屏幕中央？

回答

相关问题