13

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

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

问题是我似乎无法让 'confirmDialogue' DIV 在页面上居中，而上面没有显示一些工件。或者，如果我通过这样做重置 blockUI 的 CSS 设置......：

$.blockUI.defaults.css = {};

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

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

因此，如果有任何 jQuery/blockUI/CSS 向导阅读此内容的人...请您试一试，让我知道我做错了什么吗？

基本上我遵循了马特博客上的设计模板，HTML 看起来像下面的东西（CSS 与马特的示例没有变化）。您可以从http://mattberseth2.com/downloads/yui_simpledialog.zip的完整示例项目下载中获取 png 'sprite' 文件- 这是一个 .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 书，我从来没有机会在某个晚上阅读.... :)

4

4 回答 4

8

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

于 2008-11-16T23:10:15.023 回答
3

看看这个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 元素，你也可以试试这个插件

于 2011-04-07T10:40:31.190 回答
2

您可能会在这里找到一些有用的信息。使用 jQuery 使 DIV 在屏幕上居中

于 2008-11-17T00:00:40.820 回答
2

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

于 2010-02-25T12:10:01.080 回答