一个简单的模态框modal可以在html和vue里都可以使用

模态框其实就是一个遮罩

html：

        <div id="modal">
            <div class="win">
            <p>正在搜索中，稍安勿躁......</p>
            </div>
        </div>

css：

#modal {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    display: none;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.1)
}

#modal .win {
    position: relative;
    margin: 300px auto;
    width: 80%;
    height: 90pt;
    background-color: rgba(0,0,0,.5)
}


.win p {
    font-size: 20px;
    color: white;
    padding-top: 50px;
    text-align: center
}

js：

        showModal: function () {
            document.getElementById("modal").style.display="block";
        }
        ,
        hideModal: function () {
            document.getElementById("modal").style.display="none";
        }