使用纯 CSS 编码的 Open Modal

Question

我展示了一个模态here，它正在运行并使用 jquery 在单击事件时打开，我是一个初学者，并尝试了使用纯 CSS 代码动画模态打开的相同功能。但我无法实现目标。 我阅读了各种线程和 codepen，但就我而言，我对我从哪里开始、每个线程、与我的模态方法不匹配的不同代码有点困惑。

请帮助创建功能，当我单击按钮时，模态将从右到左打开，带有模态背景的小动画。

HTML 代码

<div class="ibs-full-modal-container" id="modal1">
    <div class="ibs-full-modal">
        <header class="ibs-modal-header">
            <h4 class="ibs-modal-title">Default Modal</h4>
            <span class="ibs-btn-close">&times;</span>
        </header>
        <div class="ibs-modal-body has-header has-footer"></div>
        <div class="ibs-modal-footer text-right">
            <button class="btn btn-default" id="closeBtn">Cancel</button>
            <button class="btn btn-success">Confirm</button>
        </div>
    </div>
</div>
<button id="openBtn" class="btn btn-primary btn-lg">open modal</button>

CSS 代码

.ibs-backdrop,
.ibs-full-modal-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1;
    display: none;
}
.ibs-full-modal-container {
    background-color: transparent;
}
.ibs-full-modal {
    position: absolute;
    top: 0;
    left: 240px;
    right: 0;
    bottom: 0;
    -webkit-transform: translateX(30%);
    -moz-transform: translateX(30%);
    -ms-transform: translateX(30%);
    -o-transform: translateX(30%);
    transform: translateX(30%);
    opacity: 0;
}
.ibs-full-modal * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
.ibs-full-modal > .ibs-modal-body,
.ibs-full-modal > .ibs-modal-footer,
.ibs-full-modal > .ibs-modal-header {
    padding: 15px 20px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 56px;
    background-color: #eee;
    border-bottom: 1px solid #ccc;
}
.ibs-full-modal > .ibs-modal-body {
    height: auto;
    padding: 20px;
    right: 0;
    bottom: 0;
    background-color: #fff;
    overflow-x: hidden;
    overflow-y: auto;
    border: none;
}
.ibs-full-modal > .ibs-modal-body.has-header {
    top: 56px;
}
.ibs-full-modal > .ibs-modal-body.has-footer {
    bottom: 56px;
}
.ibs-full-modal > .ibs-modal-footer {
    top: auto;
    bottom: 0;
    height: 56px;
    text-align: right;
    border-top: 1px solid #ccc;
    padding: 10px 20px;
}
.ibs-full-modal .ibs-modal-title {
    padding: 5px 0;
    font-size: 18px;
    font-weight: 700;
    float: left;
}
.ibs-full-modal .ibs-btn-close {
    font-size: 30px;
    float: right;
    line-height: 30px;
    text-align: center;
    height: 30px;
    width: 30px;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}
.ibs-full-modal .ibs-btn-close:hover {
    background-color: #6495ed;
    color: #fff;
    cursor: pointer;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}
html {
    height: 100%;
}
body {
    min-height: 100%;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    transform: translateZ(0);
}
body.full-modal-open {
    overflow: hidden;
}

这是我在 jsFiddle 上的完整代码，https://jsfiddle.net/dqke35h0/

Answer 1

更新：添加动画效果。

就像一个选项，如果你必须在没有 JS 的情况下打开模态 - 你可以看看这个方法。

您可以将 checkbox 与 labels 一起使用，而不是按钮，这将类似于切换模式的锚。

查看 CSS 和 HTML 中的 cmets 了解更多详情。

/* register global css variables */
:root {
  --modal-spacing: 1rem;
  --modal-anim-duration: .3s;
}

body {
  margin: 0;
}

/* this will hide checkbox */
.modal-toggle-checkbox {
  appearance: none;
}

/* if checkbox is checked, show modal container */
.modal-toggle-checkbox:checked + .ibs-full-modal-container {
  visibility: visible;
  background-color: rgba(0, 0, 0, .5);
}

/* 
  show modal content 
  update this part to add animations  
*/
.modal-toggle-checkbox:checked + .ibs-full-modal-container .ibs-full-modal {
  opacity: 1;
  transform: translateX(0);
}

/* temporary code. seems like you using BS or something, so this up to you */
.section {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.container {
  max-width: 1400px;
  padding-left: 1rem;
  padding-right: 1rem;
}

.modal-toggle-label {
  display: inline-flex;
  border: 1px solid;
  padding: .25rem;
  border-radius: .25rem;
  cursor: pointer;
}
/* end of temporary code */

/* .ibs-backdrop not used here, can be removed */
/*.ibs-backdrop,*/
.ibs-full-modal-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw; /* make modal container full-screen size */
  height: 100vh; /* make modal container full-screen size */
  z-index: 1;
  background-color: transparent;
  visibility: hidden; /* animating container visibility */
  transition: visibility calc(var(--modal-anim-duration) + .05s) ease, background-color var(--modal-anim-duration) ease; /* animating container visibility and background */
}

/*.ibs-full-modal-container {
  background-color: transparent;
}*/

.ibs-full-modal {
  position: absolute;
  top: var(--modal-spacing);
  left: var(--modal-spacing);
  height: calc(100% - var(--modal-spacing) * 2);
  width: calc(100% - var(--modal-spacing) * 2);
  /*-webkit-transform: translateX(30%);
  -moz-transform: translateX(30%);
  -ms-transform: translateX(30%);
  -o-transform: translateX(30%);*/
  transform: translateX(30%);
  opacity: 0; /* animating modal visibility with position */
  transition: opacity var(--modal-anim-duration) ease, transform var(--modal-anim-duration) ease; /* animating modal visibility with position */
} 

.ibs-full-modal * {
  /*-webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;*/
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.ibs-full-modal>.ibs-modal-body,
.ibs-full-modal>.ibs-modal-footer,
.ibs-full-modal>.ibs-modal-header {
  padding: 15px 20px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 56px;
  background-color: #eee;
  border-bottom: 1px solid #ccc;
}

.ibs-full-modal>.ibs-modal-body {
  height: auto;
  padding: 20px;
  right: 0;
  bottom: 0;
  background-color: #fff;
  overflow-x: hidden;
  overflow-y: auto;
  border: none;
}

.ibs-full-modal>.ibs-modal-body.has-header {
  top: 56px;
}

.ibs-full-modal>.ibs-modal-body.has-footer {
  bottom: 56px;
}

.ibs-full-modal>.ibs-modal-footer {
  top: auto;
  bottom: 0;
  height: 56px;
  text-align: right;
  border-top: 1px solid #ccc;
  padding: 10px 20px;
}

.ibs-full-modal .ibs-modal-title {
  padding: 5px 0;
  font-size: 18px;
  font-weight: 700;
  float: left;
}

.ibs-full-modal .ibs-btn-close {
  font-size: 30px;
  float: right;
  line-height: 30px;
  text-align: center;
  height: 30px;
  width: 30px;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}

.ibs-full-modal .ibs-btn-close:hover {
  background-color: #6495ed;
  color: #fff;
  cursor: pointer;
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

html {
  height: 100%;
}

body {
  min-height: 100%;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  transform: translateZ(0);
}

body.full-modal-open {
  overflow: hidden;
}

<section class="section">
  <div class="container">
    <!-- 
      create label for checkbox, which will toggle checkbox state;
    -->
    <label class="btn btn-primary btn-lg modal-toggle-label" for="openModal">open modal</label>
  </div>
</section>

<div class="modal-toggle-wrapper">
  <!-- 
    checkbox itself, for toggling modal window;
    this checkbox node should be above target modal
  -->
  <input class="modal-toggle-checkbox" type="checkbox" id="openModal">
  <!-- id="modal1" can be removed -->
  <div class="ibs-full-modal-container">
    <div class="ibs-full-modal">
      <header class="ibs-modal-header">
        <h4 class="ibs-modal-title">Default Modal</h4>

        <!-- label for checkbox, which will toggle checkbox state (closing modal) -->
        <label for="openModal">
          <span class="ibs-btn-close">&times;</span>
        </label>

      </header>
      <div class="ibs-modal-body has-header has-footer"></div>
      <div class="ibs-modal-footer text-right">
        <button class="btn btn-default" id="closeBtn">Cancel</button>
        <button class="btn btn-success">Confirm</button>
      </div>
    </div>
  </div>
</div>