css与js写的原生modal 框，点击页面其他地方渐变消失

躺平程序员老修

发布于 2023-09-05 15:37:50

31000

代码可运行

文章被收录于专栏：躺平程序员老修躺平程序员老修

运行总次数：0

代码可运行

HTML

<div class="mui-row">
    <div class="mui-col-xs-6 mui-text-center" style="border-right: solid 1px #E5E5E5;">
        <div><a href="javascript:void(0);" class="quick-shot">点此弹出modal</a></div>
    </div>

    <!-- modal -->
    <div class="mui-col-xs-12 mui-text-centeri">
        <div class="quick-shot-content">
            <div class="quick-shot-img">
                <img src="{{ empty($confuse->quick_shot) ? asset('/images/course_poster.jpg') : $confuse->quick_shot }}" width="100%">
            </div>
        </div>
    </div>
</div>

<!-- 阴影遮挡部分 -->
<div class="shade"></div>

CSS

        .quick-shot-content {
            display: none;
            position: relative;
        }
        .quick-shot-img {
            margin: auto;
            position: absolute;
            left: 0; bottom: 0; right: 0;
            z-index: 9999;
        }
        .shade {
            display: none;
            top: 0;
            left: 0;
            background-color: #000;
            opacity: 0.5;
            filter: Alpha(opacity=0.2);
            height: 100%;
            width: 100%;
            position: fixed;
            z-index: 9998;
        }

JS

        $(document).on('click', '.quick-shot', function(e){
            $('.shade').fadeIn(300);
            $(this).parent().parent().parent().find('.quick-shot-content').fadeIn(150);
            stopPropagation(e);

        });

        function stopPropagation(e) {
            if (e.stopPropagation)
                e.stopPropagation();
            else
                e.cancelBubble = true;
        }

        $(document).ready(function(e) {
            $(document).click(
                function(e){
                $('.shade').fadeOut(300);
                $('.quick-shot-content').fadeOut(150);
                }
            );
        });