时间戳

首页 > 解决方案 > 带有淡入淡出的中心模态放大

css - 带有淡入淡出的中心模态放大

问题描述

我正在努力将模态与淡入和放大一起居中：

$('#md-trigger').on('click', function(e) {
      $('#modal-1').toggleClass("md-show"); //you can list several class names 
      e.preventDefault();
    });

$('#md-close').on('click', function(e) {
      $('#modal-1').toggleClass("md-show"); //you can list several class names 
      e.preventDefault();
    });
.md-modal {
  width: 100%;
  max-width: 550px;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  position: absolute;
  z-index: 9999;
  visibility: hidden;
  padding: 25px;
  border: 1px solid rgba(0,0,0,.2);
  border-radius: .3rem;
  background-color: #fff;
  font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19);
  outline: 0;
}

.md-show {
    visibility: visible;
}

.md-overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    visibility: hidden;
    top: 0;
    left: 0;
    z-index: 9998;
    opacity: 0;
    background: rgba(40,43,49,.8);
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

.md-show ~ .md-overlay {
    opacity: 1;
    visibility: visible;
}

.md-content {
    color: #333;
}

.md-effect-1 {
    -webkit-transform: scale(0.7);
    -ms-transform: scale(0.7);
    transform: scale(0.7);
    opacity: 0;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

.md-show.md-effect-1 {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="md-trigger">Show</button>
<div class="md-modal md-effect-1" id="modal-1">
  <div class="md-content">
    <h3>Modal Dialog</h3>
      <p>This is a modal window. You can do the following things with it:</p>
      <button class="md-close" id="md-close">Close me!</button>
  </div>
</div>
<div class="md-overlay"></div>

绝对定位方法 transform:translate(-50%,-50%); 不适合我。它必须是响应式的，所以我不能使用左边距方法。您知道为什么它根本不显示在中间吗？

标签： cssmodal-dialogtransformcentering

解决方案

请试试这个，

将此样式添加到md-modal-wrapper类。添加了一个md-modal-wrapper div 来覆盖md-modal类

.md-modal-wrapper{
  width:100vw;
  height:100vh;
  display: flex;
  justify-content: center;
  align-items: center;    
}

删除此样式

.md-modal {
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
   position: absolute;
}


$('#md-trigger').on('click', function(e) {
   $('#modal-1').toggleClass("md-show"); //you can list several class names 
   e.preventDefault();
});

$('#md-close').on('click', function(e) {
   $('#modal-1').toggleClass("md-show"); //you can list several class names 
   e.preventDefault();
});
.md-modal {
    width:100%;
    max-width: 550px;
    z-index: 9999;
    visibility: hidden;
    padding: 25px;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: .3rem;
    background-color: #fff;
    font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19);
    outline: 0;
}
.md-show {
    visibility: visible;
}
.md-overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    visibility: hidden;
    top: 0;
    left: 0;
    z-index: 9998;
    opacity: 0;
    background: rgba(40,43,49,.8);
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

.md-show ~ .md-overlay {
    opacity: 1;
    visibility: visible;
}

.md-content {
    color: #333;
}

.md-effect-1 {
    -webkit-transform: scale(0.7);
    -ms-transform: scale(0.7);
    transform: scale(0.7);
    opacity: 0;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

.md-show.md-effect-1 {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
}
.md-modal-wrapper{
  width:100vw;
  height:100vh;
  display: flex;
  justify-content: center;
  align-items: center;

}
body{
  margin:0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<button id="md-trigger">Show</button>
<div class="md-modal-wrapper">

<div class="md-modal md-effect-1" id="modal-1">
  <div class="md-content">
    <h3>Modal Dialog</h3>
      <p>This is a modal window. You can do the following things with it:</p>
      <button class="md-close" id="md-close">Close me!</button>
  </div>
</div>
<div class="md-overlay"></div>
</div>
</body>

推荐阅读