Don't forget that the data- attributes have changed to data-bs- in Bootstrap 5.
When the button is dynamically created, set the correct attributes:
const updateButton = addTextandAttributes(btn_update,
"<img src=\"resources/cloud-plus-fill.svg\"></img>", {
"type":"button",
"class":"btn btn-outline-info btn-sm mt-1 me-2",
"data-bs-toggle": "modal",
"data-bs-target": "#updateModal"
});
Demo
Modal Form not showing up
Answer from Carol Skelly on Stack OverflowDon't forget that the data- attributes have changed to data-bs- in Bootstrap 5.
When the button is dynamically created, set the correct attributes:
const updateButton = addTextandAttributes(btn_update,
"<img src=\"resources/cloud-plus-fill.svg\"></img>", {
"type":"button",
"class":"btn btn-outline-info btn-sm mt-1 me-2",
"data-bs-toggle": "modal",
"data-bs-target": "#updateModal"
});
Demo
Modal Form not showing up
This is how you do it with Bootstrap5 and JavaScript only:
let elem = document.getElementById('exampleModalId')
let modal = new Modal(elem)
modal.show()
Modal not showing
html - Bootstrap 5 modal not working with starter template - Stack Overflow
Modal hide function is not working in bootstrap(v5)
Bootstrap modal not displaying - Stack Overflow
Videos
Hey!
This is my first post here.
I usually code in Python, where make small flask projects(websites) that's when i use Bootstrap.
My issue right now is that i have a frontpage where i display some messages written on ad admin page. The admin has to be able to delete post, that's where i'm using a modal.
link to the code: https://pastebin.com/SunUyKnf
EDIT: Link to main template, base.html https://pastebin.com/3XMRMzFZ
the HTML also contains jinja for displaying backend data.
I actually got help maybe a week ago with the modal, because it wasnt selecting the id of the post to delete.
I fixed that with {{ post.id }}
After that it worked! i was able to delete posts from the frontpage using the modal it was great!, so i went on to work on the look of the webpage, since i had mostly just been doing the backend stuff first.
then 2 days ago i just wanted to test it for a reason i can't remeber, and then it freakin didn't work anymore .I have been trying to solve the issue on and off for about 2 days.
I am about to loose my mind over this issue.
first it worked then it didn't and i havent touched the page since it worked, i don't get it.
I know it's modal that 's the problem because i've tested my backend and it works.
delete route:
@/app.route('/home/<int:post_id>/delete', methods=['POST','GET'])
@/login_required
def delete_post(post_id):
post = Post.query.get(post_id)
if current_user.is_authenticated:
db_session.delete(post)
db_session.commit()
flash('Post has been deleted','success')
return redirect(url_for('home'))
return redirect(url_for('home'))If i put in the URL /home/post.id/delete and press enter it will delete the post matching the id.
I thought this was the right place to ask, even though there is a bit of Python involved.
i sincerely hope somone here is able to help me, an i well apologies in advance if it's just some lame stupid mistake that i completety missed.
I tracked down the reason.
Just to give it some general usefulness to anyone coming to this question. If you can't figure out what's wrong, try doing a 'search all' for any classes of 'modal' 'fade' 'fade in' and 'hide' in any style sheets in your application.
I had a single instance of 'fade' being defined in a random css file, and that's what was stopping it displaying as it was overriding bootstrap. Once I deleted the reference, everything was ok.
I had the same problem. For me the cause was the use of Bootstrap 5 with outdated data-toogle and data-target attributes in the launch button:
After the correction of
Copy<button type="button" class="btn" data-toggle="modal" data-target="#myModal" >
to
Copy<button type="button" class="btn" data-bs-toggle="modal" data-bs-target="#myModal">
it ran correctly.
The modal plugin toggles your hidden content on demand, via data attributes or JavaScript. It also adds .modal-open to the to override default scrolling behavior and generates a .modal-backdrop to provide a click area for dismissing shown modals when clicking outside the modal. [source]
How to use via Vanilla JavaScript
Create a modal with a single line of JavaScript:
var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
source
A quick example:
Copyvar myModal = new bootstrap.Modal(document.getElementById("exampleModal"), {});
document.onreadystatechange = function () {
myModal.show();
};
Copy<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
crossorigin="anonymous"
/>
<title>Hello, world!</title>
</head>
<body>
<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">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>
<!-- JavaScript and dependencies -->
<script
src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
crossorigin="anonymous"
></script>
<script src="./app.js"></script>
</body>
</html>
Run code snippetEdit code snippet Hide Results Copy to answer Expand
As for your code, you didn't follow the right way to show/toggle a modal in Vanilla JavaScript. Why did you expect myModal.show() to happen while myModal is just a DOM element?
- Create a new instace of modal and then call show method(see usage points)
Copyvar myModal = new bootstrap.Modal(document.getElementById('exampleModal'))
myModal.show()
ref: https://v5.getbootstrap.com/docs/5.0/components/modal/#options
note: Bootstrap v5 no more uses jquery, instead it uses javascript. lots of changes are there in bootstrap v5, if you are working for a company and willing to use Bootstrap v5 then please go through all the changes.
Check the version of bootstrap. Take attention that in bootstrap 5 changed data-toggle to data-bs-toggle and data-target to data-bs-target
have you used the cdn or file popper.js
If you not include popper.js file you wont be able to see your modal windows
check the below cdn and put below jquery.js and bootstrap.js as follows below
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
Now it will work 100% if not I have another solution copy the below code and check it
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<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>
I feel like this should be rather simple, but I can't figure it out and it's starting to drive me crazy.
I am using Bootstrap (on the Java Play framework if that matters) and trying to make a simple modal. I copied a tutorial I found online, but for some reason the modal just won't show.
Here is the portion of code in question:
<body>
<div id="Header">
<div class="row text-right">
<a id="login-button" data-toggle="modal" data-target="#loginModal" type="button">Login</a>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="loginModal"
aria-hidden="true">
<div class="modal-dialog modal-sm">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Small Modal</h4>
</div>
<div class="modal-body">
<h3>Modal Body</h3>
</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>
</div>
@content
</body>Can anyone see what might be causing it to fail?
Edit: So I was looking at the CSS and for some reason the Bootstrap .modal class has display:none and .fade has opacity defaulted to 0. I can mess around in the browser tools and change that, but i'm not sure how to fix it permanently.