• 157-7967-9664
网站弹出式窗口代码如何写?
作者:金点子 / 2023-12-19 / 浏览次数:128

做为一个程序员您应该要掌握网站弹出式窗口代码如何写,今天金点子小编就给大家分享。


网站弹出式窗口代码如何写?

```html

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>网站弹出式窗口</title>

    <style>

        body {

            font-family: Arial, sans-serif;

        }


        .overlay {

            display: none;

            position: fixed;

            z-index: 1;

            left: 0;

            top: 0;

            width: 100%;

            height: 100%;

            overflow: auto;

            background-color: rgba(0, 0, 0, 0.4);

        }


        .modal {

            background-color: #fefefe;

            margin: 15% auto;

            padding: 20px;

            border: 1px solid #888;

            width: 80%;

            max-width: 600px;

            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

        }


        .close {

            color: #aaa;

            float: right;

            font-size: 28px;

            font-weight: bold;

        }


        .close:hover,

        .close:focus {

            color: black;

            text-decoration: none;

            cursor: pointer;

        }

    </style>

</head>

<body>


    <h2>网站弹出式窗口示例</h2>

    <p>点击按钮打开弹出式窗口:</p>

    <button id="openModalBtn">打开弹出式窗口</button>


    <div id="myModal">

        <div>

            <span>&times;</span>

            <h3>欢迎来到我们的网站!</h3>

            <p>这是一个网站弹出式窗口。您可以在这里添加任何您想要的内容,例如产品介绍、优惠活动等。</p>

        </div>

    </div>


    <script>

        var modal = document.getElementById("myModal");

        var btn = document.getElementById("openModalBtn");

        var span = document.getElementsByClassName("close")[0];


        btn.onclick = function() {

            modal.style.display = "block";

        }


        span.onclick = function() {

            modal.style.display = "none";

        }


        window.onclick = function(event) {

            if (event.target == modal) {

                modal.style.display = "none";

            }

        }

    </script>


</body>

</html>

```


【吉安金点子信息科技有限公司】网站建设、网站设计、服务器空间租售、网站维护、网站托管、网站优化、百度推广、自媒体营销、微信公众号
如有意向---联系我们
热门栏目
热门资讯

网站建设 网站托管 主机域名 模板建站 价格套餐 案例展示 新闻动态 关于我们

备案号:赣ICP备2023000117号 txt地图 html地图 xml地图 

公司地址:江西省吉安市 咨询QQ:44554220 手机:18818914443 电话:157-7967-9664