在同一页内打开一个小尺寸的新窗口

Question

我有一个jsp page，当点击submit button时，一个新的页面在同一页中打开，但我想要的是new page(window)应该打开inside same page，但尺寸要小一些，就像你在许多网站上看到的那样。after clicking submit button a new page will be opened in a less size，如何使用jquery/javascript完成此操作

index.jsp

<form action="newwindow.jsp" target="_self">
<input type="submit value="click here"/>
</form>

有什么想法吗?请

Answer 1

下面的代码应该适用于你的示例代码，认为你正在寻找的是target="_blank"，而不是_self，因为_self是同一个窗口，并且具有完全没有目标值的相同效果。另外，不要认为现在鼓励使用target="_blank“，而且使用选项卡式浏览器，它只会在新的选项卡中打开，而不会重新调整大小。

希望下面的内容能有所帮助

<form target="popup" action="google.com" onsubmit="window.open('', this.target,    'width=300,height=300,resizable,scrollbars=yes'); return true;">
<input type="submit" value="click here"/>
</form>

基于尝试将弹出窗口居中的新示例代码。

我认为这个问题令人困惑，因为它不清楚弹出窗口是否正在访问服务器端的内容，以及它是否需要访问表单内容。根据你的情况，为这个问题提供的另一个答案也可能适合你。下面是我修改过的代码，希望它能有所帮助，但不是百分之百确定，因为上下文有点混乱

<script>
function openWindow(h, w, url) {
  leftOffset = (screen.width/2) - w/2;
  topOffset = (screen.height/2) - h/2;
  window.open(url, this.target, 'left=' + leftOffset + ',top=' + topOffset + ',width=' + w + ',height=' + h + ',resizable,scrollbars=yes');

}
</script>
<form name="form2" id="form2" method="post" action="google.com" onsubmit="openWindow(300, 300, 'google.com');">
<input type="submit" value="click here"/>
</form>

Answer 2

我完全不确定，如果我理解你的问题，但也许这会对你有帮助？

<a class=".openWin" href="_#">click here</a>

$('.openWin').click(function(ev){
    window.open('/newwindow.jsp','Title','width=200,height=400');
    ev.preventDefault();
    return false;
});

如果这不是你所想的，我建议你看看jquery dialog plugin。

在注释后编辑：

也许你正在尝试做一些不需要访问服务器的事情。如果你所需要做的就是打开一个包含表单中的值的“窗口”。您可以像这样访问任何表单字段值...

var formFieldVal = $('input[name="myInput"]).val();

现在您可以(也可以使用jquery)创建一个“窗口”，如下所示：

var divWindow = $('<div class="overlay"><div>' + formFieldVal + '</div></div>');

并将其添加到文档中

$(body).append(divWindow);

现在像这样(css)样式化动态添加的div，你就会得到一个窗口外观：

.overlay {
     visibility: hidden;
     position: absolute;
     left: 0px;
     top: 0px;
     width:100%;
     height:100%;
     text-align:center;
     z-index: 1000;
}

.overlay div {
     width:300px;
     margin: 100px auto;
     background-color: #fff;
     border:1px solid #000;
     padding:15px;
     text-align:center;
}