我正在开发一个基于 HTML、JQuery 和 CSS 的网页，我想在其中使用简单的 div 标签打开弹出窗口。我想在弹出窗口打开时禁用后台的所有内容。这意味着虽然弹出 div 对用户可见，但他或她不应该能够单击网页上的任何其他内容（弹出窗口后面或背景中的任何内容）。
以下是我正在尝试做的事情。我通过单击 HTML 按钮 (#but1) 打开弹出窗口，并通过应用以下 jquery- 使用按钮 (#but2) 关闭它
$(document).ready(function(){
$("#but1").click(function(){
$("#popdiv").fadeTo(200,1);
});
$("#but2").click(function(){
$("#popdiv").fadeOut(200);
});
});
弹出 div 的 CSS 是 -
#popdiv
{
height:300px;
width:420px;
background-color:#97ceaa;
position:fixed;
top:200px;
left:250px;
display:none;
}
我想在网页上出现我的弹出 div 后禁用背景。我的弹出窗口出现后，鼠标效果应该被禁用，并且用户不应该能够单击/悬停网页上的任何其他内容（在弹出窗口的背景中）。用户需要关闭弹出窗口才能访问网页。我怎样才能实现这个目标？是否可以只使用 CSS 来做到这一点？
只需将其放入另一个填充页面的容器中（并显示）：
$(function() {
$("#but1").click(function() {
$(".fullscreen-container").fadeTo(200, 1);
});
$("#but2").click(function() {
$(".fullscreen-container").fadeOut(200);
});
});
.fullscreen-container {
display: none;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(90, 90, 90, 0.5);
z-index: 9999;
}
#popdiv {
height: 300px;
width: 420px;
background-color: #97ceaa;
position: fixed;
top: 50px;
left: 50px;
}
body {
padding-top: 65px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="but1">Open dialog</button>
<div class="fullscreen-container">
<div id="popdiv">
<h1>
Dialog content!
</h1>
<button id="but2">Close dialog</button>
</div>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
