Как сделать белое всплывающее текстовое поле после нажатия кнопки?

Question

Так что прямо сейчас у меня есть много кнопок на веб-странице. Большинство этих кнопок содержат один URL-адрес, который при нажатии напрямую отправляет вас на веб-страницу с URL-адресом. Однако некоторые кнопки состоят из нескольких 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>