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"
Related
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'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 am using modal from bootstrap
<div aria-hidden="hide" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="myModal" class="modal fade" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 id="myModalLabel" class="modal-title"></h4>
</div>
<div id="myModalBody" class="modal-body modalScroll"></div>
<div class="modal-footer">
<button data-dismiss="modal" class="btn btn-default" type="button">Close</button>
</div>
</div>
</div>
</div>
This is my main modal box and I send some information and show modal when I need to inform user at the moment. But my idea is using this modal to show images and when user choose one I will save as avatar. So I created function like below:
<script>
$('#avatar').click(function() {
showMessage();
});
$('#eee').on('click', function() {
alert('333');
});
function showMessage(){
var txto = '<div id="eee">test me test</div>';
$('#myModalLabel').append('Coose Your avatar');
$('#myModalBody').append(txto);
$('#myModal').modal('show');
}
</script>
Now when I go on page and click div id = avatar I will see modal window but when I click: test me I have no result. So is it some way to do this?
try adding:
$('#eee').on('click', function() {
alert('333');
});
inside showMessage() ... your problem is that you have to rebind events to dynamically added elements if they are added after (document).ready or in this case the page rendering...
whenever i do this i just make a big function called rebindEvents() that I can call into to let the page know about my new items... just a warning, its not great for performance if you wind up with a lot of jquery elems you have to deal with, knockout is a much better library for dealing with dynamic html then doing it this way.
also, i'm assuming you are going to present a list of avatars, so you may want to swap eee to a class instead of id...
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>
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.