jQuery UI 的 dialog()函数弹层，如何让层一直在屏幕的最中间，且不随滚动条的滚动而被挡住，就是一直在屏幕中间，请问如何实现，我用了 $("#dv_dialog").dialog({
autoOpen: false,
dialogClass: "my-dialog",
width: 400,
height: 500,
modal: true,
position: [600,600],
resizable: false
});可是没有效果啊！
autoOpen: false,
dialogClass: "my-dialog",
width: 400,
height: 500,
modal: true,
position: [600,600],
resizable: false
});可是没有效果啊！
<head>
<style>
body
{
font-size: 12px;
}
</style> <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js " type="text/javascript"></script> <script type="text/javascript">
(function() {
$.extend($.fn, {
mask: function(msg, maskDivClass) {
this.unmask();
// 参数
var op = {
opacity: 0.8,
z: 10000,
bgcolor: '#ccc'
};
var original = $(document.body);
var position = { top: 0, left: 0 };
if (this[0] && this[0] !== window.document) {
original = this;
position = original.position();
}
// 创建一个 Mask 层，追加到对象中
var maskDiv = $('<div class="maskdivgen"> </div>');
maskDiv.appendTo(original);
var maskWidth = original.outerWidth();
if (!maskWidth) {
maskWidth = original.width();
}
var maskHeight = original.outerHeight();
if (!maskHeight) {
maskHeight = original.height();
}
maskDiv.css({
position: 'absolute',
top: position.top,
left: position.left,
'z-index': op.z,
width: maskWidth,
height: maskHeight,
'background-color': op.bgcolor,
opacity: 0
});
if (maskDivClass) {
maskDiv.addClass(maskDivClass);
}
if (msg) {
var msgDiv = $('<div style="position:absolute;border:#6593cf 1px solid; padding:2px;background:#ccca"><div style="line-height:24px;border:#a3bad9 1px solid;background:white;padding:2px 10px 2px 10px">' + msg + '</div></div>');
msgDiv.appendTo(maskDiv);
var widthspace = (maskDiv.width() - msgDiv.width());
var heightspace = (maskDiv.height() - msgDiv.height());
msgDiv.css({
cursor: 'wait',
top: (heightspace / 2 - 2),
left: (widthspace / 2 - 2)
});
}
maskDiv.fadeIn('fast', function() {
// 淡入淡出效果
$(this).fadeTo('slow', op.opacity);
})
return maskDiv;
},
unmask: function() {
var original = $(document.body);
if (this[0] && this[0] !== window.document) {
original = $(this[0]);
}
original.find("> div.maskdivgen").fadeOut('slow', 0, function() {
$(this).remove();
});
}
});
})();
</script></head>
<body style="width: 100%">
测试
<div id="test" style="width: 200px; height: 100px; border: black 1px solid;">
</div>
<a href="#" onclick="$('#test').mask('DIV层遮罩')">div遮罩</a> <a href="#" onclick="$('#test').unmask()">
关闭div遮罩</a> <a href="#" onclick="$(document).mask('全屏遮罩').click(function(){$(document).unmask()})">
全部遮罩</a>
</body>
</html>