Question

我希望有一个内容叠加层，以便在模式打开时使页面内容变灰。我希望叠加层淡入淡出，然后淡出。

我可以：

使用JavaScript（React，而不是jQuery）添加和删除类
运行任何CSS / SASS代码

约束：

我使用的叠加层div始终位于DOM中，但未添加和删除。
我无法使用任何JavaScript时序（无setTimeout()），所有时间必须在CSS / SASS中

显然，叠加层在隐藏内容时无法阻止内容点击，因此我无法动画opacity。

我目前正在使用background-color: rgba(0, 0, 0, 0.5);和transition: background-color 1s ease-in;进行动画制作，但我似乎无法获得叠加效果＆＃34;＆＃34;并且＆＃34;在路上＆＃34;内容（同时也淡入和退出）。

我已尝试使用height属性（设置为100%覆盖，0覆盖关闭），但我认为我只能使用{{1}一次，不是两次（因为我在淡出时需要延迟）。

我怎么能这样做？？

更新

要求查看我已经厌倦了：

transition: height 0s ease-in 0;

使用React组件中的状态切换/输出类，一旦单击打开/关闭模式，就会发生这种情况。

我挣扎的那一点是让淡出发生，然后删除叠加层阻止内容。

我知道这段代码不起作用！

Answer 1

我使用:target来实现纯CSS模式的预期结果。

对于叠加层，我使用带有z-index堆叠的空锚标签来创建可点击的叠加层，该叠加层仅在模态打开时显示。单击叠加层将关闭模式。

模态还有一个单独的关闭按钮。

当模态关闭时，它不会干扰身体内容。

淡入淡出部分很简单。您只需要在整个设置中添加过渡属性。

＆＃13;

/* essential code */

.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
  background: rgba(0, 0, 0, .5);
  transition: all ease 1s;
}

.closeoverlay {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  display: block;
  z-index: 2;
  position: fixed;
  cursor: pointer;
}

.closebutton {
  color: red;
  text-decoration: none;
  font-size: 30px;
  margin: 0 auto;
  display: table;
}

.modal:target {
  opacity: 1;
  pointer-events: auto;
  
}

.modal:target>.closeoverlay {
  display: block;
}

.modal>div {
  width: 300px;
  height: 500px;
  max-width: 75vw;
  max-height: 75vh;
  text-align: center;
  position: relative;
  background: #131418;
  z-index: 3
}

.wrap,
.modal {
  display: flex;
  align-items: center;
  justify-content: center
}

.modal-content {
 overflow-y:auto
}


/*demo fluff */

p {
  color: green;
  font-size: 20px;
  display: block;
}

button {
  margin: 2em 0 0 0;
  cursor: pointer;
}

.closebutton:hover {
  color: white;
  cursor: pointer;
}

.clutter, .modal-content p {
  margin: 2em auto;
  padding: 40px;
  max-width: 100%;
  text-align: justify;
}


.clutter {width: 400px}

＆＃13;

<div class="wrap">
  <a href="#M"><button>Open Modal</button></a>
  <div id="M" class="modal">
    <div class="modal-content">
      <a class="closebutton" href="#">&times;</a>
      <p>Prosciutto leberkas boudin pastrami sausage pork. Hamburger pancetta jowl venison pastrami. Filet mignon alcatra burgdoggen salami, ham hock shoulder pork loin sirloin jowl </p>
    </div>
    <a href="#" class="closeoverlay"></a>
  </div>
</div>
<div class="clutter">Bacon ipsum dolor amet shoulder sausage rump venison kevin prosciutto salami shank. Venison salami flank doner burgdoggen, shoulder beef sausage swine alcatra short loin pig chuck. Pastrami sirloin shoulder, swine frankfurter beef strip steak sausage
  salami tri-tip. Prosciutto leberkas boudin pastrami sausage pork. Hamburger pancetta jowl venison pastrami. Filet mignon alcatra burgdoggen salami, ham hock shoulder pork loin sirloin jowl picanha flank drumstick pancetta. Turkey shoulder cupim rump
  ball tip strip steak turducken tri-tip biltong pork doner. Turducken leberkas chuck filet mignon bresaola picanha ball tip pig ground round shankle. Shank pork ribeye fatback, capicola pork loin tri-tip porchetta biltong landjaeger ham hock hamburger.
  Strip steak pork chop sirloin</div>

