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

Posted 2023-02-22

【中文标题】在同一页面内以小尺寸打开一个新窗口

【英文标题】：open a new window inside same page in a small size

【发布时间】：2012-03-18 21:49:35

【问题描述】：

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

有什么建议

【问题讨论】：

“新页面（窗口）”是指模态窗口吗？

【参考方案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>

【讨论】：

+1 为您的答案，但我怎样才能通过指定它的位置将该窗口置于中间位置？

感谢mindandmedia。 @tom on the window.open 您可以指定左侧和顶部偏移量，您希望将其设为浏览器大小/2 减去弹出窗口大小的一半，即 (browser-width/2)-(popup-width/2)。 left 和 top 的指定方式与我的示例中的宽度参数相同。 screen.width 和 screen.height 应该得到浏览器的分辨率

应该提到，在 onsubmit 事件中，您可能希望将 window.open 引用移动到您自己的函数中，因此在函数中您可以执行 screen.width 和 screen.height 然后调用 window .open 使用计算值，例如 onsubmit="openWindow(100,300);"然后在页面的

中有一个 openWindow 函数

好的，这里错误来了，你能编辑你的代码，以便我可以看到中间位置的新窗口吗？

【参考方案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;

【讨论】：

你绝对可以让它工作，只是想告诉你，你可以打电话给window.open打开一个新窗口。

是表单参数值，调用方式和已经调用的一样。

对不起，我不明白那个评论，请改写

我对asp不熟悉，但是如果我有一个文本字段，并且我想在弹出窗口中获取文本字段值，那么我调用文本字段的方式就像我们调用的一样在php$_POST['text_field'] 中，或者我们将其传递到弹出网址上，例如/newwindow.php?text=sometext

+1 用于 jQuery 对话框。我讨厌打开新窗口而不是“假”窗口的页面