javascript - 带有可选 JavaScript 的 CSS 模态弹出窗口

Question

如何使用可选的 JavaScript 创建基于 CSS 的模式弹出窗口？解决方案应该主要基于 CSS。我查看了一些仅使用 CSS 的解决方案，它们更改了页面 URL。这个问题旨在提供替代方案。例如，可以使用 :active 和 :focus 选择器创建基于 CSS 的模式弹出窗口。还需要使用 object 标记来嵌套 anchor 。下面发布了一个解决方案。

Answer 1

此解决方案通过使用 :active、:focus CSS 选择器来显示模态。要隐藏模式，焦点将转移到与触发它的 anchor 不同的 anchor 。 object 标签用于嵌套 anchor 。 JavaScript 是可选的，但首选，以实现最佳操作。

document.addEventListener('DOMContentLoaded', e => Array.prototype.forEach.call(document.getElementsByClassName('no-drag'), l => l.addEventListener('dragstart', e => e.preventDefault())))

body {
  background: #dfd;
}
.btn {
  display: inline-block;
  box-sizing: border-box;
  margin: .2em;
  border: .2em solid;
  border-radius: .6em;
  padding: .3em;
  text-align: center;
  text-decoration: none;
  font-family: 'MS Shell Dlg 2', Arial;
  cursor: pointer;
}
.btn-green {
  border-color: #9b9;
  background-color: #686;
  color: #bdb;
}
.btn-green:hover {
  border-color: #9cb;
  background-color: #698;
  color: #bed;
}
.modal-container {
  visibility: hidden;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, .8);
  z-index: 1;
  cursor: default;
  -webkit-transition: visibility .5s;
  transition: visibility .5s;
}
.modal {
  position: absolute;
  top: 50%;
  right: 50%;
  bottom: 50%;
  left: 50%;
  border: .2em solid #9b9;
  border-radius: .6em;
  background-color: rgba(102, 136, 102, .8);
  font-size: 1rem;
  line-height: 1em;
  overflow: hidden;
  -webkit-transition: top .5s, right .5s, bottom .5s, left .5s;
  transition: top .5s, right .5s, bottom .5s, left .5s;
}
.modal-header, .modal-footer {
  position: absolute;
  right: 1em;
  left: 1em;
  height: 2em;
  border-radius: .3em;
  background-color: rgba(102, 136, 102, .8);
  padding: 0 .2em;
  overflow: hidden;
}
.modal-header {
  top: 1em;
}
.modal-footer {
  bottom: 1em;
}
.modal-text, .modal-btn {
  position: absolute;
  display: block;
  top: 0;
  bottom: 0;
  margin: .2em;
  color: #bdb;
}
.modal-text {
  left: 0;
  padding: .1em .3em;
  line-height: 1.2em;
}
.modal-btn {
  right: 0;
  border-radius: .6em;
  padding: .1em .6em;
  background-color: rgba(85, 119, 85, .8);
  line-height: 1.3em;
  text-decoration: none;
}
.modal-btn:hover, .modal-btn:active, .modal-btn:focus {
  background-color: rgba(119, 153, 136, .8);
  color: #ced;
}
.modal-body {
  position: absolute;
  top: 4em;
  right: 1em;
  bottom: 4em;
  left: 1em;
  margin-right: .5em;
  padding: 0 .5em;
  text-align: justify;
  overflow: auto;
}
.modal-body:after {
  content: "";
  display: block;
  height: .5em;
}
.modal-show:active > .modal-container, .modal-show:focus > .modal-container {
  visibility: visible;
}
.modal-show:active > .modal-container > .modal, .modal-show:focus > .modal-container > .modal {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
@media (min-width: 320px) {
  /* Extra Extra Small */
  .modal-show:active > .modal-container > .modal, .modal-show:focus > .modal-container > .modal {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
}
@media (min-width: 480px) {
  /* Extra Small */
  .modal-show:active > .modal-container > .modal, .modal-show:focus > .modal-container > .modal {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
}
@media (min-width: 576px) {
  /* Small */
  .modal-show:active > .modal-container > .modal, .modal-show:focus > .modal-container > .modal {
    top: .5em;
    right: .5em;
    bottom: .5em;
    left: .5em;
  }
}
@media (min-width: 768px) {
  /* Medium */
  .modal-show:active > .modal-container > .modal, .modal-show:focus > .modal-container > .modal {
    top: 1.5em;
    right: 1.5em;
    bottom: 1.5em;
    left: 1.5em;
  }
}
@media (min-width: 992px) {
  /* Large */
  .modal-show:active > .modal-container > .modal, .modal-show:focus > .modal-container > .modal {
    top: 3em;
    right: 3em;
    bottom: 3em;
    left: 3em;
  }
}
@media (min-width: 1200px) {
  /* Extra Large */
  .modal-show:active > .modal-container > .modal, .modal-show:focus > .modal-container > .modal {
    top: 6em;
    right: 6em;
    bottom: 6em;
    left: 6em;
  }
}

<a class="btn btn-green modal-show no-drag" href="#" onclick="event.preventDefault ? event.preventDefault() : event.returnValue = false" draggable="false">
  Modal
  <div class="modal-container">
    <div class="modal">
      <object class="modal-header">
        <div class="modal-text">Modal Dialog</div>
        <a class="modal-btn" href="#" onclick="event.preventDefault ? event.preventDefault() : event.returnValue = false">x</a>
      </object>
      <div class="modal-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec ornare nisi, ac aliquam erat. Vestibulum rhoncus, ipsum vitae lobortis pellentesque, odio lorem convallis lorem, nec malesuada dolor magna vitae metus. Duis varius mi vel nunc lobortis blandit. Duis eu posuere tortor. Etiam ac arcu finibus, suscipit sem nec, pulvinar enim. Aliquam pellentesque arcu nec sem iaculis, vitae convallis purus imperdiet. Aenean et dolor a nulla placerat facilisis eget non arcu.

Duis venenatis nulla nec augue vulputate, vel dapibus dui accumsan. Curabitur quis purus vitae lectus cursus fermentum at vehicula turpis. Ut vel facilisis mauris. Duis accumsan, enim sed egestas elementum, orci mi mollis tellus, vel luctus tortor augue gravida est. Nulla at lorem sed elit facilisis interdum. Duis mattis non sapien at laoreet. Sed suscipit elit ut tellus laoreet, sit amet gravida nunc mollis. Nam ullamcorper est quis facilisis scelerisque. Duis nulla diam, blandit sed commodo quis, blandit id felis. Nam eleifend elit et orci aliquet gravida. Donec at commodo diam. Proin vehicula auctor gravida.

Vivamus finibus tempus lobortis. Integer convallis neque non ex placerat porta. Fusce a purus maximus, sollicitudin libero eu, vulputate nibh. Nullam pulvinar enim et purus tincidunt porta. Mauris diam enim, volutpat quis urna sed, rhoncus convallis ante. Vestibulum mollis metus eu dui elementum varius. Vestibulum sodales massa eget viverra malesuada. Vestibulum eget lacinia nunc.

Donec mattis lobortis lorem ac tempor. Donec iaculis, felis eu imperdiet accumsan, ex neque laoreet velit, vitae egestas felis diam vitae massa. Aenean maximus magna velit, vel mattis tortor dapibus sed. Cras vehicula fringilla nulla, eget mattis nibh. Quisque lacinia convallis massa, a consectetur nibh viverra id. Donec quis mauris vitae mi rhoncus lacinia. Ut metus felis, cursus et risus at, fringilla mattis dui. Vestibulum sollicitudin facilisis hendrerit. Morbi a risus nisl. Donec sed gravida turpis. Nulla hendrerit dui mollis dui accumsan, eget facilisis metus vestibulum. Sed vel molestie eros. Quisque ut felis purus. Donec nec bibendum quam, ac accumsan risus. Donec blandit eu ante sollicitudin rutrum. In vitae iaculis est, ac molestie nunc.

Nunc eu justo id dui ultricies facilisis quis eu tortor. Phasellus eget nulla quis elit fringilla maximus. Suspendisse tortor justo, tempor vel accumsan in, suscipit non leo. Pellentesque non gravida sapien. Sed vel ex vel dui tempor pellentesque a eget elit. Pellentesque gravida ligula quis mollis vestibulum. Quisque a nibh id nibh mollis tincidunt. Proin ex eros, sagittis a tellus vel, auctor rutrum arcu. Integer quam erat, congue non tellus vitae, fermentum suscipit metus. Cras quis mi id ante maximus cursus sit amet ac libero.
      </div>
      <object class="modal-footer">
        <a class="modal-btn" href="#" onclick="event.preventDefault ? event.preventDefault() : event.returnValue = false">Close</a>
      </object>
    </div>
  </div>
</a>