I use bootstrap 3.3.7 in my angular project and the modal is disabled when I open it by clicking "ADD CLASS".
My code is below.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="add-class pointer" data-toggle="modal" data-target="#add-class-modal">
<img alt="+" src="assets/images/add.png" height="16px" width="16px" style="margin-top: -2px"><span class="add-a-class">ADD CLASS</span>
</div>
<!-- Modal -->
<div class="modal fade" id="add-class-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-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>
The result looks like this.
"ADD CLASS" button is at the top right corner.
How can I fix it?
Probaby you have some styling which makes that background overlay has larger z-index. Make sure your modal class has correct styling and dont have some additional onces. it should work fine with default bootstrap styling. You can try setting larger z-index to .modal, but the key is to check if you dont have some additional styling applied.
// this is class for dialog itself
.modal {
position: relative;
z-index: 9999
}
If z-index is smaller than 1072 it can be covered by gray background
UPDATE:
Based on bootstrap example modal on bootstrap page, looks like that gray background is created by div with class mocal-backdrop, which by default have such z-index:
.modal-backdrop {
z-index: 1071;
}
Related
The bootstrap popup is not showing up on my website. I have copied the popup code from the official Bootstrap website.
Here is the link to my website Link to webiste
The popup button is located before the footer credits.
Current condition :
Query Bootstrap Modal is not working
Below code is copy pasted from your give url http://home.india-market.online/
It is working properly in separate example
Solution:
You have footer, <footer class="footer-social-icon text-center section_padding_70 clearfix">
Some how there is z-index:-101; and position:fixed; in <footer>
You need to remove model outside from <footer> and apply directly before </body> tag ends.
<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>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">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>
I hope it will start working normally.
Old Code from website is :
The reason is that modal content is placed (nested) inside footer element. Move that modal div to body and modal will appear.
I'm designing a site using bootstrap and mmenu libraries. I'm trying to add a bootstrap modal that opens when clicking a button in mmenu.
The modal doesn't close when clicking close, pressing ESC and clicking outside the modal.
I tried writing a page with the same modal and mmenu, where the modal opens by clicking a button on the page, not in the mmenu, and both worked fine.
I tried a mmenu popup that appears when the button inside the mmenu is clicked, but had the same problem.
I'd be happy with a generic answer as well;
Where problems with these two libraries can arise, and how to get around them. Or how to debug the code so that I can figure out the solution myself. I tried checking the Console in Chrome but there were no errors there. I don't know how to check any further.
I added my code just in case someone who is familiar with the mmenu and bootstrap libraries has a specific answer. Thank you all for your effort.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link href="CSS/bootstrap.css" rel="stylesheet" />
<link href="CSS/jquery.mmenu.themes.css" rel="stylesheet" />
<link href="CSS/jquery.mmenu.all.css" rel="stylesheet" />
<link href="CSS/jquery.mmenu.positioning.css" rel="stylesheet" />
<script src="JS/jquery-1.11.3.min.js"></script>
<script src="JS/jquery.mmenu.all.min.js"></script>
<script src="JS/bootstrap.min.js"></script>
</head>
<body>
<!-- Modal -->
<button type ="button">Menu</button>
<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-default" data-dismiss="modal">Close
</button>
<button type="button" class="btn btn-primary">Save changes
</button>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<nav id="welcomeMenu" class="col-xs-12 col-sm-5">
<div>
<ul class="vertical">
<li>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
</li>
</ul>
</div>
</nav>
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#welcomeMenu").mmenu({
extensions: ["theme-dark", "border-full", "multiline", "pagedim-white"],
offCanvas: {
position: "right",
zposition: "front"
}
});
});
</script>
</body>
</html>
Here is the fiddle.
instead
Remove z-index:1 in row 69 of this file "CSS/jquery.mmenu.all.css"
set z-index in your main css file to auto
.mm-slideout { z-index:auto;}
Instead of changing something in jquery.mmenu.all.css you could include the following in your own css-files:
body.modal-open .mm-slideout{
z-index:inherit;
}
Remove z-index:1 in row 69 of this file "CSS/jquery.mmenu.all.css"
.mm-slideout{
-webkit-transition:-webkit-transform .4s ease;
transition:-webkit-transform .4s ease;
transition:transform .4s ease;
transition:transform .4s ease,-webkit-transform .4s ease;
z-index:1
}
your codes is fine and modal can launch and close when button close clicked. I've already tested. the problem is in your **bootstrap version**.
I see you use bootstrap.css not min.css. If you feel you have fast speed connection as well as your hosting, there will be no problem. otherwise, use with min.
BTW, I use v3.1.0 (min.js/min.css) and jQuery v2.1.1
Your code is working perfectly, i have tested this.
bellow is the Fiddle to check.
<!-- 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">
<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-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<nav id="welcomeMenu" class="col-xs-12 col-sm-5">
<div>
<ul class="vertical">
<li><span class="glyphicon glyphicon-log-in"></span> Log in</li>
<li><span class="glyphicon glyphicon-user"></span> Continue as guest</li>
</ul>
</div>
</nav>
<div class="row">
<!--a place for tips-->
<div class="col xs-12 hidden-xs col-sm-3 ">
</div>
<!--a place for text-->
<div class="col-xs-12 col-sm-9">
<div class="page-header">
<h1>Welcome.</h1><br />
<small>We are glad to see you here.</small>
</div>
</div>
</div>
</div>
$(document).ready(function () {
$("#welcomeMenu").mmenu({
extensions: ["theme-dark", "border-full", "multiline", "pagedim-white"],
offCanvas: {
position: "right",
zposition: "front"
}
});
});
Here's the work modal: http://jsfiddle.net/okkf2bsr
i had a same problem before .
so what i did.
i add the below code in jquery.
// Call Business logo modal.
$('#myModal_business').modal({
backdrop: 'static',
keyboard: false,
show: false
});
then after on button click through jquery you can close or open the modal.
like this
$(".buttonclass").click( function() {
$('#myModal_business').modal('show');
});
To hide the modal
$('#myModal_business').modal('hide');
When I open modal dialog, body has overflow:auto. But when modal dialog has its own scroll, we see two scrolls - active and unactive. How can I retain only one, active scroll? Now situation like this
html {
overflow-y: scroll;
overflow-x: auto;
}
.modal-open .modal {
overflow-x: hidden;
overflow-y: auto;
}
It's simple. Just add the body tag overflow:hidden; when the popup is shown.
The snippet bellow just use bootstrap modal. If you will lookup the result html when the popup is shown, you can see it.
p {
margin-top:350px !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-MfvZlkHCEqatNoGiOXveE8FIwMzZg4W85qfrfIFBfYc= sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<!-- Modal -->
<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>
<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>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha256-Sk3nkD6mLTMOF0EOpNtsIry+s1CsaqQC1rVLTAy+0yc= sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
The same example in jsbin.com
I've read the many threads on this topic but none have answered the issue that I'm having. I am trying to create a modal view overlay that spans the page width. However, the modal renders but it isn't responsive. It is darkened out and buttons won't work. This is how I load my assets:
<!-- Bootstrap Core -->
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css'>
<!-- Custom CSS -->
<link rel='stylesheet' href='styles/application.css'>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="scripts/bootstrap.min.js"></script>
And this the code I'm running on modal:
</head>
<body>
<!-- Modal -->
<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" 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">
<h3>Modal Body</h3>
</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 class="container-fluid">
<%= yield %>
</div>
</body>
</html>
And this is where I want it called from. And I think because I have an animation effect it might be screwing with the event. Note that this is the first thing within the yield:
<div class="container-fluid">
<div class="row"><div class="col-md-12"><h1>Title</h1></div>
<div class="row">
<div class="col-md-3">
<div class="menu-item-1 card effect_hover">
<a class="modal-link" data-toggle="modal" data-target="#basicModal">
<div class="card_front">
<span class="icon-home3 card_text"></span><br>ABOUT
</div>
<div class="card_back">
<span class="card_text">Learn all about our community!</span>
</div>
</a>
</div>
...
So, that's it. I've read the Documentation by Bootstrap and have copied the code into the page but the same issue remains. I've also tried using a local version of bootstrap assets. Thoughts?
I am trying to create a modal view overlay that spans the page width.
Well in that case, you'll have to edit the below line of CSS in the bootstrap.css (not recommended) or in your custom css file.
Here's the line:
#media (min-width: 768px) {
.modal-dialog {
width: 100%; // by default its 600px.
margin: 30px auto;
}
The Bootstrap carousel is built to be responsive, see the screen shots:
On big screens:
.
On smaller screens:
You must be having some content inside the modal which is not responsive or rather with a fixed width.
if you have a look at the styles for the modal, in bootstrap.css, you'll see that:
.modal-dialog {
position: relative;
width: auto;
margin: 10px;
}
The width is set to auto except when the screen-width is 768 or greater, in which case the width is set to.
width:600px;
How can I open an section of html with an id using JS/JQuery?
Lets say the html I want to trigger with JS/JQuery is
<section class="modal--show" id="show"
tabindex="-1" role="dialog" aria-labelledby="label-show" aria-hidden="true">
<div class="modal-inner">
<header>
<h2 id="label-show">A modal</h2>
</header>
<div class="modal-content">
<p>Content.</p>
<div id="badgeselect">
</div>
<footer>
<p>Footer</p>
</footer>
</div>
</section>
I've tried using
$('#show').dialog('open');
which doesn't work. The only other consideration is, that the full code must also copy an image that the user clicks on (to activate show)
I have this at the moment, the only part not working is making the above code show on the page after the user has clicked the image.
$(document).ready(function() {
$('.go img').css('cursor', 'pointer');
$('.go').on('click', 'img', function(e) {
$(this).width(100).height(100).appendTo('#badgeselect');
$('#show').dialog('open');
});
SaveMyBadge();
return false;
});
.dialog is not a native method available in JavaScript. If you want a modal out of the box then i recommend using a JavaScript Library which comes with such features built in. Twitter's bootstrap will be a good option.
To get started:
In your <head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
Include this script after you include jQuery
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
HTML:
<!-- Modal Markup -->
<div class="modal fade" id="modal">
<div class="modal-dialog">
<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">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</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 -->
To launch the modal
$('#modal').modal({'show':true});
Bootstrap homepage
UPDATE:
$('.go').on('click', 'img', function(e) {
$(this).width(100).height(100).appendTo('#badgeselect');
$('#modal').modal({'show':true});
});
You are missing a closing div tag.
<div id="badgeselect">
is never closed. That could be causing some strange issues
Well you could just add a click listener to the img and change the css class of the section.
The css class could have display:block
and as you stated its a pop up you could set its position in your class along with other properties such as opacity or simply
document.getElementById("show").style.display = block;
OR
document.getElementById("show").className = "MyClass";
.MyClass{
display:block;
position:absolute;
top:50%;
left:50%;
margin-left:-width/2;
margin-top:-height/2;
opacity:0.8;
}
This should create a pop up like feature.