I have a bootstrap modal on load page it works properly but I want to add class to an element if it active and remove it if it not active I tried the following but it doesn't work properly!
here is the example
$(window).load(function() {
$("#myModal").modal("show");
});
if ($("#myModal").hasClass("in")) {
$(".test").addClass("active");
} else {
$(".test").removeClass("active");
}
.test {
width: 100px;
height: 100px;
background-color:#e0e0e0;
}
.active {
background-color:#000;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="myModal" class="modal fade" role="dialog">
<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">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="test"></div>
Use shown.bs.modal and hidden.bs.modal to detect modal is open or not then add or remove class.
$(window).load(function() {
$("#myModal").modal("show");
});
$('#myModal').on('shown.bs.modal', function() {
$(".test").addClass("active");
console.log('Active');
}).on('hidden.bs.modal', function() {
$(".test").removeClass("active");
console.log('Not Active');
});
.test {
width: 100px;
height: 100px;
background-color: #e0e0e0;
}
.active {
background-color: #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="myModal" class="modal fade" role="dialog">
<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">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="test"></div>
Related
I want to store a modal in a variable and then show the modal when a user clicks a button. I tried this but nothing happens when I click the button and there is no console error.
$( '.outlet' ).on('click', function(e) {
e.preventDefault();
var prodID = $(this).data('id');
var modal = `
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
`;
$(modal).show();
});
You have to bind the modal to the DOM, to make it visible. In your code the HTML of your modalvariable is not in the DOM, and that's why it is not displayed.
like show here:
$("body").before(modal).show();
Althought you won't need show()since your attaching the HTML to the DOM with the beforefunction (except it the HTML code has a style property set to display:none or you want a animation or ...).
Here the working example. I added some HTML to make the Example run.
$( '.outlet' ).on('click', function(e) {
e.preventDefault();
var prodID = $(this).data('id');
var modal = `
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
`;
console.info("IN THE CLICK FUNCTION");
$("body").before(modal);
$(".modal").show();
});
.modal {
margin:50px;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 99;
display: none;
overflow: hidden;
-webkit-overflow-scrolling: touch;
outline: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<button class="outlet">test</button>
</body>
I have following code to invoke my newsletter modal:
$(window).load(function(){
if (sessionStorage.getItem("is_seen") === null) {
setTimeout(function(){
$('#newsletter_modal').modal('show');
sessionStorage.setItem('is_seen', 1);
}, 10000);
}
});
I use setTimeout to invoke it after 10 seconds user visited site, but if he for example opens login modal, after 10 seconds he will see newsletter modal and I don't want such behavior.
So far I triend checking if login modal is open like this:
$(window).load(function(){
if($('#userModal').is(':visible')) {
if (sessionStorage.getItem('is_seen') === null) {
setTimeout(function(){
$('#newsletter_modal').modal('show');
sessionStorage.setItem('is_seen', 1);
}, 10000);
}
}
});
Bit it didn't work. Also I tried to check if #loginModal has class in and it didn't work too. What am I doing wrong in this case?
declare global variable , then affect the setTimoutOut to it
if the user try to login just clear that timeout by using clearTimeout js dunction
it should be like :
var timeOut;
$(window).load(function(){
if (sessionStorage.getItem("is_seen") === null) {
timeOut = setTimeout(function(){
$('#newsletter_modal').modal('show');
sessionStorage.setItem('is_seen', 1);
}, 10000);
}
});
when click to show modal login do
clearTimeout(timeOut)
please see below snippet
var timeout;
$(window).load(function(){
timeout = setTimeout(function(){
$('#newsletter_modal').modal('show');
}, 5000);
$("#login").click(function(e){
clearTimeout(timeout);
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" id="login" data-target="#myModal">login</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<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">login</h4>
</div>
<div class="modal-body">
<p>Login modal</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="newsletter_modal" role="dialog">
<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">newsletter</h4>
</div>
<div class="modal-body">
<p>Some text in news letter.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
Otherwise if you still want to check with css , just check if the login modal has in classe .
see bewlo snippet
var timeout;
$(window).load(function(){
setTimeout(function(){
if(!$("#loginModal").hasClass('in'))
$('#newsletter_modal').modal('show');
}, 5000);
/*
$("#login").click(function(e){
clearTimeout(timeout);
})*/
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" id="login" data-target="#loginModal">login</button>
<!-- Modal -->
<div class="modal fade" id="loginModal" role="dialog">
<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">login</h4>
</div>
<div class="modal-body">
<p>Login modal</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="newsletter_modal" role="dialog">
<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">newsletter</h4>
</div>
<div class="modal-body">
<p>Some text in news letter.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
You should check the display-style from the modal instead.
$(window).load(function(){
// if($('#userModal').is(':visible')) {
if($('#userModal').css('display') == 'block') {
if (sessionStorage.getItem('is_seen') === null) {
setTimeout(function(){
$('#newsletter_modal').modal('show');
sessionStorage.setItem('is_seen', 1);
}, 10000);
}
}
});
Simplest way, check if modal has class "open" or "opended", I'm not sure which class is added for displayed modal:
if ( jQuery('.my_login_modal').hasClass('open') ) {
//remove setTimeout or even remove modal by .hide() to be sure
clearTimeout(timeOut);
}
and put this in interval
I have a bootstrap modal that I want to be draggable. For draggable I tried to restrict it using, containment but it disappears when drag action is done for the first time. Here is my code.
$("#feedbackdialog").modal();
$('#feedbackdialog').draggable({
handle: ".modal-header",
cursor: "crosshair",
containment: "parent"
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<div id="feedbackdialog" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Comment</h4>
</div>
<div class="modal-body">
<div class="active" id="segtab">
<div align="center" class="form group row">
<textarea id="fdtext" class="form-control form-group" placeholder="Sentence Comment here"></textarea>
<button id="savefdb" class="btn">OK</button>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Firefox version 45.0.2
Run the code in full screen mode(View Full page after running the code snippet) to reproduce the issue. It seems that that modal dialog is moving to top(when run in normal mode).
<div class=" modal fade " id="modalid" tabindex="-1" role="dialog">
<div class="modal-dialog" id="feedbackdialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Comment</h4>
</div>
<div class="modal-body">
<div class="active" id="segtab">
<div align="center" class="form group row">
<textarea id="fdtext" class="form-control form-group" placeholder="Sentence Comment here"></textarea>
<button id="savefdb" class="btn">OK</button>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$("#modalid").modal();
$('#feedbackdialog').draggable({
handle: ".modal-header",
cursor: "move",
containment: "parent"
});
</script>
Give two different id's for modal and draggable div and use modal id as containment parent
Try this snippet. Hope this will help you.
$(function(){
$("#myModal").draggable({
handle: ".modal-dialog"
});
});
.modal
{
overflow: hidden;
height:250px;
width:300px;
}
.modal-dialog{
margin-right: 0;
margin-left: 0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/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://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.js"></script>
<div class="side-menu" id="sideMenu">
<menu>
<ul class="nav nav-tabs nav-stacked">
<li>Click Me
</li>
</ul>
</menu>
</div>
<div id="myModal" class="modal fade">
<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">Settings</h4>
</div>
<div class="modal-body">
<p>Settings</p>
</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>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
Greetings!
I've got a long full screen popup modal(parent-modal). Inside this modal(parent-modal) there is another popup modal(child-modal).
If I scroll the "parent-modal" and then open "child-modal", the "child-modal" modal is not vertically centered.
hope this might be useful to you!
.modal {
}
.vertical-alignment-helper {
display:table;
height: 100%;
width: 100%;
}
.vertical-align-center {
/* To center vertically */
display: table-cell;
vertical-align: middle;
}
.modal-content {
/* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
width:inherit;
height:inherit;
/* To center horizontally */
margin: 0 auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- Button trigger modal -->
<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="vertical-alignment-helper">
<div class="modal-dialog vertical-align-center">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</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" data-toggle="modal" data-target="#myModal1">Save changes</button>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="vertical-alignment-helper">
<div class="modal-dialog vertical-align-center">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</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>
</div>
Try this style with child modal:
#parent-modal{
position:relative;
}
#child-modal{
position:absolute;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
I created a link within a modal that opens a second modal. I want to resize the second modal that opens but I don't know how. I want the second modal to be almost fullscreen and the first one to stay small. Here is my code:
<div class="modal fade" id="aboutModal4" 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>
<h3 class="modal-title" id="myModalLabel">Example</h3>
</div>
<div class="modal-body">
<button type="button" class="astext" data-toggle="modal" data-target="#myModal6">Information</button></br></br>
<div class="modal fade" id="myModal1" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Bissa</h4>
</div>
<div class="modal-body">
<p>Information</p>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
I changed a lot of your code and this works. JSFiddle below. The JSFiddle has large modal bigger than when I run it locally on my machine. You can have fun with resolution and percentages instead of pixels. :)
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index40</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
.firstOneStaySmall {
width: 240px;
height: 240px;
}
.secondOneBig {
width: 1250px;
height: 900px;
}
.positionTheDialog {
position: fixed;
top: 10px;
left: 10px;
}
</style>
</head>
<body>
<a data-toggle="modal" data-target="#aboutModal4">
Launch outer modal
</a>
<div class="modal fade" id="aboutModal4" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content firstOneStaySmall">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h3 class="modal-title" id="myModalLabel">Example</h3>
</div>
<div class="modal-body">
<button type="button" class="astext" data-toggle="modal" data-target="#myModal6">Information</button></br></br>
<div class="modal fade" id="myModal6" role="dialog">
<div class="modal-dialog positionTheDialog">
#*modal-lg*#
<div class="modal-content secondOneBig">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Bissa</h4>
</div>
<div class="modal-body">
<p>Information</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>