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

标签 javascript html css ajax jsp

所以这里我想用JavaScript调用一个child.jsp作为模型。以前我访问子 jsp 为 showmodaldialog and window.open()使用 JavaScript。它有效,但它在另一个窗口中打开。我想要模式或覆盖 View 中的子 jsp。请帮我解决这个问题。提前致谢。

当函数 showModDilog()被调用时,子 jsp 应该处于模态视图或具有更新值的覆盖 View 中。

另一方面,我也可以使用这个 (<%@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>

最佳答案

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

关于javascript - 如何使用 JavaScript 将 child.jsp 转换为模式或覆盖?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59530178/

相关文章:

javascript - 正则表达式 - 查找所有以 $_ 开头且位于模板字符串之间任意位置的单词

javascript - Angular js-在 ngResource 中设置 header

javascript - 如何将以下一系列 for 循环缩小为不太紧凑的代码?

jquery - 为什么我的页面比 <html> 元素高?

html - 两个之间的一个 div,两边的两个都需要碰到浏览器的边缘

html - 使用 XSLT 识别特定的 XHTML 单元格,并在找到它们后修改它们的属性

javascript - Vue 内联返回方法

html - 如何将多个 CSS 文件编译成一个 zip/tar 文件并将它们包含在 HTML 页面标记中?

php - 如何在 mPDF 中使用 bootstrap?

javascript - 如何使用 javascript 在 div 内容中添加 <li> View 限制?