如何让我的链接打开“弹出窗口”

How to make my links open a 'popup' window

本文关键字：窗口 弹出窗口 我的 链接      更新时间：2023-09-26
    <div id="box1"> <a href="#"><img src="images/pskeksmall.jpg" alt="" /></a>
        <h2 class="subtitle">Student Makes our new website</h2>
        <p>We are very proud to announce that our new website was designed and created by Charlie Johnson</p>
        <ul class="contact">
            <li><a href="#" class="icon icon-facebook"><span></span></a></li>
            <li><a href="#" class="icon icon-dribbble"><span>Pinterest</span></a></li>
            <li><a href="#" class="icon icon-tumblr"><span>Google+</span></a></li>
        </ul>
    </div>

我想做的是在一个小窗口中打开，并提供有关该主题的更多信息。我只简要地看了一下JavaScript，所以如果有一个简单的方法可以在没有JScript的情况下做到这一点，那将是可取的。我也需要为其他 3 个盒子执行此操作。

编辑：也许我不是很清楚，我不想让用户离开页面，使用Chrome我知道弹出窗口在小对话框中打开，这就是我希望提供的信息。如果这是不可能的，有没有办法在不更改页面的情况下更改主文本区域中的信息？

编辑2：好的，所以我在 W3Schools.com 上找到了这个：

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
    document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>
<body>
<h1>JavaScript in Head</h1>
<p id="demo">A Paragraph.</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>
</html>

所以我现在想知道是否可以使用我的图像来代替按钮，并更改我的而不是上面使用的段落。

执行此操作的简单 HTML 方法是使用带有目标属性的标记：

<a href="/some/path" target="_blank">Try it</a>

标签文档：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a

这是一个仅限 CSS 的示例，说明如何单击以显示(通常是隐藏的(元素，然后可以显示更多信息。

不需要JavaScript！

.more-info {
 display: none;
 background-color: rgba(255,255,127,1);
 padding: 6px;
 border: 2px solid rgba(127, 0, 0, 1);
 }
#item1:target, #item2:target {
 display: inline-block;
 }
<ul>
  <li><a href="#item1">Click me for more info about Item 1</a></li>
  <li><a href="#item2">Click me for more info about Item 2</a></li>
</ul>
<p id="item1" class="more-info">Now you can read more information about Item 1</p> 
<p id="item2" class="more-info">Now you can read more information about Item 2</p>

相关文章：