Add class to the body when modal is open - javascript

I'm having a problem with my login modals. One modal open when someone click forgot password link on my sign in the modal. (One modal open in another modal) So I came everything clean by adding all necessary attributes.
Eg:
<span data-toggle="modal" data-target="#forgot-pin-popup" data-dismiss="modal">Forgot password?</span>
But I notice it won't add .modal-open class to the body when my second modal is open(styles are shown weird without this class). So I manually use this js script.
$('.modal').on('hidden.bs.modal', function () {
if($('.modal').hasClass('in')) {
$('body').addClass('modal-open');
}
});
Works perfectly BUT when I try switching models like 6 times. It won't work again. Can't imagine why. I can't show you an example because it's on my production site. Does anyone face the similar problem like this?

Try to do using modal id
On modal show
$('#forgot-pin-popup').on("shown.bs.modal", function() {
$("body").addClass("modal-open");
});
On modal hide
$('#forgot-pin-popup').on("hide.bs.modal", function() {
$("body").addClass("modal-open");
});

what about using a global event listeners:
$(document).on('hidden.bs.modal', '.modal', function () {
$('body').toggleClass('modal-open', $('.modal').hasClass('in'));
});

Try to use body instead of .modal
$('body').on('hidden.bs.modal', function() {
if ($('.modal.in').length) {
$('body').addClass('modal-open');
}
});
Also make sure that your modal should not be nested into .modal class
$('body').on('hidden.bs.modal', function() {
if ($('.modal.in').length) {
$('body').addClass('modal-open');
}
});
$(".btn-primary").on("click", function() {
console.log($("body").attr("class"));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Open modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal1" data-dismiss="modal">
Open modal
</button>
</div>
</div>
</div>
</div>
<!-- Modal1 -->
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

Related

Bootstrap modal set focus on popup close to input in body

Hi Stack overflow community people
I wanted to set the focus on input when users click on the bootstrap modal window.
I tried the below code but not helping. Any help appreciated.
$('#myModal').on('hidden.bs.modal', function() {
$('#focusMe').focus()
})
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<!--CB-modal -->
<!-- Button trigger modal -->
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<label>Foucs Me</label>
<input type="text" id="focusMe">
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- JS code -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js">
</script>
You just need to add setTimeout() function before calling focus() event for input.
In your code focus() method called right after bootstrap modal get closed, when DOM is not loaded properly.
$('#myModal').on('hidden.bs.modal', function() {
setTimeout(function(){
$('#focusMe').focus();
},100);
});

How to make just a part of html 'tabbable'? (Modal Dialog)

I have an Angular App and a custom Modal Dialog implementation. How can I limit the 'tabbablity' of the page so that i can just tab through the Modal, and not everything else in background?
I have set aria-hidden="true" for all other elements directly under the body tag, and thought that has to handle that, but no success. tabindex="-1" also did not work..
Actually I want the exact tab-behaviour of this bootstrap modal:
https://getbootstrap.com/docs/4.0/components/modal/
Click: "launch demo modal" and tab through the modal elements..
How can I achieve this?
Edit: I look at the bootstrap modal, and they do not set anything to other elements, but just to the modal container div (with class="modal fade show") tabindex="-1". And after the last element in modal, tab sets focus to this modal container div. After that the focus is set again to the first modal element. In my case tabindex="-1" strangely does not bring anything, after the last element focus jumps to the Browser's URL Input field and goes on.
I dont know what code you have...but this tabindex behavior works well with bootstarp example.
.modal-backdrop {
background-color: transparent !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal (with tab only on modal elements)
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
coucou
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<br><br><br>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal2">
Launch demo modal (with tab on all document elements)
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal2" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
coucou
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>

Bootstrap modal not showing up, screen just has black overlay

I'm trying to get a modal to show on my bootstrap site, and when I click the button to trigger it the screen turns dark, but nothing shows up.
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
This is the javascript I'm using as well, in addition to JQuery, popper.js, bootstrap js
$('#myModal').on('shown.bs.modal', function() {
$('#myInput').trigger('focus')
})
I literally took this right off the bootstrap site and for some reason it's not working.
$('#myModal').on('shown.bs.modal', function() {
$('#myInput').trigger('focus')
})
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
The code snippet for the modal is perfectly fine, Check the parent div for both trigger and the modal and raise their z-index, It very likely that the Z-Index of the parent element is interfering with the modal pop up. You can try this`
.parentElementOfModal{
z-index:10000;
}

Using Twitter Bootstrap Modal

I am having soon issues using the twitter bootstrap modal in my site. My site has the has bootstrap loaded and everything but the button is not trigger the popup and I don't know why. Can someone please help me?
This is the modal right after my body tag
<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">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</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>
You can try this.
$(document).ready(function() {
$("#btnshow").on('click', function(event) {
$('#myModal').modal('show');
$('#myModal').on('shown', function() {
// do more here
})
});
});
sample button that calls your modal window
<button id="btnshow">Show</button>
<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">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</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>
Bootbox.js is a small JavaScript library which allows you to create programmatic dialog boxes using Bootstrap modals, without having to worry about creating, managing or removing any of the required DOM elements or JS event handlers. Here’s the simplest possible example:
http://bootboxjs.com/examples.html
bootbox.dialog({
title: "That html",
message: '<img src="images/bootstrap_logo.png" width="100px"/><br/> You can also use <b>html</b>'
});

Bootstrap Modal not popping up

I'm really new to bootstrap and I am trying to add a popup using Modals. I added the code and the scripts, but when you click on the button its not popping up. I can tell something is coming up because the background fades a little but a popup is not coming up. So I need a little bit of help figuring out why its not popping up.
My JavaScript links:
<script src="js/jquery-1.10.2.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
Code for Modals:
<div class="modal hide fade" id="myModal">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
Close
Save changes
</div>
</div>
<a class="btn" data-toggle="modal" href="#myModal" >Launch Modal</a>
This is a compatibility issue v2.X vs v3.X
Bootstrap 3.0 New Classes & Elements
Modal markup has changed .modal-header .modal-body .modal-footer now get wrapped in .modal-content and .modal-dialog
Modal Migration
How to convert from a 2.x to 3.0 modal:
remove .hide from the .modal (it's now hidden by default)
wrap .modal-header .modal-body .modal-footer inside .modal-content
wrap .modal-content inside .modal-dialog
Events are namespaced. For example to handle the modal 'show' event, use 'show.bs.modal'.
Reference
Bootstrap 3 modal example:
<a data-toggle="modal" href="#myModal" class="btn btn-primary">Launch modal</a>
<div class="modal fade" id="myModal">
<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">Modal title</h4>
</div>
<div class="modal-body">
Content for the dialog / modal goes here.
</div>
<div class="modal-footer">
Close
Save changes
</div>
</div>
</div>
</div>
JSFiddle
What I usually do for modals with just JavaScript and Bootstrap is to have an onClick event on the button that executes a JavaScript method that displays the modal.
In your HTML:
<button onclick="myFunction()">Click me</button>
<script>
function myFunction(){
$('#myModal').modal('show')
}
</script>
Just change the function name myFunction to the name you want and myModal to the id of your modal.
Here is the bootstrap docs, where the modal stuff is located, for future reference getbootstrap.com/javascript/
Complete Example using CDN. SO that you can download the latest version from Url
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css">
<script type="text/JavaScript" src="http://code.jquery.com/jquery-1.11.2.js"></script>
<script type="text/JavaScript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.js"></script>
<body>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<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">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</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>
</body>
</html>

Categories