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/
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 have a few modals on my website all of them have the same HTML code, same styles and everything is 100% identical. But in this modal I have problem with its position, modal is a little bit lower and a little bit left. I included a screenshot of the actual modal.
I have tried to compare everything from this modal with other modals on my website and everything is identical.
<div id="myModal" id="darkModalForm" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div id="modal-body" class="modal-body">
</div>
</div>
</div>
</div>
this is a screenshot of actual problem:
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 am trying to disable the fade of a modal in bootstrap, but it will not work what ever I do, I have tried the below code but sitll not luck, I have looked all over google but no information on this I have noticed, except the 2 css things I have tried in the below code.
.dont-fade {
trasition: none;
opacity: 1;
}
I just want to disable the fade of a modal, and just have it like a div ontop of the whole page, without the fade.
Heres my html of my modal
<!-- Information on user popup -->
<div id="banModal" class="modal" role="dialog" style="">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Welcome!</h4>
</div>
<div class="modal-body">
<p>Hello, here is some test</p>
</div>
</div>
</div>
</div></div>
I had created a modal dialogue
Launch demo modal
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
</div>
i just called the modal from..
$("a#LaunchDemo").click();
but the modal is just blinking on the screen, i also called the modal through button click .same problem iam getting , where i went wrong?,Please help ..
You need to execute your javascript code when the DOM is fully loaded. And use modal instead of click
$(document).ready(function() {
$('#LaunchDemo').modal(options)
});
Demo: http://jsfiddle.net/MgcDU/1998/
It wrong when the with of model was too big.
You can try when set the stylesheet for modal class in bootstrap file {width:900}
It will happen....
Try removing the class hide from the modal div:
<div id="myModal" class="modalhidefade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
Remove the href="#myModal" in the hyperlink tag because that is trying to link you to a part of the page.
Also, you shouldn't need to specify the element type in your selector. It will be faster to just search for the element by ID.