＆＃13;

Answer 2

以下是几个选项。请注意，我没有任何此项目，只需快速搜索css模态窗口。

http://jsfiddle.net/kumarmuthaliar/GG9Sa/1/ 打开模态

<div id="openModal" class="modalDialog">
<div>   <a href="#close" title="Close" class="close">X</a>

        <h2>Modal Box</h2>

    <p>This is a sample modal box that can be created using the powers of CSS3.</p>
    <p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p>
</div>
</div>

.modalDialog {
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 99999;
    opacity:0;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    pointer-events: none;
}
.modalDialog:target {
    opacity:1;
    pointer-events: auto;
}
.modalDialog > div {
    width: 400px;
    position: relative;
    margin: 10% auto;
    padding: 5px 20px 13px 20px;
    border-radius: 10px;
    background: #fff;
    background: -moz-linear-gradient(#fff, #999);
    background: -webkit-linear-gradient(#fff, #999);
    background: -o-linear-gradient(#fff, #999);
}
.close {
    background: #606061;
    color: #FFFFFF;
    line-height: 25px;
    position: absolute;
    right: -12px;
    text-align: center;
    top: -10px;
    width: 24px;
    text-decoration: none;
    font-weight: bold;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    -moz-box-shadow: 1px 1px 3px #000;
    -webkit-box-shadow: 1px 1px 3px #000;
    box-shadow: 1px 1px 3px #000;
}
.close:hover {
    background: #00d9ff;
}

https://codepen.io/timothylong/pen/HhAer

<div class="container">
  <div class="interior">
    <a class="btn" href="#open-modal">Basic CSS-Only Modal</a>
  </div>
</div>
<div id="open-modal" class="modal-window">
  <div>
    <a href="#modal-close" title="Close" class="modal-close">Close</a>
    <h1>Voilà!</h1>
    <div>A CSS-only modal based on the :target pseudo-class. Hope you find it helpful. <a href="https://twitter.com/timothylong" target="_blank">Say hello on Twitter.</div>
    </div>
</div>

html,
body {
  height: 100%;
}

body {
  font: 600 18px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  padding: 2rem;
  background-color: #5A7A9B;
  color: #5A7A9B
}

a {
  color: inherit;
}

.container {
  display: table;
  width: 100%;
  height: 100%;
}

.interior {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.btn {
  background-color: #fff;
  padding: 1em 3em;
  border-radius: 3px;
  text-decoration: none;
}

.modal-window {
  position: fixed;
  background-color: rgba(255, 255, 255, 0.15);
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}

.modal-window:target {
  opacity: 1;
  pointer-events: auto;
}

.modal-window>div {
  width: 400px;
  position: relative;
  margin: 10% auto;
  padding: 2rem;
  background: #fff;
  color: #444;
}

.modal-window header {
  font-weight: bold;
}

.modal-close {
  color: #aaa;
  line-height: 50px;
  font-size: 80%;
  position: absolute;
  right: 0;
  text-align: center;
  top: 0;
  width: 70px;
  text-decoration: none;
}

.modal-close:hover {
  color: #000;
}

.modal-window h1 {
  font-size: 150%;
  margin: 0 0 15px;
}

https://codepen.io/samirc/pen/bVLXPV

<div class="wrap">

  <h1>Modal - Pure CSS (no Javascript)</h1>

  <p>Example of modal in CSS only, here I use the pseudo selector ":target" and no javascript for modal action.</p>

  <p>This works in IE9+ and all modern browsers.</p>

  <hr />

  <a href="#modal-one" class="btn btn-big">Modal!</a>

</div>

<!-- Modal -->
<div class="modal" id="modal-one" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-header">
      <h2>Modal in CSS?</h2>
      <a href="#close" class="btn-close" aria-hidden="true">×</a> <!--CHANGED TO "#close"-->
    </div>
    <div class="modal-body">
      <p>One modal example here! :D</p>
    </div>
    <div class="modal-footer">
      <a href="#close" class="btn">Nice!</a>  <!--CHANGED TO "#close"-->
    </div>
    </div>
  </div>
</div>
<!-- /Modal -->
//
// Variables
// ----------------------

@gray: #333;
@gray-light: #aaa;
@gray-lighter: #eee;
@space: 40px;
@blue: #428bca;
@blue-dark: darken(@blue, 5%);

// Mixin for transition/transform
.translate(@x; @y) {
  -webkit-transform: translate(@x, @y);
      -ms-transform: translate(@x, @y); // IE9+
          transform: translate(@x, @y);
}
.transition(@transition) {
  -webkit-transition: @transition;
          transition: @transition;
}
.transition-transform(@transition) {
  -webkit-transition: -webkit-transform @transition;
    -moz-transition: -moz-transform @transition;
      -o-transition: -o-transform @transition;
          transition: transform @transition;
}

//
// Body
// ----------------------

body{
  color: @gray;
  font-family: 'Helvetica', arial;
  height: 80em;
}

.wrap{
  padding: @space;
  text-align: center;
}

hr {
  clear: both;
  margin-top: @space;
  margin-bottom: @space;
  border: 0;
  border-top: 1px solid @gray-light;
}

h1{
  font-size: 30px;
  margin-bottom: @space;
}

p{
  margin-bottom: @space/2;
}

//
// Btn 
// ----------------------

.btn{
  background: @blue;
  border: @blue-dark solid 1px;
  border-radius: 3px;
  color: #fff;
  display: inline-block;
  font-size: 14px;
  padding: 8px 15px;
  text-decoration: none;
  text-align: center;
  min-width: 60px;
  position: relative;
  transition: color .1s ease;
/* top: 40em;*/

  &:hover{
    background: @blue-dark;
  }

  &.btn-big{
    font-size: 18px;
    padding: 15px 20px;
    min-width: 100px;
  }

}

.btn-close{
  color: @gray-light;
  font-size: 30px;
  text-decoration: none;
  position: absolute; right: 5px; top: 0;

  &:hover{
    color: darken(@gray-light, 10%);
  }

}

//
// Modal
// ----------------------

.modal{


  // This is modal bg
  &:before{
    content: ""; 
    display: none;
    background: rgba(0,0,0,.6);
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0; 
    z-index: 10;
  }

  &:target{

    // Active animate in modal
    &:before{
      display: block;
    }  
    .modal-dialog{
      .translate(0, 0); 
      top: 20%;  
    }

  }

}

// Modal Dialog
// ----------------------

.modal-dialog{
  background: #fefefe;
  border: @gray solid 1px;
  border-radius: 5px;
  margin-left: -200px;
  position: fixed; 
  left: 50%; 
  top: -100%;  
  z-index: 11; 
  width: 360px;
  .translate(0, -500%);
  .transition-transform(~"0.3s ease-out");
}

.modal-body{
  padding: @space/2;
}

.modal-header,
.modal-footer{
  padding: @space/4 @space/2;
}

.modal-header{
  border-bottom: @gray-lighter solid 1px;

  h2{
    font-size: 20px;
  }

}

.modal-footer{
  border-top: @gray-lighter solid 1px;
  text-align: right;
}

/*ADDED TO STOP SCROLLING TO TOP*/
#close {
  display: none; 
}

Answer 3

尝试使用自定义动画功能。例如

＆＃13;

.test {
}
.test + label {
  display:none;
  position:absolute;
  top:0; right:0; bottom:0; left:0;
  animation:fadein .5s;
}
.test:checked + label {
  display:block;
  background-color:rgba(0, 0, 0, .5);
}
@keyframes fadein {
	from {
		opacity:0;
	}
	to {
		opacity:1;
	}
}

＆＃13;

<input type="checkbox" id="1" class="test">
<label for="1"></label>

＆＃13;

Answer 4

所以我没有做任何过渡项目，但是对于那些在本帖子中绊脚石以寻找易于使用的modalOverlay背景的人，这里您可以进行以下操作：

.modalOverlay 
  z-index 100
  position fixed
  width 100vw
  height 100vh
  top 0
  left 0
  background-color rgba(255, 255, 255, 0.9)
  display flex
  justify-content center
  overflow-y auto

淡入淡出的CSS模态叠加？

4 个答案: