html之点击模态框边缘隐藏模态框


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模态框点击外部mask层消失title>
    <style>
        .box{
            display: none;
        }
        .inner-box{
            border: 1px solid red;
            width: 300px;
            height: 300px;
            position: fixed;
            left: 50%;
            top: 50%;
            background: white;
            margin-left: -150px;
            margin-top: -150px;
            z-index: 9999;

        }
        .mask{
            position: fixed;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            background: #3c3c3c;
            opacity: 0.3;
            filter: alpha(opacity=0.3);
            z-index: 9990;
        }
    style>
    <script src="./jquery-3.2.1.min.js">script>
    <script>
        $(function () {
            var $div = $('.box');
            var $btn = $('button');
            $btn.click(function () {
                $div.show();
                return false;//阻止冒泡
            });
            $(document).click(function () {
                $div.hide();
            });
            $('.inner-box').click(function () {
                return false;
            });
            $('a').click(function () {
                $div.hide();
            });
        })
    script>
head>
<body>
<div class="content">
    你好呀
    <button>点我button>
div>




<div class="box" id="box">
    <div class="inner-box">
        <a href=""><span>关闭span>a>
    div>
    <div class="mask">div>
div>

body>
html>

你可能感兴趣的:(HTML)