Angular 13实现仅点击模态框外部关闭弹窗的方案

你的问题根源在于DOM结构嵌套错误和backdrop属性配置不当，按以下步骤修复即可：

1. 调整DOM结构，移出嵌套的Modal #

当前你将Modal放在触发它的<a>标签内部，点击Modal区域时事件会冒泡到<a>标签，导致Modal意外关闭。需要把Modal元素从<a>标签中移出，作为独立的同级元素：

<a href="#" class="navbar-nav-link" data-toggle="modal" data-target="#notificationModal">
    <i class="icon-bell2" data-toggle="modal"></i>
    <span class="d-md-none ml-2"></span>
    <span class="badge border-white ml-auto ml-md-0" style="color: white;">10</span>
</a>

<!-- 将Modal移到a标签外部 -->
<div class="modal fade" id="notificationModal" tabindex="-1" data-backdrop="static">
    <div class="modal-dialog notification modal-dialog-scrollable">
        <div class="modal-content notModal" (click)="$event.stopPropagation()">
            <div class="modal-header">
                <h5 class="modal-title col-md-3" id="exampleModalLabel" style="color: black;">
                    Notifications</h5>
                <span class="col-md-7" style="color: black;">Only show unread</span>
                <label class="switch col-md-1">
                    <input type="checkbox">
                    <span class="slider round"></span>
                </label>
            </div>
            <div class="modal-body" style="color: black;">
                <hr/>
                <div class="table-responsive">
                    <div class="col-md-11"
                         style="padding: 3px; margin-left: 7px; max-width: max-content; color: black; ">
                        <div class='row' style="margin-bottom: 5px;">
                            <div
                                style="max-width: 250px; word-wrap: break-word; padding: 5px; background-color: #56bde9; border-radius: 10px; ">
                                text</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

2. 关键配置说明 #

• data-backdrop="static"：替换原来的data-backdrop="false"，该配置会保留Modal背景层，点击背景层（外部）时关闭Modal，同时避免点击Modal内部触发关闭；若需要保留ESC键关闭Modal的功能，可去掉此属性，仅依赖事件冒泡阻止逻辑。
• (click)="$event.stopPropagation()"：在modal-content上添加Angular事件绑定，阻止内部点击事件冒泡到Modal的关闭逻辑，确保点击Modal内部完全不会触发关闭。

3. 额外提示 #

如果你的项目使用的是Angular Bootstrap（ng-bootstrap）而非原生Bootstrap的jQuery版本，建议改用Angular官方Modal组件的API，通过backdrop和ignoreBackdropClick配置实现需求，更贴合Angular生态。但从你的代码来看，原生Bootstrap的修改方案完全适用。

内容的提问来源于stack exchange，提问作者e Res