1
Как мы можем сделать информационное окно, которое было центрировано и растянуто для любого экрана?Центрирование информационного окна и растяжка всего, чтобы он поместился на любом экране?
A
ответ
0
check JsFiddle Here
function toggle_login() {
var div = document.getElementById('infobg');
div.style.display = div.style.display == 'none' ? 'block' : 'none';
return false;
}#bgfr {
position: fixed;
width: 100%;
height: 100%;
z-index:-10;
}
#infobg {
position: fixed;
background: rgba(0, 0, 0, 0.75);
width: 100%;
height: 100%;
z-index:20;
}
#mcenter {
position: fixed;
background: black;
color: lime;
font-size: 4vw;
width: 40vw;
height: 10vw;
padding: 2vw 2vw 5vw 2vw;
left: 50%;
top: 50%;
border-radius: 10px;
transform: translate(-50%, -50%);
}
#mcenter p {
text-align: center;
}
#closeo {
background:url('http://1.bp.blogspot.com/-hu1XPBgM5zc/VjT4spC8tOI/AAAAAAAAAHk/n9RsI39X9v4/s1600/1431064341362.png') no-repeat;
background-size: 3vw;
position: absolute;
width: 4vw;
height: 4vw;
right: -5%;
top: -5%;
cursor: pointer;
}
#closeo:hover {
background-size: 4vw;
right: -4%;
top: -8%;
}
#closeo:active {
background-size: 3.5vw;
right: -4.5%;
top: -6%;
}<iframe id="bgfr" src="http://www.w3schools.com/" border="0" width="100%" height="100%"></iframe>
<div id="infobg">
<div id="mcenter">
<span id="closeo" onclick="toggle_login()"></span>
<p>Pakistan Zindabad</p>
</div>
</div>
Вы можете сделать это с _HTML_ и _CSS_ с использованием фиксированного позиционирования, относительное позиционирование и отрицательные поля на блочных узлов, [** Demo **] (HTTP://jsfiddle.net/r96n9d56/) –
@Paul S. i Поделитесь своими знаниями, отвечая на мой вопрос ниже. –