HTML

 <input id="btnshow" type="button" value="Show" onclick="showdiv();" />
<div id="bg"></div>
 <input id="btnshow" type="button" value="Show" onclick="showdiv();" />
<div id="show"></div>

CSS

#bg {
  display: none;
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index: 1001;
  -moz-opacity: 0.7;
  opacity: 0.7;
  filter: alpha(opacity=70);
}

#show {
  display: none;
  position: absolute;
  top: 25%;
  left: 22%;
  width: 53%;
  height: 49%;
  padding: 8px;
  border: 8px solid #e8e9f7;
  background-color: white;
  z-index: 1002;
  overflow: auto;
}

JavaScript

function showdiv() {
  document.getElementById("bg").style.display = "block";
  document.getElementById("show").style.display = "block";
}

function hidediv() {
  document.getElementById("bg").style.display = "none";
  document.getElementById("show").style.display = "none";
}

效果展示

效果圖

效果圖1