如何显示一个javascript:弹出对话框的顶部覆盖，以阻止父页面

how to dispaly a javascript:popup dialog on top of a overlay to block the parent page

本文关键字：覆盖 顶部 对话框 显示 何显示 一个 javascript      更新时间：2023-09-26

我有一个链接标签，点击它给出了另一个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

相关文章：