如何使弹出窗口具有相对大小？答案

【问题标题】：How can I get a popup to be a relative size?如何使弹出窗口具有相对大小？
【发布时间】：2017-05-11 10:55:05
【问题描述】：

我希望在新窗口中打开外部链接，这对用户来说是显而易见的，因此希望弹出窗口的大小与父窗口的相对大小。最初我只是使用了目标属性，但后来开始使用这样的东西：

<a href="http://example.org"  
onclick="window.open(this.href,'window','width=810,height=480,location=0, resizable, scrollbars, toolbar=0, menubar=0') ;return false;">example.org</a>

但我只能让它与像素值一起使用，并且我想让弹出窗口的宽度和高度相对于设备的屏幕尺寸 (%)。看起来很简单，但我在网上找不到任何简单解释如何做的东西。任何人都可以帮忙吗？提前致谢。

编辑这是一个样板页面：

<?php 
require("docHead.php"); 
?> this includes everything needed at the head of a document
<title>...</title> varies with the page
</head> 
<body>
<?php 
require("bannerMenu.php"); 
?> navigation etc
<div id="..">
  <div id="..">
        <h1>...</h1>
        <h2>...</h2> 
        Ipsum lorem etc <a href=.....>
        <?php
        require("footer.php"); 
        ?>
  </div>
</div>
</body>    
</html>

【问题讨论】：

请分享您到目前为止所尝试的内容
嗨，克里斯，我尝试编辑表达式以使用 % 但这不起作用，我在网上搜索了相关信息，但没有发现任何有用的信息。有什么建议么？也许我认为简单的事情实际上很复杂，我需要从其他地方开始......不知道还能说什么。 ps也许你阅读帖子时我附加的代码没有显示 - 但我至少可以正常工作（虽然没有更简单的方法吗？）
例如，我读过stackoverflow.com/questions/4316019/…，但不理解它，并认为它可能在谈论不同的情况。

标签： javascript html popup

【解决方案1】：

编辑使用 JavaScript。 window.inner/outer 宽度/高度

    <script>
        var features =' width=' + window.outerWidth/2 + ', height=' + window.outerHeight/2 + ',location=0, resizable, scrollbars, toolbar=0, menubar=0';
    </script>

<a href="https://example.org" onclick="window.open(this.href,'window', features) ;return false;">example.org</a>

【讨论】：

谢谢@Andrius，我应该在文档的哪个位置设置 width=window.outerWidth, height=window.outerHeight 值？
@talvi 我添加到您的示例中 width=window.outerWidth, height=window.outerHeight
嗨！我的意思是如何使这些值占可用屏幕或窗口的 50%？例如，我假设仅使用 window.outerWidth 作为变量将弹出窗口的宽度设置为父窗口宽度的 100%？
好的。然后像这样使用它。 @talvi example.org" onclick="window.open(this.href,'window', features) ;return false;">example.org 用你的窗口创建变量特征。在那里你可以设置 window.outerWidth/2
Great Andrius，所以脚本设置了一个名为 features 的变量的值，还包括我用于 <a> 标签的其他变量，例如菜单栏？那么这个变量附加到onclick参数window.open(this.href,'window',FEATURES？我读对了吗？该站点使用带有php require 语句的模块化设计。脚本必须放在文档中的某个特殊位置吗？

【解决方案2】：

var testDiv = document.getElementById('test');

testDiv.onclick = function(){
    var xVal = .5 * window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    var yVal = .5 * window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

    window.open('http://google.com','Title','width = ' + xVal + ',' + ' height = ' + yVal );
};

【讨论】：

嗨 Luddens Desir，感谢您所做的一切。我使用 javascript 只是因为目标属性不能做我想做的事，但实际上我只知道 HTML 和 CSS。我在哪里/如何将您建议的代码插入到文档中？它看起来有点超出我的能力:(
在您的文档底部，在您的结束正文标记之前，只需插入几个标记，其中包含代码。如果您不使用 jQuery，它是一个预先编写的 js 代码库，可以更轻松地操作文档，只需使用我上面提到的 noJQ 代码。我删除了 jQuery 代码，然后修改了代码，以便它代表经过测试并正在为我工作的代码。 :)
对不起，我不明白这一点。无论如何，我按照您的建议做了（将上面的代码剪切并粘贴到仅替换 URL 的文档正文中）但是 - 好吧，文档中没有可以由脚本处理的链接，所以我想我需要调整标记，以便它找到告诉它在半尺寸窗口中打开该链接的脚本？但是怎么做呢？
您需要在您的正文 div 的结束标记之前将您的 html 文件中脚本标记中的代码包围起来。做了一个短视频：youtube.com/watch?v=ctqtyCVmqsk&feature=youtu.be
哇，这对我来说是第一次。谢谢！遗憾的是由于某种原因我无法打开它:( 但是你写的是我所做的。