單擊按鈕后如何顯示白色彈出文本框？

Question

所以現在，我在網頁上有很多按鈕。 這些按鈕大多數都包含一個網址，當您單擊該網址時，會將其直接發送到帶有該網址的網頁。 但是，某些按鈕包含多個URL。 對於這些按鈕，我希望在用戶單擊按鈕后出現一個帶有URL列表的白色文本框。 不能將這些多個url按鈕分成單個url按鈕。

我研究了System.Windows.Forms.MessageBox。 但這不會產生令人滿意的結果。

感謝您能提供的任何幫助。 提前致謝。

Answer 1

隱藏的復選框CSS：

 html { width: 100%; height: 100%; background: indigo; text-align: center; font-family: arial, sans-serif; } a, a:active, a:visited, a:focus { text-decoration: none; font-weight: bold; color: indigo; } input { display: none; } #target { display: none; } #click:checked ~ label > #target { position: fixed; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); left: 0; right: 0; margin: auto; display: inline-block; height: 80%; width: 80%; background-color: white; outline: 6px double white; } .item { color: white; position: fixed; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); left: 0; right: 0; margin: auto; cursor: pointer; user-select: none; -webkit-user-select: none; } .warning { position: fixed; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); left:0; right:0; margin: auto; } 

 <input type="checkbox" id="click" name="click" value="click" /> <label for="click"> <p class="item"><b>google.com</b></p> <div id=target class="item"><div class=warning> <a href="http://images.google.com">images.google.com</a><br> <a href="http://maps.google.com">maps.google.com</a><br> <a href="http://drive.google.com">drive.google.com</a></div></div> </label>