JAvascript+css原生態ポップアップ層
1874 ワード
JAvascript+css原生態ポップアップ層
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#divSCA {
position: absolute;
width: 880px;
height: 550px;
font-size: 12px;
background: #fff;
border: 0px solid #000;
left: 50% !important;
top: 15% !important;
margin-left: -440px;
z-index: 10001;
display: none;
}
.big-div {
position: absolute;
left: 0px;
top: -185px;
width: 100%;
height: 2000px;
background-color: rgb(17, 17, 17);
opacity: 0.7;
z-index: 1000;
}
</style>
<script>
function openDiv() {
document.getElementById("divSCA").style.display = "block";
document.getElementById("BigDiv").style.display = "block";
document.body.parentNode.style.overflow = "hidden";
}
function closeDiv() {
document.getElementById("divSCA").style.display = "none";
document.getElementById("BigDiv").style.display = "none";
}
</script>
</head>
<body>
<button type="button" class="btn btn-primary" onclick="openDiv()">
Select Deposit
</button>
<div id="divSCA">
<button type="button" onclick="closeDiv()">
X
</button>
</div>
<div id="BigDiv" class="big-div" style="display:none"></div>
</body>
</html>