I just attached a bootstrap modal to a button on a Wordpress site, and it's working great.
But the problem is, the modal hides the navigation menu (specifically the "blog" link) when it's inactive, the first time. After you open the modal and close it out, the modal disappears and the menu works fine.
I've tried a few things, like fiddling with the z-index, and also I tried hacking a script together:
<script>
jQuery(document).ready(function() {
jQuery('#subscribe').modal('hide')
});
</script>
So far, no dice. But maybe you can tell from the script, I'd just like to put the modal on hidden state when the page loads, and only have it called when they click the button.
Here's my site. If you try clicking on the "blog" link on a laptop or smaller screen, you can't, because it's hidden by the modal:
http://jackalopemedia.com/jasontreu
Appreciate any help!
Ok I found the solution
You must add a class called hide. Because fade function is to set opacity:0 of the div. So its just hide in-front of the page.
So your line should be
<div id="subscribe" class="modal hide fade" role="dialog">
For more details visit bootstrap
Compare Your Modal With This, If Your Code Match With This, It Should Be Working.
<div class="modal fade hide" id="myModal" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h2>Title</h2>
</div>
<div class="modal-body">
<span>body</span>
</div>
<div class="modal-footer">
<span id="spanbtnclode" > <button type="button" class="btn btn-default" data-dismiss="modal">Close</button></span>
</div>
</div>
</div>
</div>
Related
I am working on a page that checks if the user is currently logged in before he can do anything else. If the user is not logged in, the login modal loads and the user should not be able to do anything else unless he logs in. So far, this is what is working:
function checkrater(){
var rater=document.getElementById("initials").value;
if(rater.length <=0)
{
var myModal = new bootstrap.Modal(document.getElementById('loginModal'), {})
myModal.toggle()
}
}
and the HTML is this:
<body style="padding:5px;" onload="checkrater();">
<div class="modal fade show" style="display: block;" id="loginModal" role="dialog" data-backdrop="static" data-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">Please login</h5>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Login</button>
</div>
</div>
</div>
</div>
I am using bootstrap 5 for my CSS and the modal loads perfectly. My problem is when I click outside the modal, it still hides. I don't know if I did something wrong because I already tried it on another page and it still does not work. I tried it in Chrome and Firefox but got the same result.
The issue is that you're using Bootstrap 5, but the syntax is of Bootstrap 4. All the data-* attributes of Bootstrap 4 are now data-bs-* in Bootstrap 5 to help the user identify their own data-* from Bootstrap's.
So in your code, change data-static to data-bs-static & data-keyboard to data-bs-keyboard and your code should work fine.
for more clarification
bootstrap 4
data-keyboard="false" data-backdrop="static"
bootstrap 5
data-bs-keyboard="false" data-bs-backdrop="static"
I am attempting to create a modal-dialog that opens on the button click. However, when I do this the modal-dialog opens being the modal-backdrop and the screen becomes grey and unclickable. This also results in the dialog being under the header of the site.
I am currently using to Laravel Spark framework, however I believe this should be universal for all.
This is my HTML.
<spark-tokens :tokens="tokens" :available-abilities="availableAbilities" inline-template>
<div>
<div>
...
<button class="btn btn-danger-outline" #click="approveTokenDelete(token)">
<i class="fa fa-times"></i>
</button>
...
</div>
...
<!-- Delete Token Modal -->
<div class="modal fade" id="modal-delete-token" tabindex="-1" role="dialog">
<div class="modal-dialog" v-if="deletingToken">
<div class="modal-content">
...
</div>
</div>
</div>
</div>
</spark-tokens>
This is the JS that I am using to open the modal.
module.exports = {
...
methods: {
...
/**
* Get user confirmation that the token should be deleted.
*/
approveTokenDelete(token) {
this.deletingToken = token;
$('#modal-delete-token').modal('show');
},
...
}
};
I have seen problems similar to this being asked but none of the solutions have worked for me. I have tried moving the "modal fade" div outside of it's encompassing div (so right about the tag). This caused the dialog to not show up at all. I have attempted to change the z-index of modal-backdrop, however, I cannot find the correct file to change this in. Is there another solution to this problem? Any help you all can provide will be greatly appreciated. Thank you!
I have a SignIn button, which opens a modal in which I used ng-include to show another html page in that modal.
See the code below:
<div class="modal fade" id="loginpop" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
</div>
<div class="modal-body">
<div ng-include="'views/newlogin.html'"></div>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
Now in "newlogin.html", I have a link as shown below:
Forgot Password
On clicking it,should redirect to /forgotpassword page,which is working correctly but the modal backdrop stays.
You can see it here.
I tried many solutions like
data-dismiss="modal"
and also
$('#loginpop').modal('hide')
none of them worked for me. Please provide something.
Thanks in advance.
I'm new to stackoverflow, so kindly overlook any discrepancies.
I could finally use a script to solve the issue above.
I included:
$('#modal-clear').click(function(){
$('#loginpop').modal('toggle');
$('.modal-backdrop').remove();
the above script in the newlogin.html page where i have the links. I added id=#modal-clearto the /forgotpassword link and boom!
Now its working.
I open a modal, then on click of a div within the modal I want to close that modal and open another one. But when I do this it closes the first modal and only shows the background of the second modal with the body not displayed.
My HTML is:
<div id="test-modal" class="modal hide fade" data-keyboard="true">
<div class="modal-body">
<div id="option"><p>Click here to show the next modal</p></div>
</div>
</div>
<div id="test-modal2" class="modal hide fade" data-keyboard="true">
<div class="modal-body">
<p>modal show after a hide doesn't work?</p>
</div>
</div>
and my jquery is:
$('.option').click(function() {
$('#test-modal').modal('hide');
$('#test-modal2').modal('show');
});
This can help:
Remove hide class from modals divs
You use .option in your selector, but in html you use id="option", so change them
Working version
My Stupid mistake the jquery works. I accidently didnt close off the first modal properly which is why the animation wouldnt finish and cause the second modal to not load. I simply put the secondary modal on top of the first modal to test and it worked.
Please try using this data-dismiss attribute on close button.
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
I've placed a button to activate a 'twitter bootstrap modal' on the 3rd tab within a 'navtab'. When the modal button is clicked there is a short delay then the 1st tab of the navtab is set to active. At no point is the modal visible.
My assumption is that the modal defaults to the first tab and that when the tab changes from tab 3 to tab 1 an event is fired that causes the modal to close.
Which leads me to the question: how can I set the modal to activate on tab n rather than tab 1?
Am I completely wrong about what is happening here? Any help would be appreciated. Thank you
<button class="btn btn-primary" id="tester">Detailed</button>
<div class="modal fade bs-example-modal-sm" id="mymod" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
...
</div>
</div>
</div>
<script type="text/javascript">
$(document).on('click', '#tester', function(){
$("#mymod").modal('show');
});
</script>
My problem was that I didn't have the proper javascript library loaded for bootstrap.
Adding bootstrap-modal.js to my static assets solved my problem.