如何使用jQuery和blockUI将DIV置于页面中心？

我正在尝试转换Matt Berseth的’ YUI Style Yes / No Confirm Dialog ‘，所以我可以将它与jQuery blockUI插件一起使用。

我不得不承认我不是CSS大师，但我认为即使对我来说这也很容易….除了10小时之后我不知道为什么我不能让爆炸的东西工作。

问题是我似乎无法让’confirmDialogue’DIV在页面上居中，而上面没有显示任何工件。 或者，如果我通过执行….重置blockUI的CSS设置：

$.blockUI.defaults.css = {}; 

…..我发现DIV左对齐。

我已经尝试了各种各样的东西，但CSS不是我的强点是服务器端应用程序有点人:(

所以如果有人在那里有一个jQuery / blockUI / CSS向导阅读这个…请你有一个去，让我知道我错了什么？

基本上我遵循Matt博客上的设计模板，HTML看起来像下面的东西（CSS与Matt的样本没有变化）。 您可以从http://mattberseth2.com/downloads/yui_simpledialog.zip上的完整示例项目下载中获取png’sprite’文件 – 这是一个.net项目，但我只是想让它在一个简单的html中运行文件，因此不需要.NET知识。

无论如何，任何建议和指导真的非常有用。 如果我们见面的话，我甚至会鼓励买有希望买啤酒的东西买:)

        .modalpopup { font-family: arial,helvetica,clean,sans-serif; font-size: small; padding: 2px 3px; display: block; position: absolute; } .container { width: 300px; border: solid 1px #808080; border-width: 1px 0px; } .header { background: url(img/sprite.png) repeat-x 0px -200px; color: #000; border-color: #808080 #808080 #ccc; border-style: solid; border-width: 0px 1px 1px; padding: 3px 10px; } .header .msg { font-weight: bold; } .body { background-color: #f2f2f2; border-color: #808080; border-style: solid; border-width: 0px 1px; padding-top: 10px; padding-left: 10px; padding-bottom: 30px; } .body .msg { background: url(img/sprite.png) no-repeat 0px -1150px; float: left; padding-left: 22px; } .footer { background-color: #f2f2f2; border-color: #808080; border-style: none solid; border-width: 0px 1px; text-align:right; padding-bottom: 8px; padding-right: 8px; } .close { right: 7px; background: url(img/sprite.png) no-repeat 0px -300px; width: 25px; cursor: pointer; position: absolute; top: 7px; height: 15px; } .modalBackground { background-color:Gray; filter:alpha(opacity=50); opacity:0.5; }     
 
 
 Are you sure?  
 
 Do you want to continue? 
 
   
 
 
  $(document).ready(function() { $('#triggerDialogue').click(function() { $.blockUI({ message: $('#confirmDialogue') }); }); });    

@Owen – 非常感谢。 我不得不在Matt的样式表中对.modalPopup CSS类进行改变：

 position: fixed; 

….它的确有效。 非常感激。 我真的要坐下来看看我的O’Reilly CSS书 ，我从来没有机会读一晚…. 🙂

Answer 1

嗯，我不熟悉blockUI，但是以div为中心的基础非常普遍。 我假设您希望您的#confirmDialogue div在整个屏幕中居中？

如果是这样，你想做一些事情：

 #confirmDialogue { position: fixed; // absolutely position this element on the page height: 200px; // define your height/width so we can calculate with it after width: 300px; } 

现在你的jQuery：

 $('#triggerDialogue').click(function() { // to position #confirmDialogue, we need the window height/width var msg = $('#confirmDialogue'); var height = $(window).height(); var width = $(document).width(); msg.css({ 'left' : width/2 - (msg.width() / 2), // half width - half element width 'top' : height/2 - (msg.height() / 2), // similar 'z-index' : 15, // make sure element is on top }); // etc... }); 

基本上，你想要修复你的#confirmDialogue的位置（这样你就可以相对于你的窗口/文档的大小来定位它。 left和top声明是根据元素当前高度/宽度，窗口的高度和文档计算的宽度。

Answer 2

看看这个jQuery MSG插件 。 它重量很轻，易于使用。

示例代码

 // default usage, this will block the screen and shows a 'please wait...' msg $.msg(); // this will show a 'blah blah' msg $.msg({ content : 'blah blah' }); 

更多选项请看这个演示

完整文档请看一下这篇文章 。 post中包含下载和源代码链接。

或者如果你只是想集中一些DOM元素，你也可以试试这个插件

Answer 3

您可以在这里找到一些有用的信息。 使用jQuery将DIV置于屏幕中心

Answer 4

你也可以试试jquery ui对话框http://jqueryui.com/demos/dialog/