弹窗的实现方式 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>弹窗</title>
    <link rel="stylesheet" type="text/css" href="弹窗.css">
    <style type="text/css">
        body{
    font-family: Arial,Helvetica,sans-serif;
    font-size: 17px;
    text-align: 1.5;
}
 
#open_btn {
    background: #009900;
}
 
#background {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
}
 
#div1 {
    background:#eeeeee;
    width: 70%;
    z-index: 1;
    margin: 12% auto;
    overflow: auto;
}
 
span {
    color: white;
    padding-top: 12px;
    cursor: pointer;
    padding-right: 15px;
}
 
#div2 {
    background:#eeeeee;
    margin: auto;
    height: 300px;
    padding: 0 20px;
}
 
#close {
    padding: 5px;
    background: #5cd31b;
}
 
#close-button {
    float: right;
    font-size: 30px;
}
 
#foot {
    padding: 5px 0;
    text-align: center;
    background: #5cd31b;
    color: white;
}
 
h2 {
    margin: 10px 0;
    color: white;
    padding-left: 15px;
}
 
h3 {
    margin: 0 0px;
    padding-top: 15px;
}

    </style>
</head>
<body>
    <button id="open_btn" class="btn">弹窗</button>
    <!-- 弹窗内容开始 -->
    <div id="background" class="back">
        <div id="div1" class="content">
            <div id="close">
                <span id="close-button">×</span>
                <h2>弹窗头部</h2>
            </div>
            <div id="div2">
                <h3>弹窗标题</h3>
                <p>asfasfafa</p>
            </div>
            <h3 id="foot">底部内容</h3>
        </div>
    </div>
    <!-- 弹窗内容结束 -->
    <script >
        var btn = document.getElementById('open_btn');
    var div = document.getElementById('background');
    var close = document.getElementById('close-button');
 
    btn.onclick = function show() {
    div.style.display = "block";
    }
 
    close.onclick = function close() {
    div.style.display = "none";
    }
 
    window.onclick = function close(e) {
    if (e.target == div) {
        div.style.display = "none";
    }
    }

    </script>
</body>
</html>

 

posted @ 2019-02-13 15:42  菩提树下的丁春秋  阅读(504)  评论(0)  编辑  收藏  举报