Closing modal dialog only on outside click

I made modal dialog for notifications in the top of my page, when I click on modal dialog it closes, exactly wherever I click it closes, how can I make to close only on outside click The code is below. I'm using angular 13

<a href="#"  data-toggle="modal" data-target="#notificationModal">
                    <i  data-toggle="modal"></i>
                    <span ></span>
                    <span  style="color: white;">10</span>

                    <div  id="notificationModal" tabIndex="-1" data-backdrop="false">
                        <div >
                            <div >
                                <div >
                                    <h5  id="exampleModalLabel" style="color: black;">
                                        Notifications</h5>
                                    <span  style="color: black;">Only show unread</span>
                                    <label >
                                        <input type="checkbox">
                                        <span ></span>
                                      </label>
                                </div>
                                <div  style="color: black;">
                                    <hr/>
                                    <div >
                                            <div 
                                                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>

CodePudding user response：

Maybe this is happening because your modal is wrapped inside the <a> tag link that toggles it? Try moving your modal outside of the <a> tag.

On a side note: It appears that you are using a bootstrap modal in this Angular 13 project. Are you aware that Angular Material has a built in modal service feature called MatDialog?

Angular Material Dialog