Shaded bootbox dialog - javascript

I'm using bootbox to create bootstrap modals. Here is how I'm creating a sample one:
bootbox.dialog({message: "hello"});
My problem is that the rendered dialog is kind of disabled (all screen is shaded), I can't click on it and even ESC cannot make the modal disappear!
When I inspect the dialog element in the browser this is what I see:
<div class="bootbox modal fade in" tabindex="-1" role="dialog" style="display: block;" aria-hidden="false">
<div class="modal-backdrop fade in" style="height: 321px;"></div>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="bootbox-close-button close" data-dismiss="modal" aria-hidden="true" style="margin-top: -10px;">×</button>
<div class="bootbox-body">hello</div>
</div>
</div>
</div>
</div>
I checked with bootbox examples and it looks like it's the same CSS classes that have been used. So what's wrong here?

I've to to add the following CSS to fix the problem:
.modal-backdrop.fade.in {
z-index: 0;
}

Related

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>

Modal Does Not Work

`cell = '<div class="col-4"><div class="card" style="width: 18rem;">\
<img class="card-img-top" src="products/'+thumb+ '" alt="Card image cap">\
<div class="card-body">\
<h5 class="card-title">'+title+ '</h5>\
<p class="card-text">'+cats+'</p>\
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Show More</button>\
</div>\
</div></div>
Code in another page:
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<span id="message">Thank You </span>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
Please help me. My modal doesnt show no matter how many times i try. Does modal work in bootstrap cards? No matter how many times i press the button the modal doesnt show. My modal is in another html page. Is there a problem with that? Im using visual studio code
The HTML for the modal must be on (or available) to the page that you're calling it from and wanting it to pop up on. For example:
<html>
<head>
stylesheets
bootstrap javascript libraries
</head>
<body>
<h1>Welcome</h2>
<section>
Content ....
<button>Open the modal!</button>
</section>
<footer></footer>
<div class="modal">
Put modal at bottom
</div>
</body>
</html>
Then, make sure that you are linking to the Bootstrap javascript files and jQuery for the modal to work. Bootstrap has a convenient CDN link for this at https://www.bootstrapcdn.com/

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

HTML frame - Prevent bootstrap popup to disappear when user click body

I am using bootstrap modal popup to show a a message. When I am using the below statement inside a html frame then modal dialog is getting disappear when user click anywhere in the body . My requirement is to prevent this popup to disappear.
$('#testModel').modal({backdrop: 'static', keyboard: false});
<div class="modal fade" id="testModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body err-cnct">
<h2><i class="demo-icon fa-lg icon-cancel"></i></h2>
<p> <h4 class="modal-title">Connection Error!</h4>
Connection to the Hub has been lost. <br/>Please check power and Ethernet connections. </p>
</div>
</div>
</div>
</div>
Thanks.
See the documentation here. Set a data attribute as such:
data-backdrop="static"

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.

Categories