仅在外部单击时关闭模态对话框 - angular

Question

我在页面顶部为通知制作了模态对话框，当我单击模态对话框时，它会关闭，无论我在哪里单击它都会关闭，如何才能仅在外部单击时关闭代码如下。 我正在使用 angular 13

<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>

                    <div class="modal fade" id="notificationModal" tabIndex="-1" data-backdrop="false">
                        <div class="modal-dialog notification modal-dialog-scrollable">
                            <div class="modal-content notModal">
                                <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>
                </a>

Answer 1

也许这是因为您的模态被包裹在切换它的<a>标记链接中？ 尝试将模态框移到<a>标记之外。

附带说明：您似乎在此 Angular 13 项目中使用了引导模式。 您是否知道 Angular Material 有一个名为 MatDialog 的内置模态服务功能？

Angular 材料对话框