我有一个链接标签,点击它给出了另一个JSP javascript:弹出对话框。我需要用一个透明的页面来阻止这个弹出对话框后面的页面,以禁用父页面上的控件。
这是我的链接
<a href="javascript:popupDialog('<c:url value="/addConfiguration" />', 'configDiv')" >click to add new configuration </a>
将此代码添加到html的底部,就在关闭</body>
标记之前。(如果你愿意,你可以把CSS放在另一个文件中,以便更好地组织)。
<div id="page-blocker"></div>
<style type="text/css">
#page-blocker{
position: absolute;
position: fixed;
top: 0px;
left: 0px;
height: 100vh; /* View-port height */
width: 100%;
background-color: #000;
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
display: none;
z-index: 999;
}
</style>
现在可以调用$('#page-blocker').show();
来阻塞页面,调用$('#page-blocker').hide();
来解除阻塞页面。在popupDialog()
函数和隐藏对话框的函数中使用它。
注意:如果页面上有其他绝对定位元素,您可能需要将此拦截器的z-index
设置为999。而弹出框的z-index为1999