我如何得到一个DIV中心在一个页面上使用jQuery和blockUI？ [英] How can I get a DIV to centre on a page using jQuery and blockUI?
问题描述
我想转换Matt Berseth的 YUI风格是/否确认对话框'，所以我可以使用它与jQuery的blockUI插件。
I'm trying to convert Matt Berseth's 'YUI Style Yes/No Confirm Dialog' so I can use it with the jQuery blockUI plugin.
我不得不承认我没有CSS大师，但我认为这将是很容易， ....除了10小时后，我很失去，为什么我不能得到被炸的东西工作。
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.
问题是，我似乎不能得到'confirmDialogue'DIV在页面的中心，没有上面显示一些工件。或者，如果我通过执行...来重置blockUI的CSS设置：
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 = {};
.....我发现DIV左对齐。
.....I find that the DIV aligns left.
我尝试过各种各样的东西，但CSS不是我的强点是一个服务器端的应用程序家伙：（
I've tried all sorts of stuff but CSS isn't my strong point being a server side app kinda guy :(
在那里有一个jQuery / blockUI / 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?
基本上我跟着在Matt的博客上的设计模板和HTML看起来像下面的东西（CSS从Matt的样本没有改变）。您可以从完整的示例项目下载
'sprite'文件 http://mattberseth2.com/downloads/yui_simpledialog.zip - 这是一个.net项目，但我只是想让这个工作在一个简单的html文件，所以没有.NET的知识需要。
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.
无论如何任何建议和指导将真的真的非常有用，我甚至奖励购买promising购买如果我们见面的话，你可以把啤酒捆绑起来。）
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 - 非常感谢。我不得不在Matt的样式表中将.modalPopup CSS类更改为：
@Owen - many thanks for that. I had to make a wee change in the .modalPopup CSS class in Matt's stylesheet to:
position: fixed;
....非常感激。我真的得坐下来与我的 O'Reilly CSS书，我从来没有机会读一些night ....：）
....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....:)
推荐答案
hmm我不熟悉blockUI，但是div的中心基础相当普遍。我假设你希望你的 #confirmDialogue div在整个屏幕的中心？
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?
如果是，做几件事：
#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：
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...
});
基本上，你想修正 #confirmDialogue left 和顶部（这样可以根据窗口/文档的大小来定位。声明基于当前高度/宽度，窗口的高度和文档宽度计算。
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.
这篇关于我如何得到一个DIV中心在一个页面上使用jQuery和blockUI？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
