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>