单击按钮后如何显示白色弹出文本框?

时间:2016-03-10 22:12:47

标签: c# html asp.net user-interface popup

所以现在,我在网页上有很多按钮。这些按钮中的大多数都包含一个URL,当点击它时会直接将您带到带有URL的网页。但是,有些按钮由多个网址组成。对于这些按钮,我想要一个白色文本框,其中包含用户单击按钮后的网址列表。将这些多个网址按钮分隔为单个网址按钮不是一种选择。

我查看了System.Windows.Forms.MessageBox。但这不会产生理想的结果。

我感谢任何帮助。提前谢谢。

1 个答案:

答案 0 :(得分:0)

隐藏的复选框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>
&#13;
&#13;
&#13;