中心模态随着放大而逐渐消失

编程问答 2022-08-12

问题描述

我正在努力使模态居中以及淡入和放大：

$('#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,.2);
  border-radius: .3rem;
  background-color: #fff;
  font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
  Box-shadow: 0 4px 8px 0 rgba(0,.2),0 6px 20px 0 rgba(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％）;对我不起作用。它必须具有响应能力，所以我不能使用左边缘距方法。您知道为什么它根本不显示在中间吗？

解决方法

请尝试这个

将此样式添加到 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,.2);
    border-radius: .3rem;
    background-color: #fff;
    font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
    box-shadow: 0 4px 8px 0 rgba(0,.2),0 6px 20px 0 rgba(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>

,

scale(1)覆盖了其他transform属性translate(-50%,-50%)。

通过将两者transform: translate(-50%,-50%) scale(1)组合在一起可以轻松解决。

$('#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,.2);
  border-radius: .3rem;
  background-color: #fff;
  font-family: Helvetica Neue,sans-serif;
  box-shadow: 0 4px 8px 0 rgba(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,.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: translate(-50%,-50%) 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>

,

如何使用flex？

从md-modal中删除position: absolute;和transform: translate(-50%,-50%);

并使用flex div覆盖模态

.md-container {
  display:flex;
  justify-content:center;
  align-items:center
}

<div class="md-container">
  <div class="md-modal">
  ~~
  </div>
</div>

我不知道如何使用代码段，因此我要附加一个codePen链接?

https://codepen.io/seongmin0801/pen/MWyrYvm

,

制作transform: translate(-50%,-50%) !important;。有.md-show.md-effect-1 { transform: scale(1); }会覆盖它，因此您应该使用重要的

centeringmodal-dialogtransform