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>
Related
I want an image inside my modal box. I am using CodeIgniter and the image is located in the same folder as my modal box's page.
This is my modal code
<div class="modal fade" id="modalWin" tabindex="-1" data-backdrop="false">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="winnerDraw">Drawing Winner</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<img src="C:\xampp\htdocs\raffle1\application\views\webRaffle.png" height="200px" width="450px">
<p>{winner name}</p>
</div>
</div>
</div>
</div>
And I already have the necessary boostrap headers as well as script headers.
The img.src is pointing at your C drive.
You can use a relative url, say src="webRaffle.png".
This question might be flagged as duplicate but my issue isn't solved by the things mentioned in the relevant SO thread, here is the link to that
I have to make a modal with an Image into it and stack it into an existing AngularJS application. So, by far what I have done is this. When I do data-backdrop="false", the whole black tint gets removed and that's pretty obvious. But I don't want that. I want the black tint to remain there but behind the modal not stacking on top of it.
How can I do that, without using jQuery.
Here is my code:
<li ui-sref-active="active">
<a href="javascript:;" data-toggle="modal" data-target="#myModal">
<i class="fa fa-bullhorn" style="color: #fff200"></i>
<span id="glow" style="color: #fff200">What's New</span>
</a>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 class="modal-title" style="color: #000"><strong>New Features</strong></h3>
</div>
<div class="modal-body">
<center>
<img ng-src="{{'images/'+ 'Screen.png'}}" alt="New Features Screenshots" class="img-thumbnail img-responsive">
</center>
</div>
</div>
<!-- <div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div> -->
</div>
</div>
</div>
</li>
I used to have the same problem like you when using angularjs with bootstrap. Changing z-index of the dialog and the back-drop fixed the issue for me. Hope this helps you.
.modal-backdrop {
z-index: 1040;
}
.modal {
z-index: 9999;
background-color:transparent!important;
}
Hey i know this question is a bit old, but i found a bit of a modification to work for me.
i was using angular cli > 6.0.0. I also used ng-bootstrap version 2.0.0
go into styles.css right under src, use
.modal-backdrop{
z-index: 20;
}
i found that the .modal had a z index of 40 so i just modified the backdrop to have a 20 z index.
`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/
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
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;
}