jQuery Layout's z-index is 2.
Bootstrap's modal does not have a z-index set.
http://plnkr.co/edit/yy88iK8t3f2v3pEe5812?p=preview
z-index is applied in a style attribute.
<div class="ui-layout-resizer ui-layout-resizer-north ui-layout-resizer-open ui-layout-resizer-north-open"
style="position: absolute;
padding: 0px;
margin: 0px;
font-size: 1px;
text-align: left;
overflow: hidden;
z-index: 2;
top: 90px;
cursor: default;
width: 1920px;
height: 13px;
left: 0px;"
id=""
>
<div title="Close"
class="ui-layout-toggler ui-layout-toggler-north ui-layout-toggler-open ui-layout-toggler-north-open"
style="position: absolute; display: block; padding: 0px; margin: 0px; overflow: hidden; text-align: center; font-size: 1px; z-index: 1; visibility: visible; cursor: pointer; width: 48px; height: 13px; left: 935px; top: 0px;"
id=""
>
</div>
</div>
FF is reporting the modal's z-index is set to "auto". Changing it to anything else, does not make the modal appear above the layout's resizer.
Any ideas?
You have a nested div within the modal.
<!-- 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>
</div> <!-- this div should not be within your Modal -->
</body>
should be like this:
</div>
<!-- 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>
Related
I needed to increase the Bootstrap modal width so I used the code from this post: How to resize Twitter Bootstrap modal dynamically based on the content
.modal-dialog{
position: relative;
display: table; /* This is important */
overflow-y: auto;
overflow-x: auto;
width: auto;
min-width: 300px;
}
But now my modal is not vertically centered.
Edit: I already have modal-dialog-centered but it broke it
I tried to wrap the modal-content with a div with d-flex align-items-center but that didn't work either:
<div class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="d-flex align-items-center">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">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">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Save changes
</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
But that didn't work either
I have following simple code snippet that opens a bs4 modal through a button.
The button appears by hovering the container.
The issue is that after the open the modal through the button and then close. The image moves up unexpectedly. The position of the image can be restored by hover the container again. I just wonder why this behavior happens and how to fix it.
https://jsfiddle.net/hb6n71zg/1/ code snippet link.
.container {
position: relative;
overflow: hidden;
}
.p-img {
opacity: 1;
width: 100%;
transition: 0.5s ease;
}
.p-capt {
background: white;
width: 100%;
transition: 0.5s ease;
opacity: 0;
position: absolute;
bottom: -10%;
text-align: center;
}
.container:hover .p-img {
opacity: 0.3;
}
.container:hover .p-capt {
opacity: 1;
bottom: 0;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<h2>TOPTOPTOP</h2>
<p>TOPTOPTOPTOPTOP</p>
<div class="container">
<img class="p-img w-100" src="https://www.wired.com/wp-content/uploads/2015/09/google-logo.jpg" />
<div class="p-capt">
<button type="button" class="btn btn-primary w-100" data-toggle="modal" data-target="#myModal">launch modal</button>
</div>
</div>
<!-- Modal -->
<div id="myModal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">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">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Save changes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Update:
If I trig the modal through javascript, this weird behavior would not happen.
<button type="button" class="btn btn-primary w-100">launch modal</button>
$(function(){
$("button").click(function() {
$("#myModal").modal('toggle');
});
});
It has to do with a very weird combination between three different conditions:
.container having overflow: hidden;
.container having content overflowing
.container not being :hovered unless you move the mouse, when the modal closes.
The solution is to remove the overflow:hidden from .container and obtain the button clipping effect of the button by using the button's own container (.p-cont):
.container {
position: relative;
}
.p-img {
opacity: 1;
width: 100%;
transition: 0.5s ease;
height: auto;
}
.p-capt {
background: white;
width: 100%;
transition: 0.5s ease;
opacity: 0;
position: absolute;
text-align: center;
padding-left: 15px;
padding-right: 15px;
overflow: hidden;
bottom: 0;
height: 0;
}
.p-capt .btn-primary {
position: relative;
left: -15px;
}
.container:hover .p-img {
opacity: 0.3;
}
.container:hover .p-capt {
opacity: 1;
height: 38px;
}
/* this removes the button's outline when active, as IMHO it didn't look right (it was cut off by the overflow:hidden. Totatlly optional, of course */
.p-capt .btn-primary:not(:disabled):not(.disabled).active:focus,
.p-capt .btn-primary:not(:disabled):not(.disabled):active:focus,
.p-capt .show>.btn-primary.dropdown-toggle:focus,
.p-capt .btn-primary.focus,
.p-capt .btn-primary:focus {
box-shadow: none;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<h2>TOPTOPTOP</h2>
<p>TOPTOPTOPTOPTOP</p>
<div class="container">
<div class="row">
<div class="col">
<img class="p-img d-block w-100 h-auto" src="https://www.wired.com/wp-content/uploads/2015/09/google-logo.jpg" />
<div class="p-capt">
<button type="button" class="btn btn-primary btn-block" data-toggle="modal" data-target="#myModal">launch modal</button>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div id="myModal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">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">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Save changes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Note: I also used Bootstrap v4.4.1 instead of your v4.0.0 but it doesn't affect the example. I just wanted to make sure that's not the cause and didn't bother to change it back.
I've set relative position for my row and then I tried to align my social buttons to the bottom right corner but failed ;(
I've also set absolute position for my social buttons class and it doesn't seem to align properly. Why is this so?
JsFiddle
HTML
<div class="container">
<div class="jumbotron">
<div class="row fixed-height">
<div class="col-xs-4">
<button class="btn btn-primary btn-sm">
<span class="glyphicon glyphicon-ok"></span>
Some button!
</button>
</div>
<div class="col-xs-8">
<div class="social-buttons">
<div class="btn-group-xs">
<button class="btn btn-default">
<span class="glyphicon glyphicon-thumbs-up"></span>
</button>
<button class="btn btn-default">
<span class="glyphicon glyphicon-thumbs-down"></span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
.jumbotron {
margin: 10px;
}
.row {
margin: 8px 0;
border: solid;
}
.fixed-height {
height: 100%;
}
.social-buttons{
position: absolute;
bottom: 0;
right: 0;
}
Here is a possible solution:http://jsfiddle.net/cpveg8Lo/5/
CSS
Add position as relative in row css
.row {
margin: 2px 0;
border: solid;
position: relative;
}
and make the following change in social button css
.social-buttons{
position:absolute;
right: 0;
padding-right:0px;
bottom:0;
}
HTML
Update your html as shown below,
<div class="container">
<div class="jumbotron">
<div class="row fixed-height">
<div class="col-xs-4">
<button class="btn btn-primary btn-sm">
<span class="glyphicon glyphicon-ok"></span>
Some button!
</button>
</div>
<div class="col-xs-8 social-buttons">
<div class="pull-right">
<div class="btn-group-xs">
<button class="btn btn-default">
<span class="glyphicon glyphicon-thumbs-up"></span>
</button>
<button class="btn btn-default">
<span class="glyphicon glyphicon-thumbs-down"></span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
Here check this snippet. This will keep those button vertically centered as well. Try this -
.jumbotron {
margin: 10px;
}
.row {
margin-top: 8px;
margin-bottom: 8px;
border: solid;
}
.fixed-height {
height: 100%;
position:relative;
}
.social-buttons{
position:absolute;
right:15px;
top: 50%;
-moz-transform: translatey(-50%);
-ms-transform: translatey(-50%);
-o-transform: translatey(-50%);
-webkit-transform: translatey(-50%);
transform: translatey(-50%);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="jumbotron">
<div class="row fixed-height">
<div class="col-xs-4">
<button class="btn btn-primary btn-sm">
<span class="glyphicon glyphicon-ok"></span>
Some button!
</button>
</div>
<div class="social-buttons">
<div class="btn-group-xs">
<button class="btn btn-default">
<span class="glyphicon glyphicon-thumbs-up"></span>
</button>
<button class="btn btn-default">
<span class="glyphicon glyphicon-thumbs-down"></span>
</button>
</div>
</div>
</div>
</div>
</div>
How can I center this modal window vertically regardless of the size of the contents displayed. In my page, I am displaying an image as a modal window and I would like it to display in the center of the screen. I can align it horizontally, but I can't get it to cooperate vertically. Any ideas/examples of this being done?
I followed this example in my page: modal window demo plunker
but my actual content of the modal window looks like this:
<script type="text/ng-template" id="myModalContent.html">
<div>
<img class= "attachmentImage" src={{items}} />
</div>
</script>
Should I be looking to make changes in bootstrap.min.css or ui-bootstrap-tpls-0.13.0.jsor is the best way to approach this with my styles in my own sheet.
Thank you very much for your time. Let me know if you need more information or if I am being unclear.
I strongly disagree with 1Bladesforhire's answer, because the top of the modal container becomes inaccessible when it is taller than the viewport height. This is a common issue when centering taller children than the parents, using the absolute vertical centering method.
My preferred method of vertically centering a Bootstrap modal is
.modal-dialog {
display: flex;
flex-direction: column;
justify-content: center;
overflow-y: auto;
min-height: calc(100vh - 60px);
}
#media (max-width: 767px) {
.modal-dialog {
min-height: calc(100vh - 20px);
}
}
/* you only need the above CSS. The code below centers the modal trigger button */
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/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://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</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>
While vertically centered when shorter than the viewport width, .modal-content is still fully accessible even when it has a height of 300vh:
.modal-dialog {
display: flex;
flex-direction: column;
justify-content: center;
overflow-y: auto;
min-height: calc(100vh - 60px);
}
#media (max-width: 767px) {
.modal-dialog {
min-height: calc(100vh - 20px);
}
}
/* you only need the above CSS. The code below centers the modal trigger button */
.modal-content {
height: 300vh;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/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://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</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>
Demo
I need to change only the background of one of the Modals with specific ID #firstModal which I am using in Bootstrap 3 by using this CSS rule
#firstModal.modal-backdrop {
background-color: green;
opacity: 1 !important;
filter: Alpha(opacity=50);
}
and here is the modal
<div id="firstModal" class="modal fade" 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-hidden="true">×</button>
<h3 id="myModalLabel">First Modal</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Why is this not working?
TRY - DEMO
CSS:
/* CSS used here will be applied after bootstrap.css */
#firstModal {
background-color: green;
opacity: 1 !important;
filter: Alpha(opacity=50);
}