Question

我正在尝试为带有过渡的模态设置动画。我只是想慢慢打开它，但我不知道它是如何工作的... 模态必须从屏幕中央或屏幕下方打开。

我从Google找到了以下代码： { "version": "1.0", "response": { "outputSpeech": { "type": "SSML", "ssml": "<speak>ALex</speak>" }, "reprompt": { "outputSpeech": { "type": "SSML", "ssml": "<speak>Please respond</speak>" } }, "shouldEndSession": false, "canFulfillIntent": { "canFulfill": "YES" } }, "userAgent": "ask-node/2.1.0-beta.4 Node/v8.10.0", "sessionAttributes": { "key": "string value" } }

但这对我来说真的太复杂了。我不明白我的代码如何适应它...

https://codepen.io/designcouch/pen/obvKxm

/*Ouvrir le popup stress */
// Get the  modal
var hydricstressmodal = document.getElementById('hydricstressmodal');

// Get the button that opens the modal
var stress = document.getElementById("stress");

// Get the <span> element that closes the modal
var hydricstressspan = document.getElementsByClassName("stressclose")[0];

// When the user clicks the button, open the modal 
stress.onclick = function() {
    hydricstressmodal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
hydricstressspan.onclick = function() {
    hydricstressmodal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == hydricstressmodal) {
        hydricstressmodal.style.display = "none";
    }
}

/*Ouvrir le popup vegetal */
// Get the  modal
var vegetalmodal = document.getElementById('vegetalmodal');

// Get the button that opens the modal
var vegetal = document.getElementById("vegetal");

// Get the <span> element that closes the modal
var vegetalspan = document.getElementsByClassName("vegetalclose")[0];

// When the user clicks the button, open the modal 
vegetal.onclick = function() {
    vegetalmodal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
vegetalspan.onclick = function() {
    vegetalmodal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == vegetalmodal) {
        vegetalmodal.style.display = "none";
    }
}

@charset "UTF-8";
/* CSS Document */
body {
  margin: 0;
  font-size: 28px;
  background-color: #00011f;
  display: flex;
  flex-direction: column;
  margin : auto;
}


/*popup hydric stress*/
.hydricstressmodal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.7); /* Black w/ opacity */
}

/* stress Modal Content */
.stress-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    height: 70%;
    border-radius: 30px;
    overflow: scroll;

}
.popstress img{
  width: 20%;
}

/* The Close Button */
.stressclose {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.stressclose:hover,
.stressclose:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

/*popup Vegetal*/
.vegetalmodal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.8); /* Black w/ opacity */
    scale
}

/* stress Modal Content */
.vegetal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    height: 70%;
    border-radius: 30px;
    overflow: scroll;

}

.popvegetal img{
  width: 40%;
}
/* The Close Button */
.vegetalclose {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.vegetalclose:hover,
.vegetalclose:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

Answer 1

使用css动画的简单解决方案：

$('#open').click(function() {
  $('#modalOverlay').show().addClass('modal-open');
});

$('#close').click(function() {
  var elem = $('#modalOverlay');
  elem.removeClass('modal-open');
  setTimeout(function() {
    elem.hide();
  },200);
});

#modalOverlay {
  position: fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-color: rgba(0,0,0,0.8);
  z-index:9999;
}

#modal {
  position:fixed;
  width:60%;
  top:55%;
  left:50%;
  padding:15px;
  text-align:center;
  background-color:#fafafa;
  box-sizing:border-box;
  opacity:0;
  transform: translate(-50%,-50%);  
  transition:all 150ms ease-in-out;
}

#modalOverlay.modal-open #modal {
  opacity:1;
  top:50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="open" type="button">View modal</button>
<div id="modalOverlay" style="display:none;">
  <div id="modal">
    <h1>My modal</h1>
    <p>This is a simple modal</p>
    <button id="close" type="button">Close</button>
  </div>
</div>

Answer 2

如果您不想在这种功能上花费太多时间，可以使用https://sweetalert2.github.io/之类的库，该库非常易于使用和完成。

Answer 3

您还可以使用引导程序之类的库。对于引导模态，您可以参考以下链接。 https://getbootstrap.com/docs/4.0/components/modal/

如何进行模式过渡？

3 个答案: