python学习之网站的编写（HTML，CSS，JS）（十五）----------示例，弹出一个背景为半黑色，前面是白框的弹窗功能（已经编好的框架）

效果图，代码直接可应用，按自己的需要在其中加入想要的内容：

代码及讲解：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>逆水行舟不进则退</title>
    <style>
        /*通过display设置内容是否可以显现*/
        .hide{
            display: none;
        }
        /*设置背景的内容，位置固定，让它距离上下左右的距离都是0，即铺满整个页面，z-index设置为第几层内容*/
        /*opacity设置背景的透明度。*/
        .pg-back{
            position: fixed;
            background-color: #000000;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 9;
            opacity: 0.6;
        }
        /*使得白框处于中间的位置*/
        .pg-front{
            width: 500px;
            height: 400px;
            background-color: #ffffff;
            position: fixed;
            left: 50%;
            top: 50%;
            margin-left: -250px;
            margin-top: -200px;
            z-index: 10;
        }
    </style>
</head>
<body>
    <!--黑色底色背景开始-->
    <div id="i1" class="pg-back hide"></div>
    <!--黑色底色背景结束-->
    <!--白色弹窗开始-->
    <div id="i2" class="pg-front hide">
        在此输入想要弹出的内容
        <input type="button" value="弹回" onclick="cancel()">
    </div>
    <!--白色弹窗结束-->
    <div>
        <input type="button" value="弹出" onclick="show()">
    </div>
    <script>
        alert('欢迎来到逆水行舟不进则退的主页');
//        通过找到id，去掉或者加入hide属性，来控制弹窗的有无
        function show() {
            document.getElementById('i1').classList.remove('hide');
            document.getElementById('i2').classList.remove('hide');
        }
        function cancel() {
            document.getElementById('i1').classList.add('hide');
            document.getElementById('i2').classList.add('hide');
        }
    </script>
</body>
</html>

python学习之网站的编写（HTML，CSS，JS）（十五）----------示例，弹出一个背景为半黑色，前面是白框的弹窗功能（已经编好的框架）

相关推荐