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
Answer from Adey on Stack OverflowCheck 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>
[Bootstrap]Modal not showing
My bootstrap modal pop is not working is not working on shopify store
Modal not showing 5.7 - Bug Reports - Bootstrap Studio Forum
Modal Not Working in Bootstrap
Videos
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.
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.