I have used bootstrap modal for my web page to display modal box inside another modal box. I used the following code to close the opened model and open an another modal.
<script>
function launch_modal(id) {
// Hide all modals using class if required.
$('.modal').modal('hide');
$('#'+id).modal('show');
}
</script>
<div class="modal fade" id="loginmodal" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body"> sample content
<div class="text-right">Forgot Password ?</div>
<div class="modal-bottom"></div>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
Everything works fine. But there is two scroll bars appeared on the right side of the window.
How to fix this or is there any other way to close opened model and open a new model inside a model box?
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'm working on a form that loads content from a checkbox menu.
If a user checks a box, a bootstrap v3.3.4 modal pops and the chosen content shows up in the modal.
Here is the code when the modal is closed:
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">My Modal Title</h4>
</div>
<div class="modal-body">
<div class="box">MY CONTENT IS HERE</div>
</div>
<div class="modal-footer">Footer text is here</div>
</div>
</div>
</div>
When the modal is opened, a style is being added to <div class="box">
like this: <div class="box" style="display: block;">
I'd really like to add more styles to that div, but only when the modal is open. From where does the style get added? I've checked my jquery.js and bootstrap.js files and can't figure it out. Also tried various if statements to no avail. i.e. $('#myModal').is(':visible');
Thanks so much for any advice.
The easiest way is to check if a modal is opened or not is to check if the modalElement has the class 'in' appended to it when the modal is opened.
$('#myModal').hasClass('in')
Working example : http://jsfiddle.net/3kgbG/1151/
I'm trying to make a modal dialog prompt using bootstrap but when I click on my specific button I need to add the modal to but it doesn't work.
Below is my code for the modal section and below that is my button code:
<div class="modal fade" id="Register/Login" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4>Register/Login</h4>
</div>
</div>
</div>
</div>
This is my button code:
<li>Register/Login
</li>
#JordanMitch226, just try to rename the id, replace the '/' to underscore, and of course, don't forget to load the boostrap.js and boostrap.css in your page.
As said, change the ID of the modal to not have a /, include the bootstrap.js and bootstrap.css, and add a data-target to your button.
<li>Register/Login</li>
<div class="modal fade" id="RegisterLogin" role="dialog">
...
</div>
See my fiddle: https://jsfiddle.net/2m4vxcxz/
See Bootstrap's Modal documentation: http://getbootstrap.com/javascript/#modals
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>
When I open a modal window it scrolls the background context all the way up to the top. Example I have links on the bottom of the page that open a modal window. When I click on the link the window will scroll up to the top of the document then display the modal window. I have no problem with the positioning of the modal window. I just don't want the scroll up to occur before it opens the page. I'm using mostly the default CSS that came from BS v3 (latest on github) and pretty much the default modal body. I am using JS to populate the label and body of the modal then opening it
<!-- Modal -->
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<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">Modal title</h4>
</div>
<div class="modal-body" id="myModalBody"></div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
I had the same problem. I had a button calling a javascript function to open the modal:
open modal
and changed it to:
open modal
and this solved the scrolling to top problem.
I am using bootstrap 3.3.7 I believe.
I found the problem was some CSS I used to always force a scrollbar. This CSS gave the body a height of 100%. As soon as I removed this the modal worked perfectly without scrolling to top.
It could be the position of your modal code in the HTML tree, try moving it levels up or down.
I found this answer resolves it more broadly: Bootstrap modal: background jumps to top on toggle
Just add the following CSS to your page:
body.modal-open {
overflow: visible;
}