如何使用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知识.

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

  
  
  
  







  

    

      Are you sure?
      
    
    

      Do you want to continue?
    
    

      
         
    
                                                
  
   

@Owen-非常感谢.我不得不在Matt的样式表中对.modalPopup CSS类进行一次改变:

position: fixed;

....而且它有效.非常感激.我真的要坐下来看看我的O'Reilly CSS书,我从来没有机会读过一些晚上.... :)

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

如果是这样,你想做一些事情:

#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声明都是基于元素计算的当前高度/宽度,窗口的高度和宽度的文件.