带有可选JavaScript的CSS模式弹出窗口

Question

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

Answer 1

此解决方案通过使用:active，:focus css选择器来显示模式。为了隐藏模式，将焦点转移到与触发它的锚不同的锚。 object标签用于嵌套锚点。 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>

Answer 2

有一个名为<dialog>的新HTML元素。其support is quite recent，但有一个polyfill。

https://developer.mozilla.org/fr/docs/Web/HTML/Element/dialog

以下是您的示例：

<dialog id="my-dialog">
  <p>Hello from my dialog</p>
  <button id="hide-button">Hide dialog</button>
</dialog>

<button id="show-button">Show dialog</button>

<script>
  const showButton = document.querySelector('#show-button');
  const hideButton = document.querySelector('#hide-button');
  const dialog = document.querySelector('#my-dialog');
  showButton.addEventListener('click', () => {
    dialog.showModal();
  });
  hideButton.addEventListener('click', () => {
    dialog.close();
  });
</script>