如何使我的鏈接打開一個「彈出」窗口

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

所以現在我想知道是否有可能使用我的形象在替補按鈕，並改變了我，而不是段落以上使用。

來源

2015-11-08 Charlie Johnson

基本上你要打開的信息一個div上懸停什麼聯繫呢？ –

@ShudhanshShekhar Sorta，但不是懸停，我希望當他們點擊它。 –

閱讀此主題：http://stackoverflow.com/questions/11023816/toggle-divs-without-using-javascript –

這裏是一個CSS-只有你如何能如點擊顯示一個（通常是隱藏的）元素，可以顯示更多信息。

No javascript needed！

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

來源

2015-11-08 13:27:51 Rounin

這正是我所需要的，非常感謝Rounin。有沒有辦法切換這個？或者直到用戶刷新頁面纔會在那裏？ –

一旦瀏覽器url在其末尾有一個'＃片段'，你就無法擺脫它 - 只能將它換成另一個'＃片段'（通過點擊另一個頁面內的錨點）。留在頁面上並擺脫＃＃片段（沒有javascript）的唯一方法是刷新頁面。 – Rounin

最簡單的HTML的方式來做到這一點是使用標籤與目標屬性：

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

的標籤文檔：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a

來源

2015-11-08 13:14:19 socketwiz

我在網站的其他部分使用了''標記，但我仍然需要創建一個新的網頁作爲'href'。有沒有辦法改變當前html頁面上的文字，還是必須爲每個故事創建一個新頁面？ –

您必須將HTML放在新的頁面或現有的頁面上。你最初的問題是「我想要做的是在一個小窗口中打開」。爲了做到這一點，你需要一個新的頁面。 – socketwiz

如何使我的鏈接打開一個「彈出」窗口

回答

相關問題