如何使用 JavaScript 将 child.jsp 转换为模态或覆盖？答案

【问题标题】：How to convert a child.jsp as modal or overlay using JavaScript?如何使用 JavaScript 将 child.jsp 转换为模态或覆盖？
【发布时间】：2020-04-19 03:51:56
【问题描述】：

所以在这里我想使用 JavaScript 调用 child.jsp 作为模型。以前我使用 JavaScript 以 showmodaldialog and window.open() 的身份访问子 jsp。它可以工作，但它正在另一个窗口中打开。我想要模态或覆盖视图中的子 jsp。请帮我解决这个问题。提前致谢。

当函数showModDilog()被调用时，子jsp应该在模态视图或覆盖视图中更新值。

另一方面，我也可以在正文中使用这个(<%@include file="child.jsp" %>) 来包含。但是我传递的值没有在 child.jsp 中更新。

*如果您需要有关此的更多信息，请随时发表评论。非常感谢您的帮助。

//function to call child.jsp from Parent.jsp
function showModDilog(retVal,curVal,curRow,varPreVal)
    {
        var varRetVal = retVal;
        var varCurrentValue = curVal;
        var varCurrentRow = curRow;
        var varPreValue = varPreVal;
        qsUrl ="../FOLDER/ContentShowModalDialog.do?title="+"ORDER NO - "+varRetVal+" ALREADY EXISTS &varCurrentValue="+varCurrentValue+"&varCurrentRow="+varCurrentRow+"&varPreValue="+varPreValue;
        if(navigator.appName =='Microsoft Internet Explorer')
        {
            event.keyCode=0;
        }   
        else
        {
            event.which=0;
        }   
        event.returnValue=0;
        if(getBrowser()=='IE')
        {
            var qsheight ='200';
            var args = new Object;
            args.window = window;
            returnval = showModalDialog(qsUrl, args);
        }
        else
        {
            var args = new Object;
            args.window = window.opener;
            returnval = window.open(qsUrl, args);
        }
    }

在子jsp中使用的.css

.windowModal {
    width: 400px;
    position: relative;
    margin: 10% auto;
    padding: 5px 20px 13px 20px;
    border-radius: 10px;
    background: #fff;
    background: -moz-linear-gradient(#fff, #999);
    background: -webkit-linear-gradient(#fff, #999);
    background: -o-linear-gradient(#fff, #999);
}

.windowModal:target {
    opacity:1;
    pointer-events: auto;
}

.close {
    background: #606061;
    color: #FFFFFF;
    line-height: 25px;
    position: absolute;
    right: 5px;
    text-align: center;
    top: 4px;
    width: 24px;
    text-decoration: none;
    font-weight: bold;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    -moz-box-shadow: 1px 1px 3px #000;
    -webkit-box-shadow: 1px 1px 3px #000;
    box-shadow: 1px 1px 3px #000;
}

.close:hover { background: #00d9ff; }

在子jsp中使用的HTML

 <body class="windowModal" bgcolor="#FFCC99">
    <div class=" close" style="width: 100%;overflow: auto;height: 100%;background-color: #F0E68C;">

        <div  style="margin-top: 1%;">
        <input type="button" class="close" name="Close" value="X" style="width:8%" onclick="winClose();" >
        <label class="labelbold" style="font-weight: bold; float:left;">NAME - &nbsp; </label>
        </div>
    </div>
 </body>

【问题讨论】：

标签： javascript html css ajax jsp

【解决方案1】：

假设您的 css 和 html 用于叠加层的样式，您可以发出 ajax 请求来获取页面数据，然后将其放入父页面中。

使用纯 JavaScript，您可以加载子页面，然后将响应内容放入父 jsp 中的容器中：

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        document.getElementById("idOfContainerInsideParent").innerHTML = this.responseText;
    }
};
xhttp.open("GET", qsUrl, true);
xhttp.send();

【讨论】：