Just remove the data toggle in the html tag and write the
$('#myModal').modal('show')
or
$('#myModal').modal('toggle')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.
Just remove the data toggle in the html tag and write the
$('#myModal').modal('show')
or
$('#myModal').modal('toggle')Your code is fine, you need to include the js files in the <body> tag, not the head.
From their documentation:
Add our JavaScript plugins, jQuery, and Tether near the end of your pages, right before the closing body tag.
Here is the link where I found that info:
https://v4-alpha.getbootstrap.com/getting-started/introduction/
And a codepen of the js files included in the body and your code working correctly:
https://codepen.io/egerrard/pen/MEGgJE
Videos
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.
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.
Try this
<script src="js/bootstrap.js"></script> // This JS have all necessary files
Remove below JS from your file
<script src="js/bootstrap-modal.js"></script>
DEMO
Take care of all the (old) examples and tutorials, you find across the web and bootstrap 5.
The code for bootstrap5 looks slightly different, e.g.
data-toggle hast turned to data-bs-toggle.
so a complete BS5-example looks more like:
<div class="container">
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<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" id="exampleModalLabel">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">Save changes</button>
</div>
</div>
</div>
</div>
</div>
first thing you need to include jquery, and also trigger the modal, either with a button -
<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
or show the bootstrap modal using jquery -
<script type="text/javascript">
$(document).ready(function(){
$('.modal').modal('show');
});
</script>
Your example doesn't have jQuery included.
Uncaught Error: Bootstrap requires jQuery
You must include jQuery before including Bootstrap.
Also, Bootstrap Modal's need to either be toggled by some kind of control on the page, or by JavaScript: http://getbootstrap.com/javascript/#modals-usage
This means you either need a button with the appropriate data attributes, which would correspond to attributes set on your modal, or execute via javascript
via JavaScript:
$('.modal').modal('show')
Or via attributes on a control:
<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
EDIT: If you do this, you need to specify the target as the ID of the modal div
<div id="myModal" class="modal fade">
<!--modal content here -->
</div><!-- /.modal -->
Try this -
$(document).on("click", "#submit_btn", function(event){
alert( "GO" );
});
Or this -
$(document).delegate("#submit_btn", "click", function(event){
alert( "GO" );
});
If you are using an older version of jQuery you may have to use the live method instead.
Live method (use this only if you have to)
$("#submit_btn").live("click", function(event){
alert( "GO" );
});
I'm fairly certain that one of these 3 methods above will solve your issue. The reason your event handler doesn't work is because your submit_btn element doesn't exist at the time your event handler is evaluated. The above 3 handlers I gave you will work on a submit_btn element that exists now and in the future.
/edit
Here is a jsfiddle that works - http://jsfiddle.net/GqD4f/8/
/another edit
I made a jsfiddle using the approach you had in your post and it works - http://jsfiddle.net/CR3bM/1/
Are you not putting your event handler in DOM ready?
This works for me:
$(document).on("click", "#submit_btn", function(event){
alert("GO");
});