带按钮的透明弹出/覆盖（JQuery，CSS）

Question

我有一个html网站，我希望在我的主页上看到一个透明的覆盖/弹出窗口，其中包含我上传的图片中的按钮。按其中一个按钮以重定向到特定URL。我该如何创建这个弹出窗口？它应该是通用的，因此我不需要改变我的html结构，也可以通过绑定这个JQuery / CSS在不同的网站上使用它。

我的草图：

Answer 1

我写了一个关于完成这个的例子。您可以使用rgba在颜色中添加alpha（或透明度）。

＆＃13;

＆＃13;

$("body").append(`<div class="popup">
  <ul>
    <li>Ex 1</li>
    <li>Ex 2</li>
    <li>Ex 3</li>
    <li>Ex 4</li>
  </ul>
</div>`)

＆＃13;

body {
  margin:0;
  padding:0;
}

.popup {
  position:fixed;
  top:0;
  left:0;
  z-index:1;
  width:100%;
  height:100%;
  background:rgba(77,77,77,.4);
}

.popup > ul {
  list-style-type:none;
  padding:0;
  margin:0;
  position: absolute;
  top: 50%;
  width:100%;
  transform: translateY(-50%);
}

.popup > ul > li {
  background:green;
  display:inline-block;
  color:black;
  border:2px solid black;
  width:calc(25% - 8px);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

＆＃13;

＆＃13;