Question

我有一个使用该功能的登录按钮 -

function showDiv() {
  document.getElementById('SteamLogin').style.display = "none";
  document.getElementById('loadingGif').style.display = "block";
  setTimeout(function() {
    document.getElementById('loadingGif').style.display = "none";
    document.getElementById('showme').style.display = "block";
  }, 2000);
}

显示加载gif，然后取消隐藏div。我想知道是否有一些东西我可以添加到这个功能的结尾，这会使DIV背后显示的所有内容变暗，以引起对弹出窗口的注意。任何当前有关此问题的问题对我来说都没有用，我已经尝试了一切。如果有人有任何想法，我对CSS和HTML都很陌生，所以任何帮助都会被简单地理解。

更新：如果有人可以提供帮助，仍然需要帮助。

我想在显示加载的gif并取消隐藏div之后想要调暗页面的按钮就在这里，我想在div后面调暗一切。

<input class="btn_green_white_innerfade btn_medium" type="button" 
name="submit" id="userLogin" value="Sign in" width="104" height="25" 
border="0" tabindex="5" onclick="showDiv();">
            <div class="mainLoginLeftPanel_signin">

Answer 1

你可以制作像twitter这样的东西，它会创建一个填充整个页面的div：

<div class="PermalinkOverlay" id="permalink-overlay" style="display: block;">
      <!-- Content that will be showed whenever you want -->
</div>

并为其设置默认样式：

.PermalinkOverlay {
    background: rgba(0,0,0,0.5);
    bottom: 0;
    left: 0;
    overflow: auto;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 1010;
}

所以，每当你想为你的网站提供更深的透明背景时，你就不能把显示块放到.PermalinkOverlay类。要隐藏它，可以将显示设置为none，就像你已经做的那样。

Answer 2

您可以使用选择标记：不是

*:not(div) {
color: black;
background-color: black;
//set any other that should be darkened
}

Answer 3

纯CSS可以实现这一点。

我使用:target来获得所需的结果

对于叠加 - 或变暗，我使用带有z-index堆叠的空锚标签来创建可点击的叠加层，该叠加层仅在模态打开时显示。单击叠加层将关闭模式。

模态还有一个单独的关闭按钮。

当模态关闭时，它不会干扰身体内容。

响应示例：

＆＃13;

/* essential code */

.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
  background: rgba(0, 0, 0, .8);
  transition: all ease 1s;
}

.closeoverlay {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  display: block;
  z-index: 2;
  position: fixed;
  cursor: pointer;
}

.closebutton {
  color: red;
  text-decoration: none;
  font-size: 30px;
  margin: 0 auto;
  display: table;
}

.modal:target {
  opacity: 1;
  pointer-events: auto;
}

.modal:target>.closeoverlay {
  display: block;
}

.modal>div {
  width: 300px;
  height: 500px;
  max-width: 75vw;
  max-height: 75vh;
  text-align: center;
  position: relative;
  background: #dedede;
  z-index: 3
}

.wrap,
.modal {
  display: flex;
  align-items: center;
  justify-content: center
}

.modal-content {
  overflow-y: auto
}


/*demo fluff */

p {
  font-size: 20px;
  display: block;
}

button {
  margin: 2em 0 0 0;
  cursor: pointer;
}

.closebutton:hover {
  color: white;
  cursor: pointer;
}

.clutter,
.modal-content p {
  margin: 2em auto;
  padding: 40px;
  max-width: 100%;
  text-align: justify;
}

.clutter {
  width: 400px
}

＆＃13;

<div class="wrap">
  <a href="#M"><button>Open Modal</button></a>
  <div id="M" class="modal">
    <div class="modal-content">
      <a class="closebutton" href="#">&times;</a>
      <p>Prosciutto leberkas boudin pastrami sausage pork. Hamburger pancetta jowl venison pastrami. Filet mignon alcatra burgdoggen salami, ham hock shoulder pork loin sirloin jowl </p>
    </div>
    <a href="#" class="closeoverlay"></a>
  </div>
</div>
<div class="clutter">Bacon ipsum dolor amet shoulder sausage rump venison kevin prosciutto salami shank. Venison salami flank doner burgdoggen, shoulder beef sausage swine alcatra short loin pig chuck. Pastrami sirloin shoulder, swine frankfurter beef strip steak sausage
  salami tri-tip. Prosciutto leberkas boudin pastrami sausage pork. Hamburger pancetta jowl venison pastrami. Filet mignon alcatra burgdoggen salami, ham hock shoulder pork loin sirloin jowl picanha flank drumstick pancetta. Turkey shoulder cupim rump
  ball tip strip steak turducken tri-tip biltong pork doner. Turducken leberkas chuck filet mignon bresaola picanha ball tip pig ground round shankle. Shank pork ribeye fatback, capicola pork loin tri-tip porchetta biltong landjaeger ham hock hamburger.
  Strip steak pork chop sirloin</div>

＆＃13;

除了单击按钮之外，如何使页面上的所有内容变暗

3 个答案: