Modal pointer events

[colltoaction]

I'd like to suggest adding pointer events to the Modal component.

The addition would be something similar to:

.modal {
    pointer-events: none;

    .modal-dialog {
        pointer-events: auto;
    }
}

The idea is to allow click events to fall through to the modal-backdrop, which is covered by modal. This is very important to allow people not using the JS library to build on top of Bootstrap.

In my case, I'm using Angular and without that bit I can't bind a click handler to close the modal when tapping the backdrop:

<div class="modal fade show">
    <div class="modal-dialog" role="document">
        <!-- content -->
    </div>
</div>
<div class="modal-backdrop fade show" *ngIf="show" (click)="closeModal()"></div>

Thanks!

[patrickhlauke]

You'd probably even want to go a step further and use

.modal {
    pointer-events: none;

    .modal-content {
        pointer-events: auto;
    }
}

.modal-content rather than .modal-dialog

[colltoaction]

Just realized your suggestion doesn't scroll. I'm using modal-dialog instead of modal now:

.modal-dialog {
    pointer-events: none;

    .modal-content {
        pointer-events: auto;
    }
}

[mdo]

Can't do this if it disables scrolling. If there's another way, I'm happy to hear it, otherwise we probably have to close this as a won't fix.

[patrickhlauke]

Can't do this if it disables scrolling.

that was just my original suggestion (which I hadn't tested). @tinchou's code above does seem to work just fine in terms of not suppressing scrolling...incoming PR

[patrickhlauke]

confirmed that it doesn't prevent scrolling in iOS/Safari nor Chrome/Android. seems safe...

[aldencolerain]

@patrickhlauke It looks to me like pointer events should be disabled on modal not modal-dialog. Am I missing something? I had to move disabling pointer events up a level for this to work.