单击按钮后如何使白色弹出文本框出现？

Question

所以现在，我在网页上有很多按钮。这些按钮中的大多数都包含一个 URL，单击该 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>