jquery 怎么设置 像alert 提示框后面的背景变为不能操作 那样的效果只能点击提示框
展开全部
这种效果一般是在页面添加一个 div (mask) 遮盖所有元素，它的 z-index 必须高于其它元素。自定义的 alert 提示框要高于 mask。下面是个完整的代码，可以直接复制粘贴测试。
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="gb2312" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(function() {
// 在页面添加 mask
var mask = function() {
$('<div id="mask" style="width: ' + $(window).width() + 'px; '
+ 'height: ' + $(window).height() + 'px;"></div>').appendTo("body");
};
// 窗口大小变化，调整 mask 大小
$(window).on("resize", function() {
if($("#mask").length) {
$("#mask").css({
width: $(window).width(),
height: $(window).height(),
opacity: 0
});
}
});
// 测试
$("#test").on("click", function() {
// 调用 mask，遮盖全部
mask();
// alert
$('<div id="alert"><p>alert</p>' +
'<input type="button" id="ok" value="确定" /></div>').appendTo("body");
});
// 只有点击 alert 中的按钮 mask 才会被移除
$(document).on("click", "#ok", function() {
$("#mask, #alert").remove();
});
});
</script>
<style type="text/css">
#alert {
width: 200px;
left: 50%;
margin-left: -100px;
text-align: center;
top: 100px;
background: #eee;
position: absolute;
z-index: 10000;
}
#mask {
background: #000;
opacity: 0;
position: fixed;
z-index: 9999;
top: 0;
left: 0;
}
</style>
</head>
<body>
<input type="text" value="foo" /><select><option>bar</option></select>
<a href="#" id="test">测试 mask</a>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="gb2312" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(function() {
// 在页面添加 mask
var mask = function() {
$('<div id="mask" style="width: ' + $(window).width() + 'px; '
+ 'height: ' + $(window).height() + 'px;"></div>').appendTo("body");
};
// 窗口大小变化，调整 mask 大小
$(window).on("resize", function() {
if($("#mask").length) {
$("#mask").css({
width: $(window).width(),
height: $(window).height(),
opacity: 0
});
}
});
// 测试
$("#test").on("click", function() {
// 调用 mask，遮盖全部
mask();
// alert
$('<div id="alert"><p>alert</p>' +
'<input type="button" id="ok" value="确定" /></div>').appendTo("body");
});
// 只有点击 alert 中的按钮 mask 才会被移除
$(document).on("click", "#ok", function() {
$("#mask, #alert").remove();
});
});
</script>
<style type="text/css">
#alert {
width: 200px;
left: 50%;
margin-left: -100px;
text-align: center;
top: 100px;
background: #eee;
position: absolute;
z-index: 10000;
}
#mask {
background: #000;
opacity: 0;
position: fixed;
z-index: 9999;
top: 0;
left: 0;
}
</style>
</head>
<body>
<input type="text" value="foo" /><select><option>bar</option></select>
<a href="#" id="test">测试 mask</a>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
用jquery的插件：jqmodal
初始化时设置：
$('#dialogId').jqm({ modal: true });
初始化时设置：
$('#dialogId').jqm({ modal: true });
追问
我不是要dialog 我要的是这种效果 怎么实现的
追答
alert也是弹出一个对话框，只是这个对话框里只有一个按钮而已，
jqmodal设置modal: true后，后面的背景就无法操作了，只能操作对话框里的东西
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
window.showModalDialog("yourhtml.htm",obj,"dialogWidth=200px;dialogHeight=100px");
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
