I am trying to create a bootstrap modal to pop up when clicking a button. I watched some trailers and did the same. Nothing happens when I click the button. I also copied an modal example from bootstrap but also not working. What is wrong?
here is the code:
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
This should work since it is copied from bootstrap webpage but it is not working.. Please help. I am using Flask if that is of any help.
Solved. Seems like I had bootstrap v.5 and I did copy modal from bootstrap v.4. It is working now!
Related
I've read several Q&A-s about it, all suggested a quite simple solution: to put a
data-backdrop="static" data-keyboard="false"
in the HTML tag of the button, which is responsible for the modal opening. For me, the button is:
<button type="button" class="btn btn-primary btn-danger m-2" data-bs-toggle="modal" data-bs-target="#exampleModal" data-backdrop="static" data-keyboard="false" (click)="onDelete(object.id)"><fa-icon [icon]="faTrash"></fa-icon></button>
and the complete modal is:
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<!-- <h5 class="modal-title text-center" id="exampleModalLabel">Biztosan törölni akarod?</h5> -->
<button type="button" #closeButton class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<h5 class="modal-title text-center" id="exampleModalLabel">Biztosan törölni akarod?</h5>
<p class="text-center">A törlés megerősítésével az adatbázisból is eltávolításra kerül a rekord.</p>
</div>
<div class="modal-footer justify-content-center">
<button type="button" class="btn btn-danger" data-bs-dismiss="modal" (click)="confirmDelete()">Törlés</button>
<button type="button" class="btn btn-primary" data-bs-dismiss="modal" (click)="declineDelete()">Visszavonás</button>
</div>
</div>
</div>
</div>
but every time I press ESC, or click outside of the modal, it just closes. I also tried to manage it from TS, with a #ViewChild modal (by refering to the modal DOM div), and a dialog: MatDialog property, then, in the onDelete() method, which is called when pressing the Delete button, I simply typed this.modal.open(dialog, { disableClose: true });, it did not work either. I'd prefer to just resolve it from the HTML though. Did i miss something? (I'm using angular 14.1.1 and bootstrap v5)
Backdrop has to be set to static so the modal will not close when clicking outside it but it is set as data-bs-backdrop="static" instead of data-backdrop="static"
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
Launch static backdrop modal
</button>
<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Understood</button>
</div>
</div>
</div>
</div>
Hello everyone I am trying to make a modal which shows an image when a button is clicked. But I ran into a problem and dont seem to understand why my image is not showing in my modal. I am using bootstrap 4.5.2 to make this modal.
When I use this url inside of the src: //placehold.it/600x400. The image works fine but when I link the same image from my folder named resources the image does not load.
Here is my code
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="dynamic-content">
<img src="Resources/600x400.png" alt="officeMap" class="img-fluid">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Here is my path
Changing the file path to PlanPage/Resources/600x400.png solved the problem.
I've got two Bootstrap 3 modals as below. One modal is switching to another - and there is a button - "Go back" to previous modal. Unfortunatelly modals are long and when I'm switching back - scrolling works but for website, not for previous modal. Anyone knows how to fix it?
I'm using the default bootstrap css and js files, google chrome
Complete HTML code as below:
<head>
<!-- scripts: jquery.min.js; bootstrap.min.js css: bootstrap.min.css -->
</head>
<body>
<button type="button" data-toggle="modal" data-target="#addOffer">Add offer</button>
<button type="button" data-toggle="modal" data-target="#viewOffer">View offer</button>
first modal:
<div class="modal fade" tabindex="-1" id="viewOffer" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">View offer</h4>
</div>
<div class="modal-body">
lots of text about offer here:
<button type="button" class="btn btn-info" data-dismiss="modal" data-toggle="modal" data-target="#addOffer">Go back</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
second modal:
<div class="modal fade" id="addOffer" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Add offer</h4>
</div>
<div class="modal-body">
lots of forms for new offer here:
<input id= "see_offer" name="see_offer" type="submit" class="btn btn-info" value="View offer" data-dismiss="modal" data-toggle="modal" data-target="#viewOffer" />
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Add .modal { overflow-y:auto; } to your css file.
The regular data-toggle:"modal" button will do, as suggested, toggle the modal visibility. The buttons in your page may remain so. However, you seem to want your modal buttons to hide one modal and show another, so set a function to them manually like so:
$("[hide-modal]").click(function () {
$(this).attr("hide-modal").modal("hide");
$(this).attr("display-modal").modal("show");
});
Then in your modal buttons:
<button type="button" class="btn btn-info" hide-modal="#viewOffer" display-modal="#addOffer">Go back</button>
<button type="button" class="btn btn-info" hide-modal="#addOffer" display-modal="#viewOffer">View offer</button>
Anybody know bootstrap modal background issue?
flickering background pixels
jsfiddle
HTML
<!-- Button trigger modal -->
<button type="button" id="mymodal" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
I changed .fade.in opacity property on bootstrap.min.css from 1 to 0.99: .fade.in{opacity:0.99}
and that solved the problem while a better solution appears.
* update*
try this on bootstrap.min.css
.fade.in{opacity:1;-webkit-backface-visibility: hidden;}
It looks like bug in bootstrap,
i got the same issue and i found out that it caused by elements on the page that got opacity property.
i manage to reproduce it on bootstrap site
hope it will help you.
furthermore, it happen only on chrome.
Problem Description
I have two views. The first one contains a link, which when clicked, should display the second view which is my custom modal. Both files are in the same folder called school.
Code
firstView.html
<html>
<head>Click the link</head>
<body>
<div>
<a data-toggle="modal" href="secondView.html" data-target="#secondView" >Additional Details</a>
</div>
</body>
</html>
secondView.html
<!-- Modal -->
<div id="secondView" class="modal hide fade" tabindex="-1" role="dialog" aria- labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
Issue at hand
The problem is that when I click on my link, it does not display anything. I checked the console, and it does not display any errors. So, I am thinking this has to do with the way I connect these two views, probably something to do with href tag.
I would appreciate your help folks.
From http://twitter.github.com/bootstrap/javascript.html#modals:
If a remote url is provided, content will be loaded via jQuery's load method and injected into the .modal-body.
So you'd do
firstView.html
<html>
<head>Click the link</head>
<body>
<div>
<a data-toggle="modal" href="secondView.html" data-target="#myModal" >Additional Details</a>
</div>
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria- labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<!-- Here be modal content -->
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
</body>
</html>
secondView.html
<p>One fine body…</p>