Element Does Not Vertically Stick On The Middle Of The Screen
I've been trying to create a modal popup using JQuery, but somehow I am stuck at the point where I can't properly centralized my element (The keypoint being the element is always c
Solution 1:
$(function () {
$(window).resize(function(){
var offset = 0,
viewportHeight = $(window).height(),
$myDialog = $('#ev-entry');
console.log(viewportHeight + " "+$myDialog.height() )
$myDialog.css('top', (offset + (viewportHeight / 2)) - ($myDialog.height() / 2));
}).resize();
});
- It's
.height()
instead of.Height()
- It's inside
$(window).resize()
so it adjusts on resize as well
Solution 2:
If you need to center an absolute position element you need to do this little trick, requires no jQuery.
The changed css:
.ex_event_frame {
width: 300px;
height: 300px;
left: 50%; /* Changed CSS */top: 50%; /* Changed CSS */margin-left: -150px; /* Changed CSS - Change to half of the elements width */margin-top: -150px; /* Changed CSS - Change to half of the elements height */overflow: auto;
background: #2e3030;
color: #ffffff;
position: absolute;
z-index: 101;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 14px;
-moz-box-shadow: 0010pxrgba(0, 0, 0, .4);
-webkit-box-shadow: 0010pxrgba(0, 0, 0, .4);
-box-shadow: 0010pxrgba(0, 0, 0, .4);
border: 8px solid #105f6b;
}
Here is a fiddle: Demo - remove /show in url to view code
Post a Comment for "Element Does Not Vertically Stick On The Middle Of The Screen"