我正在建立一个网页模板,并对模态弹出进行了一些修改,如下所示:
<div class="modal fade" id="myModal4" tabindex="-1" role="dialog" style="background-color:#FECE1A;display:none;width:750px;left:46%" aria-hidden="true">
<div class="modal-dialog">
<script>
$("#myModal4").on("show", function () {
$("body").addClass("modal-open");
}).on("hidden", function () {
$("body").removeClass("modal-open")
});
</script>
<!--Modal Content-->
</div>
</div>
和body.modal-open css函数就像这样
body.modal-open {
overflow: hidden;
}
弹出窗口工作正常。问题是每当弹出窗口出现时,我仍然可以单击模板的标题菜单和后台的一些链接。如何在后台禁用所有内容,以便我只能单击弹出窗口中的可用内容。
答案 0 :(得分:4)
你可以使用叠加 - 另一个div覆盖html的屏幕的整个大小,并在身体上留下半透明的灰色阴影。
在此示例中,使用两个div。
一个是叠加层,另一个(为方便起见,在叠加层内)是模态。
<div class="overlay">
<div class="modal">
This is the modal. You can put whatever you like in here.
</div>
</div>
现在叠加需要样式:
.overlay {
position: fixed; /* Positioning and size */
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(128,128,128,0.5); /* color */
display: none; /* making it hidden by default */
}
并且模态也需要一些:
.modal {
position: fixed; /* positioning in center of page */
top: 50vh;
left: 50vw;
transform: translate(-50%,-50%);
height: 400px; /* size */
width: 600px;
background-color: white; /* background color */
}
将jQuery包括在内:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
代码顶部的head标记。
然后,使用此按钮打开模态:
<button onclick="$('.overlay').show();">Open modal</button>
这个jQuery代码可以捕获叠加层而不是它的子窗口。
$('.overlay').on('click', function(e) {
if (e.target !== this) {
return;
}
$('.overlay').hide();
});
$('.overlay').on('click', function(e) {
if (e.target !== this) {
return;
}
$('.overlay').hide();
});
&#13;
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(128,128,128,0.5);
display: none;
}
.modal {
position: fixed;
top: 50vh;
left: 50vw;
transform: translate(-50%,-50%);
height: 400px;
width: 600px;
background-color: white;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<a href="https://www.google.co.uk">This is a link, but with the modal open you can't click it!</a>
<br>
<br>
<button onclick="$('.overlay').show();">Open modal</button>
<div class="overlay">
<div class="modal">
This is the modal. You can put whatever you like in here.
</div>
</div>
&#13;
答案 1 :(得分:2)
一个简单的解决方案是添加一个覆盖背景的<div>
,位于弹出窗口下方,但位于所有其他内容之上。
以下是我想象你想要做的一个非常简单的例子。希望您能够根据自己的情况进行调整。
function openModal() {
$("#overlay").css({"display":"block"});
$("#modal").css({"display":"block"});
}
#modal {
position:fixed;
left:50%;
top:50%;
transform:translate(-50%, -50%);
border:solid 1px #000;
display:none;
background-color:#fff;
}
#overlay {
position:fixed;
left:0;
top:0;
width:100vw;
height:100vh;
display:none;
background-color:#000;
opacity:0.5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Awesome Content!
<button onclick="openModal()">Open Modal!</button>
<div id="overlay"></div>
<div id="modal"><h1>Modal Content!</h1></div>
#overlay
div位于#modal
div之前 - 这就是我将模态设置在顶部的方式。或者,您可以在CSS中使用z-index
;
此处不需要opacity
值,它仅用于演示叠加层相对于页面/模态的位置;
这里的实施细节都不重要。 JavaScript应该不重要,我的大部分CSS都不应该。这个例子只是为了指出你正确的方向。
答案 2 :(得分:0)
以下是使用CSS属性pointer-events
(https://developer.mozilla.org/en/docs/Web/CSS/pointer-events)的示例。
示例:https://codepen.io/zvona/pen/YxQzEO
关键的想法是在模态打开时为身体pointer-events: none;
。但是,您希望与之互动的具体元素应具有以下内容: pointer-events: auto;
。
在示例中,您可以在隐藏对话框时单击两个按钮,但在显示对话框时仅单击切换对话框按钮。