How to make a white popup text box appear after clicking a button?

Question

so right now, I have many buttons on a webpage. Most of these buttons contain one url which when clicked directly sends you to the webpage with the url. Some buttons, however, consist of multiple urls. For these buttons, I would like a white text box with the list of urls to appear after the user clicks the button. Separating these multiple urls buttons into single url buttons is not an option.

I've looked into System.Windows.Forms.MessageBox. but that does not produce desirable results.

I appreciate any help I can get. Thanks in advance.

Answer 1

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