码迷,mamicode.com
首页 > 其他好文 > 详细

前端:自定义弹窗设计

时间:2020-01-02 19:05:48      阅读:161      评论:0      收藏:0      [点我收藏+]

标签:eee   css   span   UNC   time   text   index   auto   white   

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>

前端:自定义弹窗设计

标签:eee   css   span   UNC   time   text   index   auto   white   

原文地址:https://www.cnblogs.com/xmcwm/p/12134164.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!