We Keep Coding

modal-backdrop fade show in bootstrap

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">×</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>

Demo the component that you openend modal implements with OnDestroy then
ngOnDestroy(){
// dismiss your modal here
}

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>

BootStrap Javascript Modal

Ok, so I attempted to implement a modal to my website but to my dismay, I've run into a problem where the firstly the modal is faded out and secondly, the text doesn't display nor am I able to click away.
The modal on my website
<button type="button" class="btn btn-blue btn-effect" data-toggle="modal" data-target="#myModal">HORRAY!</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
Close
edit: I'm very new to Javascript, I only start coding again after a 5 year hiatus
edit: after trying fiddle, i've come to a guess that it's an issue in my css

If your code is like this one, I believe the problem is in the space between data-dismiss. Despite that your code works just fine
<button type="button" class="btn btn-default" data- dismiss="modal">Close</button>
http://jsfiddle.net/3kgbG/1637/

links inside modal appearing before opening the modal and messing up the page interface

I have a modal which appears when a button is clicked but the links present inside the modal appears before even opening the modal, they are invisible though but they are present because if a user clicks on the page the link inside the modal gets clicked.
To see it, open filemile.ga and hover your mouse over the logo.
<button type="button" class="btn btn-info btn-sm " data-toggle="modal" data-target="#myModal">more</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog" >
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h2 class="modal-title">Top Searches</h2>
</div>
<div class="modal-body">
lots of links here
<p>Link1</p>
<p>Link2</p>
<p>Link3</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

Replace <div class="modal fade" id="myModal" role="dialog" > with <div class="modal fade hide" id="myModal" role="dialog" >
This hide class will set your modal inaccessible, bootstrap will take it off when you click the button.
This site you commented uses Bootstrap 2.3 link to documentation. If you edit it, this site will help you.

I just and a CSS style that seems to resolve.
On the first div of the Modal, whose the id is myModal just add the flolowing:
<div class="modal fade" id="myModal" role="dialog" style="display:none;">

Change contents of a modal without closing it

Suppose I have a series of modals in same page opened by clicking on different pictures. 2 of them like this:
<!-- FIRST MODAL -->
<div class="modal fade" id="modal1" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title boldfont">THIS IS MODAL 1 HEADER</h3>
</div>
<div class="modal-body">
<img src="images/lorem1.jpg" class="img-responsive">
</div>
<div class="modal-footer">
<p class="modaltext">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- SECOND MODAL-->
<div class="modal fade" id="modal2" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title boldfont">THIS IS MODAL 2 HEADER</h3>
</div>
<div class="modal-body">
<img src="images/lorem2.jpg" class="img-responsive">
</div>
<div class="modal-footer">
<p class="modaltext">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Now after a modal is opened, to switch the next picture the user has to close the modal and click on another picture. I want the user to be able to click somewhere on the currently open modal and switch to the next modal's content without closing it.
I added the following code into footer but it looks bad since it closes the modal and animates a new one in. I just want the content to change.
<button type="button" class="btn btn-primary" data-dismiss="modal" data-toggle="modal" data-target="#modal2">next</button>
Any help is appreciated, thanks in advance.

Probably not the most elegant, but here's how I've managed to achieve your request plus toggling back and forth.
Add another button to the footer of Modal1
Add another button to the footer of Modal2
Add the following script to your javascript for 3
1
<button class="btn btn-primary" onclick="nextMod()">Go to Modal 2</button>
2
<button class="btn btn-primary" onclick="priorMod()">Return to Modal 1</button>
3
function nextMod() {
$("#modal2").show();
$("#modal1").hide();
}
function priorMod() {
$("#modal1").show();
$("#modal2").hide();
}
Hope this helps

Bootstrap modal issue (not able to show the second modal)

So I have two modals which are triggered depending on the button I click
The first one is trigeered like this:
<a id="de_details" data-toggle="modal" data-target=".show-de-banks"> </a>
And it is built this way
<div class="modal fade show-de-banks" tabindex="-1" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
bla bla
<div class="modal-body">
bla bla
</div>
<div class="modal-footer">
bla bla
</div>
</div>
</div>
</div>
An the second one is called using a button:
<button class="btn btn-warning" data-toggle="modal" data-target=".open-dialog">Open dialog with IT-Team</button>
And it is built the same way:
<div class="modal fade open-dialog" tabindex="-1" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
dsfgdfg
</div>
<div class="modal-body">
sdgfsdgsd
</div>
<div class="modal-footer">
sdfds
</div>
</div>
</div>
</div>
When I open the first one, I have no issue.
But when I want to open the second one, it disappear as soon as it has appeared.
I know that:
I have to include only one js bootstrap file
My scripts have to be at the end (for the sake of page rapidity loading)
Do I miss something?

As says comment of Ubiquitous Developers Bootstrap modal issue (not able to show the second modal) you should give button type as button
<button type="button" class="btn btn-warning" data-toggle="modal" data-target=".open-dialog">Open dialog with IT-Team</button>

This is an old question, but I had the same issue and found this.
In your first modal, your div with class modal-header isn’t closed - you’re missing a </div>.
This means that the second modal will sort of be inside the first, which causes issues.
I found the issue by looking in the Elements tab of Chrome’s F12 tools, which shows issues like this well.