jquery - 如何在加载页面时显示此模式弹出窗口

Question

我有这个样本:

https://jsfiddle.net/s2duLtro/

代码 HTML:

<div><a href="#target-content" id="button">Apeleaza indicatii</a></div>
<div id="target-content">
    <a href="#" class="close"></a>
    <div id="target-inner"></div>
</div>

代码 CSS:

#target-content {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
  opacity: 0;
  -webkit-transition: opacity 200ms;
  transition: opacity 200ms;
}

#target-content:target {
  pointer-events: all;
  opacity: 1;
}

#target-content #target-inner {
  position: absolute;
  display: block;
  padding: 159px;
  line-height: 1.8;
  width: 20%;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.2);
  background: white;
  color: #34495E;
}

#target-content #target-inner h2 { margin-top: 0; }

#target-content #target-inner code { font-weight: bold; }

#target-content a.close {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #34495E;
  opacity: 0.5;
  -webkit-transition: opacity 200ms;
  transition: opacity 200ms;
}

#target-content a.close:hover { opacity: 0.4; }

只有当用户点击文本时才会加载此窗口。

我希望在页面加载时首先显示此窗口。 我该怎么做呢？ 需要 JQuery 吗？

提前致谢!

Answer 1

您需要做的就是将 CSS 不透明度设置为 1，是的，您将需要 jQuery 来处理这个问题

#target-content {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
  opacity: 1;     //SET OPACITY to 1
  -webkit-transition: opacity 200ms;
  transition: opacity 200ms;
}

查看 Fiddle Link