javascript - Das JS-Klickereignis, das den CSS3-Übergang für den Übergang verwendet, hat keine Auswirkung auf den folgenden Code
html
<section id="dialog">
<p id="box">
<p id="close">x</p>
</p>
<p id="bg"></p>
</section>
<footer id="store-footer">
<p class="footer-item price" id="btn">在线询价</p>
<p class="footer-item goin">加入购物车</p>
<p class="footer-item collect">立即购买</p>
</footer>css
#bg {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(7,17,27,0.5);
z-index: 999;
display: none;
border-radius: 0.5rem;
transition:all 2s;
-moz-transition:all 2s; /* Firefox 4 */
-webkit-transition:all 2s; /* Safari and Chrome */
-o-transition:all 2s; /* Opera */
}
#box {
position: fixed;
width: 80%;
height: 30%;
top: 30%;
left: 10%;
display: block;
margin: 0 auto;
background-color: #fff;
z-index: 1000;
display: none;
border-radius: 0.5rem;
transition: 2s;
-moz-transition: 2s; /* Firefox 4 */
-webkit-transition: 2s; /* Safari and Chrome */
-o-transition: 2s; /* Opera */
}js
<script>
window.onload = function() {
var box = document.getElementById("box");
var bg = document.getElementById("bg");
var btn = document.getElementById("btn");
var close = document.getElementById("close");
btn.onclick = function() {
box.style.display = "block";
bg.style.display = "block";
}
close.onclick = function(){
box.style.display = "none";
bg.style.display = "none";
}
}
</script>
