使用纯 CSS 编码打开模态
Open Modal with pure CSS coding
我展示了一个模态here,它正在运行并在单击事件时打开 jquery,我是初学者并尝试了相同的功能,动画模态打开时使用纯 CSS 代码.但我无法实现目标。
我阅读了各种线程和代码笔,但就我而言,我对我从哪里开始感到困惑,每个线程,不同的代码与我的类模式方法不匹配。
请帮助创建当我单击按钮时模态将从右到左打开的功能,带有模态背景的小动画。
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">×</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/
更新: 添加了动画效果。
像一个选项,如果你必须在没有 JS 的情况下打开模式 - 你可以看看这个方法。
您可以使用 checkbox 和 labels,而不是按钮,这就像一个用于切换模式的锚点。
有关详细信息,请参阅 CSS 和 HTML 中的评论。
/* 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">×</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>
我展示了一个模态here,它正在运行并在单击事件时打开 jquery,我是初学者并尝试了相同的功能,动画模态打开时使用纯 CSS 代码.但我无法实现目标。 我阅读了各种线程和代码笔,但就我而言,我对我从哪里开始感到困惑,每个线程,不同的代码与我的类模式方法不匹配。
请帮助创建当我单击按钮时模态将从右到左打开的功能,带有模态背景的小动画。
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">×</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/
更新: 添加了动画效果。
像一个选项,如果你必须在没有 JS 的情况下打开模式 - 你可以看看这个方法。
您可以使用 checkbox 和 labels,而不是按钮,这就像一个用于切换模式的锚点。
有关详细信息,请参阅 CSS 和 HTML 中的评论。
/* 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">×</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>