时间戳

首页 > 解决方案 > 如何使用 JavaScript 将 child.jsp 转换为模态或覆盖？

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

问题描述

所以在这里我想调用一个 child.jsp 作为使用 JavaScript 的模型。以前我showmodaldialog and window.open()使用 JavaScript 访问子 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);
        }
    }

.css 在子 jsp 中使用

.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>

标签： javascripthtmlcssajaxjsp

解决方案

假设您的 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();

推荐阅读