Centering modals that work in IE8 - javascript

I am trying to center my modals and I have the following code http://jsfiddle.net/be34jkzk/4/
That is the code I have. I just want to make sure that the modal is centered and kinda responsive. I tried changing the code for modalPopupClass to something like this, but it displays it weird on IE8.
CSS:
.modalPopupClass{
display:none;
position: fixed;
top: 50%;
left: 50%;
width: 50%;
max-width: 630px;
min-width: 320px;
height: auto;
z-index: 4020;
transform: translateX(-50%) translateY(-50%);
}

Here is a technique to keep a fluid height and width div dead center vertically and horizontally. Compatible in IE8+
This is made possible with the combination of margin: auto and a tug-of-war between top: 0; left: 0; bottom: 0; and right: 0;
Use a percentage width and height (it needs a height)
Use a combination of min / max width and min / max height
Experiment to get the best results for your project.
Here is a write up on the technique over on Smashing Magazine
CSS / HTML / Demo
.dead-center {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
background: #F00;
height: 50%;
width: 50%;
min-width: 100px;
min-height: 100px
}
<div class="dead-center"></div>

Related

modify the mobile portrait mode background video into browser support with aspect ratio responsively

how can be modify the portrait mode of background video support responsively covered with browser?
I try to work like this, but that not supported that was fully covered
position: absolute;
object-fit: cover; //also try fill method also but not worked
height: 100%;
width: 100%;
right: 0;
left: 0;
bottom: 0;
z-index: -1;
i want like this
Kindly help this!
Try this
position: absolute;
height: 100%;
width: 100%;
right: 0;
left: 0;
bottom: 0;
z-index: -1;
min-height:100vh;
min-width:100vw;
object-fit:cover;

Preserving div ratio when height is the limiting factor

I am trying to create a "slide" div that is centered in the middle of the screen with a constant aspect ratio.
Combining this trick for centering and this one for the ratio, I came up with this:
HTML
<div class="slide">
<div class="slide-content">
Percentage sized and still centered.
</div>
</div>
CSS
/* slide centered in the middle of the screen + width = 80% */
.slide {
position: fixed;
width: 80%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: red;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
}
/* aspect ratio of 2:1 */
.slide:before{
content: "";
display: block;
padding-top: 50%;
}
/* stretch the content to the slide size */
.slide > .slide-content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 40px 60px;
transition: all 0.6s ease-in-out;
}
Fiddle is here: https://jsfiddle.net/3jph853w/
It works beautifully, expect on mobile in landscape view: the trick being based on width, the div is not resized properly and part of it "overflows" outside the screen. You can see it when you resize the fiddle output vertically.
How can I fix it ? I would rather keep it css only, with additional html markup is necessary. I am open to JS, but my project is Angular based and does not use jQuery.
This might be a start
Fiddle demo 100% of viewport
Fiddle demo 80% of viewport
html, body{
margin: 0;
}
.slide{
position: absolute;
width: calc(100vh * 2);
height: calc(100vw * 0.5);
max-width: 100vw;
max-height: 100vh;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.slide-content{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: red;
padding: 40px 60px;
box-sizing: border-box;
transition: all 0.6s ease-in-out;
}
<div class="slide">
<div class="slide-content">
Percentage sized and still centered.
</div>
</div>
add text-align:center; to the bottom of .slide > .slide-content {

Position fixed doesn't work inside relative position, CSS

I'm trying to put div with position:fixed inside div with position:relative.
This is CSS:
#wrapper {
background-color: #199eaf;
height: auto;
left: 0;
min-height: 100%;
position: relative;
text-align: left;
top: 0;
width: 100%;
}
.menu-space {
background: #fff none repeat scroll 0 0;
height: 174px;
left: 0;
overflow: hidden;
padding: 43px;
position: fixed;
top: 0;
transform: skewY(-10deg);
width: calc(100% + 100px);
z-index: 800;
}
This for some reason doesn't work as I expect. My div goes inside next div in #wrapper div (See screenshot: http://www.awesomescreenshot.com/image/445294/fb3d41bfb92a0f76d60266ed0ac4f0a9) I can make this work just if I use one of this two solution for .menu-space div
transform: skewY(-10deg) translate(0px, -101px);
or
top: -170px;
But I really don't want to use those minus values. Can someone please help me to find better solution?
This is how menu should look
http://www.awesomescreenshot.com/image/445297/e799ee584ead6007b9fe16628ccc15bc
and on scroll:
http://www.awesomescreenshot.com/image/445300/cee6600490bab7e58a479da23ac9974a
Thank you!
By default, transforms happen from the center of the element. Your skew is twisting the element from its center, causing the left side to drop and the right side to rise.
Set transform-origin: top left (or 0 0 if you prefer) and you can get rid of the negative top or translate.
.menu-space {
background: #fff none repeat scroll 0 0;
height: 174px;
left: 0;
overflow: hidden;
padding: 43px;
position: fixed;
top: 0;
transform: skewY(-10deg);
transform-origin: top left;
width: calc(100% + 100px);
z-index: 800;
}
See MDN
The reason for this is the transform: skewY(-10deg);. As per the W3C spec, if position: fixed; is used on an element inside an element with a transformation applied to it, the fixed-position element is positioned relative to that transformed element.

Absolute positioned element not extending with scrollable content (past 100%)

I have a popup window in which an element called fade is supposed to extend to the full width of the screen (it does this when there is no scrollable content). However when content exceeds 100% of the browser window it does not extend to 100% of the page height.
If i set html, body { height: 100%; overflow-y: hidden; } I get the result I want but then I get 2 scrollbars on the right hand side.
http://jsfiddle.net/Dpqg5/
HTML
<div id="fade"></div>
<div id="popup"></div>
<span id="open">Open Box</span>
CSS
#fade { display:none;width: 100%; min-height: 100%; background-color: rgba(0,0,0,0.5); position: absolute; top: 0; left: 0; z-index: 1;}
#popup { width: 200px; height: 300px; background-color: #ccc; position: absolute; top: 30px; left: 50%; margin-left: -100px;display:none; }
#open { cursor: pointer; }
Any ideas on how to get this element to extend fully to the height of the web browser even when there is more scrollable content?
set your fade css to:
#fade {
display: none;
background-color: rgba(0,0,0,0.5);
position: fixed;
z-index: 1;
top: 0;
bottom: 0;
left: 0;
right: 0;
}

Pure JavaScript: Center an absolute position div in body

What's the easiest and shortest way to center an absolute position div in the body without using a library like jQuery. Thank you!
Edit:
Something like http://jsfiddle.net/apfwh/ but maybe with a bit cleaner?
I think no js needed. CSS will do it (see here):
body {
background: #888;
}
.box {
width: 100px;
height: 100px;
background: #ccc;
position: absolute;
left: 50%;
top: 50%;
margin: -50px 0 0 -50px;
}
UPD
In case you don't have fixed width/height of element:
JS (when element is opened):
element.style.margitLeft = -element.offsetWidth / 2
element.style.margitTop = -element.offsetHeight / 2
CSS:
.box {
background: #ccc;
position: fixed;
left: 50%;
top: 50%;
}

Categories