如何使我的鏈接打開“彈出”窗口

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>

我想要做的是在一個小窗口中打開，並獲得有關該主題的更多信息。 我只是簡單地看過JavaScript，所以如果有一種簡單的方法可以在沒有JScript的情況下做到這一點，那將是更好的選擇。 我也需要為另外三個盒子做這個。

編輯：也許我不是很清楚，我根本不想讓用戶離開頁面，使用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>

因此，我現在想知道是否可以使用我的圖像代替按鈕，並更改我的而不是上面使用的段落。

Answer 1

最簡單的HTML方法是使用帶有target屬性的標簽：

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

標記文檔： https : //developer.mozilla.org/zh-CN/docs/Web/HTML/Element/a

Answer 2

這是僅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>

如何使我的鏈接打開“彈出”窗口

問題描述

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