前端：自定义弹窗设计

Posted 2020-11-25 xmcwm

1、html部分

<button onclick="showPopup()">按這裡</button>
<div id="background"></div>
<div id="popup">
    <div style="width:35%; margin: auto">
        <div id="close">
            <span id="close_popup" onclick="closePopup();">×</span>
            <h2 id="popup_title">這裡是彈窗標題</h2>
        </div>
        <div id="popup_content">是否處理下這個彈窗？</div>
        <div id="popup_foot">
            <button>是的</button>
            <button>不，我再考慮一下</button>
        </div>
    </div>
</div>

2、CSS部分

#background {
    margin: 0;
    padding: 0;
    display: none;
    position: fixed;
    z-index: 1000;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
}

#popup {
    display: none;
    position: fixed;
    width: 100%;
    z-index: 1001;
    margin: 15% auto;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0);
}

#close {
    padding: 5px;
    background: black;
}

#popup_title {
    margin: 10px 0;
    color: white;
    font-size: 16px;
    padding-left: 15px;
}

#close_popup {
    color: white;
    cursor: pointer;
    float: right;
    font-size: 30px;
    padding-right: 15px;
}

#popup_content {
    background: #eeeeee;
    margin: auto;
    height: 200px;
    padding: 0 20px;
    font-size: 16px;
}

#popup_foot {
    padding: 5px 0;
    padding-bottom: 15px;
    text-align: center;
    background: #eee;
}

3、JS部分

<script src="/static/js/jquery-2.2.0.min.js"></script>
<script>
    function showPopup() {
        $("#background").css("display", "block");
        $("#popup").css("display", "block");
    }

    function closePopup() {
        $("#background").css("display", "none");
        $("#popup").css("display", "none");
    }
</script>