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

时间:2012-02-29 11:51:21

标签: javascript jquery window

我有一个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>

请提出任何想法

2 个答案:

答案 0 :(得分:3)

下面应该使用你的示例代码,认为你正在寻找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>

答案 1 :(得分: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);

现在设置动态添加的div这样的样式(css),你看到了一个窗口:

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