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

Question

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

What I want this to do is open in a small window, and have more information on the topic. 我想要做的是在一个小窗口中打开，并获得有关该主题的更多信息。 I've only looked briefly at JavaScript, so if there's an easy way to do this without JScript it would be preferable. 我只是简单地看过JavaScript，所以如果有一种简单的方法可以在没有JScript的情况下做到这一点，那将是更好的选择。 I need to do this for 3 other boxes too. 我也需要为另外三个盒子做这个。

EDIT: Maybe I wasn't very clear, I don't want to user to leave the page, at all, using Chrome I know that popups open in the small dialogue box, this is what I want the information to be provided by. 编辑：也许我不是很清楚，我根本不想让用户离开页面，使用Chrome，我知道弹出对话框会在小对话框中打开，这就是我希望提供的信息。 If this isn't possible, is there a way that I could change the information in the main text area, without changing the page? 如果无法做到这一点，有没有办法可以在不更改页面的情况下更改主文本区域中的信息？

EDIT 2: OK so I found this on W3Schools.com : 编辑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>

So I'm now wondering if it would be possible to use my image in substitute to the button, and change my instead of the paragraph used above. 因此，我现在想知道是否可以使用我的图像代替按钮，并更改我的而不是上面使用的段落。

Answer 1

The easy HTML way to do this is to use a tags with the target attribute: 最简单的HTML方法是使用带有target属性的标签：

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

A tag documentation: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a 标记文档： https : //developer.mozilla.org/zh-CN/docs/Web/HTML/Element/a

Answer 2

Here is a CSS-only example of how you can click-to-reveal a (usually hidden) element which can then display more information. 这是仅CSS的示例，说明如何单击以显示一个（通常是隐藏的）元素，然后可以显示更多信息。

No javascript needed! 无需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>

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

问题描述

2 个解决方案

解决方案1
1 2015-11-08 13:14:19

解决方案2
0 已采纳 2015-11-08 13:27:51

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

问题描述

2 个解决方案

解决方案1 1 2015-11-08 13:14:19

解决方案2 0 已采纳 2015-11-08 13:27:51

解决方案1
1 2015-11-08 13:14:19

解决方案2
0 已采纳 2015-11-08 13:27:51