javascript - 将信息框居中并拉伸(stretch)所有内容以适应任何屏幕？

Question

我们如何制作居中并拉伸(stretch)以适合任何屏幕的信息框？

Answer 1

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>