modal-backdrop fade show in bootstrap

Question

Problem

I am stuck with bootstrap issue(probably). I have modal in my HTML file. When I called that modal it shows up with a fade-in effect. `

My modal:

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">New message</h5>
                <a type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </a>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="recipient-name" class="col-form-label">Number :</label>
                        <input type="number" id="replyNumber" min="0" data-bind="value:replyNumber"  class="form-control">
                    </div>
                    <div class="form-group">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
            </div>
        </div>
    </div>
</div>

In Here, the page displaying div that I never defined.

This modal works fine, But the issue is after this modal popup, I want to navigate another page using a router link. In that route I noted that <div class = "modal-backdrop fade show"</div> is still showing in my dev tools. As a result, I can't even click a button on that page. That page fully disabled.I'm really not good at frontend development, I stuck on this whole day, Please help me. Thanks!

NOTE

I have looked at this question on SO. But it didn't help me. Because I am not using jquery as an external library. I am not using CSS either.(This is my school assignment So I avoid using JS or jQuery)

UPDATE

Here is the way I open my modal

<div class="card text-center" *ngIf="touched">
    <img class="card-img-top" src="../../assets/svg/mailSent.svg" alt="Card image cap" style="  display: block;
        margin-left: auto;
        margin-right: auto;
        width: 10%;">
    <div class="card-body">
        <button  type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">ENTER CODE</button> <!-- This is the button that I use to open my modal -->
    </div>
</div>

@pc_coder Thank you for quick attention. I've updated the question. Can you refer to it, please? — , Jun 23 '20 at 17:23

mr. pc_coder · Accepted Answer · 2020-06-23T17:55:22.573

1

Demo the component that you openend modal implements with OnDestroy then

ngOnDestroy(){
  // dismiss your modal here
}

edited Jun 23 '20 at 17:55

answered Jun 23 '20 at 16:59

mr. pc_coder

16,412
3
32
54

Can you please add an example. Because I'm a newbie in angular.Thank you so much :) – Jun 24 '20 at 12:36

score 1 · Answer 2 · answered Aug 12 '20 at 22:06

1

Inside modal, use data-dismiss property on element you use to close the modal. Like this: <a class="btn btn-primary" data-dismiss="modal" (click)="emit()">Yes</a>

answered Aug 12 '20 at 22:06

Davi Carrano

331
2
4

modal-backdrop fade show in bootstrap

Problem

NOTE

UPDATE

2 Answers2