Kev*_*Kev 13 javascript css jquery blockui
我正在尝试转换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知识.
无论如何,任何建议和指导真的非常有用.如果我们见面的话,我甚至会鼓励那些有希望买啤酒的人买的东西:)
<!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书,我从来没有机会读过一些晚上.... :)
嗯,我不熟悉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声明都是基于元素计算的当前高度/宽度,窗口的高度和宽度的文件.
| 归档时间： |
|
| 查看次数： |
25814 次 |
| 最近记录： |