javascript - CSS 和 JS - 单击背景时删除模式

Question

目前我正在为我的系统制作自己的模式。当您单击包的名称时，会弹出并显示模式。我添加了一些 JQuery，当单击背景时应该删除模式。它确实做到了这一点，但当我单击模式本身时它也会隐藏。

我尝试将 z-index 3 添加到父级，将 z-index 4 添加到模态，但这不起作用。我怎样才能做到这样，如果单击背景，模式就会消失，但是当单击模式本身时，它什么也不做，人们可以与模式正常交互？

我有一个小插图

使用 Ajax 将弹出窗口附加到父级(见下文)

<div class="container-fluid pt-5 ">
        <div class="row">
            <div class="col-md-6">
                <h3>{{ __('Packages') }}</h3>
            </div>
        </div>
        <div class="row my-5">
            <div class="col-md-4">
                <div id="package-loading" class="text-center">
                    <i class="fas fa-spinner fa-pulse fa-2x color-primary"></i>
                </div>
                <p id="package-error" class="text-danger" style="display: none"></p>
                <div id="packages-wrapper"></div>
            </div>
        </div>
    </div>
    <div class="popup-list">

    </div>

    <script>
        $.ajax({
            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'), 'X-Requested-With': 'XMLHttpRequest'},
            url: 'https://www.rainierlaansite.test/api/packages/get',
            type: 'GET',
            data: {},
            success: function(data) {
                $('#package-loading').fadeOut();
                let wrapper = $("#packages-wrapper");
                let popup_list = $('.popup-list');
                let popup = 'popup-id';

                if(data == null) {
                    console.log('lol')
                }
                $.each(data, function(index, value) {
                    let el = data[index];
                    wrapper.append(
                        '<div class="row my-4" data-id='+ el.id +'>' +
                            '<div class="col-2 d-flex justify-content-center"><i class="far fa-archive fa-2x"></i></div>' +
                            '<div class="col-6">' +
                                '<a href="#" class="popup" data-popup-id="'+ el.id +'"><h6 class="m-0">'+ el.name +'</h6></a>' +
                                '<p class="m-0 sub-text">'+ el.description +'</p>' +
                            '</div>' +
                            '<div class="col-4 d-flex justify-content-end align-items-center">' +
                                '<a href="#" id="download_package" class="badge badge-pill badge-light popup '+ (el.price == 0 ? 'badge-primary': 'badge-light') +'" style="font-size: 14px;" data-popup-id="'+ el.id +'">' + (el.price == 0 ? 'Download': '$ ' + el.price) +'</a>' +
                            '</div>' +
                        '</div>' + '<hr>'
                    );
                    popup_list.append(
                        '<div class="package-popup shadow popup-'+ el.id +'">' +
                            '<div class="package-popup-dialog">' +
                                '<div class="package-popup-content">' +
                                    '<div class="row">' +
                                        '<div class="col-2">' +
                                            '<div class="row">' +
                                                '<div class="col-12 d-flex justify-content-center">' +
                                                    '<i class="far fa-archive fa-3x"></i>' +
                                                '</div>' +
                                            '</div>' +
                                        '</div>' +
                                        '<div class="col-7">' +
                                            '<div class="row">' +
                                                '<div class="col-12">' +
                                                    '<h4 class="m-0">' + el.name + '</h4>' +
                                                    '<p class="sub-text">' + el.creator + '</p>' +
                                                '</div>' +
                                            '</div>' +
                                        '</div>' +
                                        '<div class="col-3 text-center">' +
                                            '<h4><a href="#" id="download_package" class="badge badge-pill '+ (el.price == 0 ? 'badge-primary': 'badge-light') +'">' +
                                                (el.price == 0 ? 'Download': '$ ' + el.price) +
                                            '</a></h4>' +
                                        '</div>' +
                                        '<div class="offset-2 col-7">\n' +
                                            '<div class="rating">\n' +
                                                '<span><i class="fas fa-star yellow"></i></span>' +
                                                '<span><i class="fas fa-star yellow"></i></span>' +
                                                '<span><i class="fas fa-star yellow"></i></span>' +
                                                '<span><i class="fas fa-star yellow"></i></span>' +
                                                '<span><i class="fas fa-star grey"></i></span>' +
                                                '<small><a href="">· Uit 300 beoordelingen</a></small>' +
                                            '</div>' +
                                            '<small>Nog geen beoordelingen</small>' +
                                        '</div>' +
                                        '<div class="col-3 text-center">'+
                                            '<i class="far fa-download"></i> ' + el.downloads +
                                        '</div>' +
                                    '</div>' +
                                    '<div class="row my-5">' +
                                        '<div class="col-12">' +
                                            '<nav>' +
                                                '<div class="nav nav-tabs" id="nav-tab" role="tablist">' +
                                                    '<a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Details</a>' +
                                                    '<a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Reviews</a>' +
                                                    '<a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Version history</a>' +
                                                '</div>' +
                                            '</nav>' +
                                            '<div class="tab-content" id="nav-tabContent">' +
                                                '<div class="tab-pane fade show active py-4" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">' +
                                                    '<p>' + el.description + '</p>' +
                                                '</div>' +
                                                '<div class="tab-pane fade py-4" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">' +
                                                    'Dit is twee tekst' +
                                                '</div>' +
                                                '<div class="tab-pane fade py-4" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">' +
                                                    'Dit is tekst 3' +
                                                '</div>' +
                                            '</div>' +
                                        '</div>' +
                                    '</div>' +
                                '</div>' +
                            '</div>' +
                        '</div>'
                    );
                });

                $('.popup').on('click', function () {
                    if($(this).data(popup)) {
                        let item = $('.popup-' + $(this).data(popup));
                        item.addClass('show');
                        $(item).on('click', function() {
                            item.removeClass('show');
                            console.log('ik klik op de achtergrond');
                        })
                    }
                });
            },
            error: function(e) {
                $('#package-error').fadeIn().text("Unfortunately there was an error retrieving the packages");
            }
        });
    </script>

HTML

SASS

.package-popup
    position: fixed
    top: 0
    left: 0
    height: 100%
    width: 100%
    display: none
    overflow: hidden
    background-color: $primary_background_transparent
    z-index: 3
    .package-popup-dialog
        max-width: 960px
        position: relative
        margin: auto
        top: 100px
        background-color: $color-white
        border-radius: 16px
        padding: 3rem
        z-index: 4
        pointer-events: none
        .package-popup-content
            position: relative
            pointer-events: auto
            display: flex
            flex-direction: column

Answer 1

只需检查点击事件目标:

$(item).on('click', function(event) {
  if (event.target.classList.contains("shadow")) {
    // Close dialog
  }
}

从 CSS 中删除 pointer-events: none 以使其正常工作