jquery-模态框的显示与消失操作

最新推荐文章于 2022-08-05 16:12:07 发布

鲸鱼编程pyhui

最新推荐文章于 2022-08-05 16:12:07 发布

阅读量3k

点赞数

本文链接：https://blog.csdn.net/ifubing/article/details/99853987

版权

完成的代码

<!DOCTYPE html>
<!--作者：pyhui-->
<html lang="zh-CN">
<head>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .modal{
            background: black;
            position:fixed;
            left:0;
            top:0;
            right:0;
            bottom:0;
            opacity: 0.4;
            display: none;
        }

        .info{
            position: fixed;
            background-color: white;
            width: 400px;
            height: 300px;
            left:50%;
            top: 50%;
            margin-top:-150px;
            margin-left:-200px;
            display: none;
        }
        form{
            width: 80%;
            height: 40%;
            /*background-color: yellow;*/
            margin: 50px auto 0;

        }
    </style>

<!--    js-->
    <script>

        $(main);

        function main() {
            // 绑定事件，当取消的按钮被点击的时候，有一个函数对应
            $("#btn_cancle").click(dismiss_modal);
            // 绑定事件，当显示按钮被点击的时候，模态框显示
            $("#btn_show").click(show_modal);
            
            // 让模态框出现
            function show_modal() {
                $(".modal").css("display","block");
                $(".info").css("display", "block");
            }


            //让模态框消失
            function dismiss_modal() {
                // 目标，点击取消，让模态框消失
                // 拿到标签对象
                var $divInfo = $(".info");
                // 操作标签对象的属性，设置css的display为none
                $divInfo.css("display","none");
                $(".modal").css("display","none");
            }
        }



    </script>
</head>
<body>

<input type="button" value="显示" id="btn_show">

<!--遮罩层-->
<div class="modal">1</div>

<!--信息层-->
<div class="info">
<!--    表单-->
    <form action="">
        姓名：<input type="text" name="username"> <br>
        <input type="submit" value="提交">
        <input type="button" value="取消" id="btn_cancle">
    </form>
</div>

</body>
</html>