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

时间：2022-11-25 15:51:17

I'm trying to convert Matt Berseth's 'YUI Style Yes/No Confirm Dialog' so I can use it with the jQuery blockUI plugin.

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

I have to admit I'm no CSS guru but I thought this would pretty easy even for me....except 10hrs later I'm at a loss as to why I can't get the blasted thing to work.

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

The problem is that I can't seem to get the 'confirmDialogue' DIV to centre on the page without some artifacts showing above it. Alternatively if I reset blockUI's CSS settings by doing....:

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

$.blockUI.defaults.css = {};

.....I find that the DIV aligns left.

.....我发现DIV左对齐。

I've tried all sorts of stuff but CSS isn't my strong point being a server side app kinda guy :(

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

So if anyone out there who's a jQuery/blockUI/CSS wizard reading this...please can you have a go and let me know what I'm getting wrong?

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

Basically I followed the design template on Matt's blog and the HTML looks like the stuff below (the CSS is unchanged from Matt's sample). You can grab the png 'sprite' file from the complete sample project download at http://mattberseth2.com/downloads/yui_simpledialog.zip - it's a .net project but I'm just trying to get this to work in a simple html file, so no .NET knowledge required.

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

Anyway any advice and guidance would be really really really useful. I'll even incentivise things buy promising to buy you lashings of beer if we ever meet :)

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
  <title></title>
  <script type="text/javascript" src="script/jquery-1.2.6.js"></script>
  <script type="text/javascript" src="script/jquery.blockUI.js"></script>
  <style>
  .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;
  }     

  </style>
</head>

<body>

<input id="triggerDialogue" name="triggerDialogue" type="button" value="Go" />

<div id="confirmDialogue" 
     class="modalpopup" style="display:none; text-align: center">
  <div class="container">
    <div class="header">
      <span class="msg">Are you sure?</span>
      <a onclick="return false;" class="close" 
         href="javascript: return false;"></a>
    </div>
    <div class="body">
      <span class="msg">Do you want to continue?</span>
    </div>
    <div class="footer">
      <input type="button" id="Button1" value="Yes" style="width:40px" />
      <input type="button" id="Button2" value="No" style="width:40px" />   
    </div>                                                
  </div>
</div>   

<script type="text/javascript">
  $(document).ready(function() {
    $('#triggerDialogue').click(function() {
      $.blockUI({ message: $('#confirmDialogue') });
    });
  });
</script>
</body>
</html>

@Owen - many thanks for that. I had to make a wee change in the .modalPopup CSS class in Matt's stylesheet to:

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

position: fixed;

....and it works. Much appreciated. I really gotta sit down with my O'Reilly CSS book which I never get a chance to read some night....:)

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

4 个解决方案

#1

8  

hmm i'm not that familiar with blockUI, but the basics of centering a div are pretty universal. i'm assuming you want your #confirmDialogue div centered within the whole screen?

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

if so, you want to do a few things:

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

#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;
}

now your jQuery:

现在你的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...
});

basically, you want to fix the position of your #confirmDialogue (so that you can position it relative to the size of your window/document. left and top declarations are calculated based on the elements current height/width, and the window's height and document width.

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

#2

3  

Take a look at this jQuery MSG plugin. It is very light weight and easy to use.

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

Example code

// 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' });

more options please see this demo

更多选项请看这个演示

full documentation please take a look at this post. download and source code links are included in the post.

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

Or if you just want to centralize some DOM element you can also try this plugin

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

#3

2  

You might find some useful info here. Using jQuery to center a DIV on the screen

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

#4

2  

you could also try out jquery ui dialog http://jqueryui.com/demos/dialog/

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

#1

8  

hmm i'm not that familiar with blockUI, but the basics of centering a div are pretty universal. i'm assuming you want your #confirmDialogue div centered within the whole screen?

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

if so, you want to do a few things:

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

#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;
}

now your jQuery:

现在你的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...
});

basically, you want to fix the position of your #confirmDialogue (so that you can position it relative to the size of your window/document. left and top declarations are calculated based on the elements current height/width, and the window's height and document width.

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

#2

3  

Take a look at this jQuery MSG plugin. It is very light weight and easy to use.

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

Example code

// 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' });

more options please see this demo

更多选项请看这个演示

full documentation please take a look at this post. download and source code links are included in the post.

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

Or if you just want to centralize some DOM element you can also try this plugin

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

#3

2  

You might find some useful info here. Using jQuery to center a DIV on the screen

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

#4

2  

you could also try out jquery ui dialog http://jqueryui.com/demos/dialog/

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

标签：

相关文章