js實現彈出層

時間 2019-11-12

原文原文鏈接

代碼以下：javascript

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>彈框</title>
    <script src="jquery-9.2.js"></script>
    <style>
        /*背景層*/
        #popLayer {
            display: none;
            background-color: #000;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 10;
            opacity:0.6;
        }

        /*彈出層*/
        #popBox {
            display: none;
            background-color: #FFFFFF;
            z-index: 11;
            width: 300px;
            height: 300px;
            position:fixed;
            top:0;
            right:0;
            left:0;
            bottom:0;
            margin:auto;
        }
        /*關閉按鈕*/
        #popBox .close{
            text-align: right;
            margin-right: 5px;
            background-color: #F8F8F8;
        }
        #popBox .close a {
            text-decoration: none;
            color: #2D2C3B;
        }
    </style>
</head>
<body>
    <input type="button" name="popBox" value="彈出框" 0nclick="popBox()">
    <div id="popLayer"></div>
    <div id="popBox">
        <div class="close">
            <a href="javascript:void(0)" 0nclick="closeBox()">關閉</a>
        </div>
        <div class="content">hi im here!</div>
    </div>

    <script>
        /*點擊彈出按鈕*/
        function popBox() {
            var popBox = document.getElementById("popBox");
            var popLayer = document.getElementById("popLayer");
            popBox.style.display = "block";
            popLayer.style.display = "block";
        };

        /*點擊關閉按鈕*/
        function closeBox() {
            var popBox = document.getElementById("popBox");
            var popLayer = document.getElementById("popLayer");
            popBox.style.display = "none";
            popLayer.style.display = "none";
        }
    </script>
</body>
</html>

樣式以下：html

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。