Question

我想在页面加载时显示纯css弹出窗口。我不能使用任何JavaScript也不能使用任何（复选框和单选按钮）元素。

我从http://netdna.webdesignerdepot.com/uploads7/creating-a-modal-window-with-html5-and-css3/demo.html和http://www.cssscript.com/demo/minimal-overlay-modal-pure-css/

找到了一些帮助

但是这里弹出窗口显示用户点击按钮或元素后。但我想在页面加载时显示弹出窗口。

任何解决方案？

Answer 1

＆＃13;

* {
  padding: 0;
  margin: 0;
}
body {
  position: relative;
}
input {
  display: none;
}
input:checked + label {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, .6);
}
input:not(:checked) + label {
  display: none;
}
.m-window {
  background-color: white;
  padding: 2em;
  display: inline-block;
  border-radius: 4px;
  box-shadow: 0 0 10px rgba(0, 0, 0, .8);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

＆＃13;

<input type="checkbox" checked id="modal">
<label for="modal">
  <div class="m-window">
    click me!
  </div>
</label>
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse felis est, cursus sed pulvinar ac, facilisis sed est. Mauris eget tortor luctus, congue ante ut, ultrices arcu. Vivamus suscipit nisi eget est facilisis, at tincidunt dui pretium. Etiam
  dolor orci, condimentum a neque ut, hendrerit aliquam lectus. Nulla efficitur lectus risus, in ullamcorper mi porta sit amet. Sed risus mauris, maximus vitae dignissim a, vulputate a diam. Sed efficitur viverra leo, ac mollis risus laoreet nec. Nam
  semper eleifend mattis. Aliquam erat volutpat. Ut sagittis imperdiet lorem quis mollis. Phasellus interdum nulla sed fringilla posuere. Nullam molestie mi vel ligula interdum placerat. Ut ac condimentum nunc. Aenean eleifend at nisl in posuere. Etiam
  eget aliquam velit. Vivamus pulvinar lacinia urna id iaculis. Pellentesque porttitor neque a ipsum malesuada rutrum. Cras accumsan felis eu metus eleifend, nec venenatis ipsum ullamcorper. Cras non massa purus. Sed urna leo, iaculis vel tincidunt vel,
  laoreet eu tellus. Ut porta orci at ex lacinia pellentesque. Aenean eu pulvinar erat, eu fermentum risus. Morbi ipsum nisi, vestibulum et ante sed, semper sollicitudin erat. Nam eu lorem a neque vulputate semper. Pellentesque eu purus dignissim, consequat
  elit ut, gravida mi. Suspendisse lobortis sodales lacus sit amet condimentum. Fusce porta est non condimentum dictum. Duis vel volutpat lectus, ut auctor augue. Pellentesque neque diam, euismod nec nulla eu, dapibus consectetur diam. Donec maximus lectus
  sit amet quam dignissim, et commodo enim commodo. Suspendisse laoreet rhoncus orci, eu fringilla massa aliquet a. Curabitur consequat, purus id porttitor finibus, magna odio bibendum elit, nec interdum dolor magna eget ligula. In ultrices interdum bibendum.
  Praesent ultrices ultricies tellus vitae pellentesque. Vivamus arcu justo, dignissim sit amet orci non, faucibus sollicitudin ligula. Morbi laoreet vestibulum risus nec posuere.
</p>

＆＃13;

页面加载时显示纯css弹出窗口

1 个答案: