如何用JavaScript将child.jsp转为模态框或覆盖层视图

旧的showModalDialog已经被标准废弃，window.open会弹出新窗口，而静态<%@include%>又没法实时更新参数——咱们换个思路，用模态遮罩层+AJAX动态加载child.jsp的方式，既能实现覆盖层式的模态效果，又能保证每次都加载最新参数对应的内容。

步骤1：改造Parent.jsp的模态框实现 #

先在Parent.jsp页面末尾添加模态框的基础结构（遮罩层+内容容器），然后重写showModDilog函数，用AJAX动态拉取child.jsp的内容：

<!-- Parent.jsp 页面末尾新增模态框基础结构 -->
<div id="modalOverlay" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:9998;"></div>
<div id="modalContent" style="display:none; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); z-index:9999; max-width:90%; max-height:90%; overflow:auto;"></div>

<script>
function showModDilog(retVal, curVal, curRow, varPreVal) {
    // 保留你原有的阻止默认事件逻辑
    if(navigator.appName =='Microsoft Internet Explorer') {
        event.keyCode=0;
    } else {
        event.which=0;
    }
    event.returnValue=0;

    // 构造带编码参数的URL，避免特殊字符出错
    var qsUrl = "../FOLDER/ContentShowModalDialog.do?title=" + encodeURIComponent("ORDER NO - " + retVal + " ALREADY EXISTS") 
        + "&varCurrentValue=" + encodeURIComponent(curVal)
        + "&varCurrentRow=" + encodeURIComponent(curRow)
        + "&varPreValue=" + encodeURIComponent(varPreVal);

    // 用AJAX加载child.jsp内容
    const xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if(xhr.readyState === 4 && xhr.status === 200) {
            // 将加载的内容插入模态框容器
            document.getElementById('modalContent').innerHTML = xhr.responseText;
            // 显示遮罩层和模态框
            document.getElementById('modalOverlay').style.display = 'block';
            document.getElementById('modalContent').style.display = 'block';
        }
    };
    xhr.open('GET', qsUrl, true);
    xhr.send();
}

// 全局关闭模态框函数，供child.jsp调用
function winClose() {
    document.getElementById('modalOverlay').style.display = 'none';
    document.getElementById('modalContent').style.display = 'none';
}
</script>

步骤2：调整child.jsp的样式和结构 #

原来的child.jsp是按独立页面写的，现在要作为模态框内容，需要去掉<body>标签，调整CSS适配内嵌场景：

<!-- child.jsp 移除<body>标签，保留核心内容和样式 -->
<style>
.windowModal {
    width: 400px;
    padding: 5px 20px 13px 20px;
    border-radius: 10px;
    background: #fff;
    background: linear-gradient(#fff, #999);
    position: relative;
}
.close {
    background: #606061;
    color: #FFFFFF;
    line-height: 25px;
    position: absolute;
    right: 5px;
    text-align: center;
    top: 4px;
    width: 24px;
    font-weight: bold;
    border-radius: 12px;
    box-shadow: 1px 1px 3px #000;
    cursor: pointer;
}
.close:hover {
    background: #00d9ff;
}
.labelbold {
    font-weight: bold;
    float:left;
}
.modal-header {
    width: 100%;
    overflow: auto;
    background-color: #F0E68C;
    margin-top: 1%;
    padding: 8px 0;
    position: relative;
}
</style>

<div class="windowModal">
    <div class="modal-header">
        <input type="button" class="close" name="Close" value="X" style="width:8%" onclick="winClose();" >
        <label class="labelbold">NAME - &nbsp; </label>
        <!-- 在这里添加你需要展示的动态内容，比如从参数获取的订单号、当前值等 -->
    </div>
    <!-- 其他业务内容区域 -->
</div>

关键细节说明 #

1. 参数实时更新：每次调用showModDilog都会重新发起AJAX请求，后台会根据最新参数返回child.jsp的内容，彻底解决静态include无法更新的问题。
2. 模态效果保障：半透明的modalOverlay会覆盖整个页面，阻止用户点击其他区域；modalContent居中显示，完全模拟原生模态框的交互体验。
3. 兼容性：不需要再做浏览器判断，AJAX和CSS3 transform在现代浏览器（包括IE9及以上）都能正常运行。
4. 参数安全：用encodeURIComponent处理参数，避免特殊字符（比如空格、&）导致的URL解析错误。

这样改造后，调用showModDilog时，child.jsp就会以覆盖层模态框的形式展示，再也不会弹出新窗口啦！

内容的提问来源于stack exchange，提问作者S14321K