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

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>

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

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

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

在 cmets 之后编辑：

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

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;
}