如何使用 jQuery 和 blockUI 让 DIV 在页面上居中？

发布于 2024-07-08 07:30:01 字数 4125 浏览 11 评论 0原文

我正在尝试转换 Matt Berseth 的 'YUI 样式是/否确认对话框 ' 这样我就可以将它与 jQuery blockUI 插件一起使用。

我不得不承认我不是 CSS 专家，但我认为这对我来说也很容易......除了 10 小时后我不知道为什么我不能让这个该死的东西工作。

问题是，我似乎无法让“confirmDialogue”DIV 在页面上居中，而不在其上方显示一些工件。或者，如果我通过执行以下操作重置 blockUI 的 CSS 设置...：

$.blockUI.defaults.css = {};

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

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

所以如果有人是 jQuery/blockUI/CSS 向导阅读这篇文章...请你尝试一下让我知道我出了什么问题？

基本上我遵循了 Matt 博客上的设计模板，HTML 看起来像下面的内容（CSS 与 Matt 的示例相同），您可以从完整示例中获取 png 'sprite' 文件。项目下载地址 http://mattberseth2.com/downloads/yui_simpledialog.zip - 它是一个 . net 项目，但我只是想让它在一个简单的 html 文件中工作，所以不需要 .NET 知识。

无论如何，任何建议和指导都会非常非常有用，我什至会激励购买承诺为您购买捆绑。如果我们见面的话，请喝啤酒:)

<!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 - 非常感谢。我必须对 Matt 样式表中的 .modalPopup CSS 类进行微小的更改：

position: fixed;

...并且它有效。非常感激。我真的得坐下来看看我的 O'Reilly CSS 书，我从来没有机会读过一些夜晚....：）

原文

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

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.

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....:

$.blockUI.defaults.css = {};

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

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

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?

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.

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:

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....:)

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

星軌x 2024-07-15 07:30:01

嗯，我对 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 声明是根据元素当前高度/宽度以及窗口的高度和文档宽度计算的。

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?

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:

$('#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.

回复收藏 0 原文

溇涏 2024-07-15 07:30:01

看看这个 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' });

更多选项请参阅此演示

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

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

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

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

回复收藏 0 原文