私は100％サイズのページにオーバーレイを追加しようとしています。問題は、内側のdivとボタンがクリックできなくなったことです。これの方法はありますか？フルボディオーバーレイ内部divをクリック可能
私はオーバーレイを追加するために、ここで答えを使用：私は達成しようとしているCSS: How to get this overlay to extend 100% with scrolling?
何が私達がPhotoshopのレイヤー/グループに追加のマスクのようなものです。
おかげ
オーバーレイ、ボタンのコンテナの上のレイヤ上にある、最も可能性の高い傍受ポインタイベントです。それらを無効にします。
.overlay {
pointer-events: none;
}
あなたがここにJavaScriptやjQueryの
の少しを使用する必要があることはjQueryとCSS
<!doctype html>
<html lang="en">
<head>
<title>
tester
</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"> </script>
<script>
$(document).ready(function(){
$("button").click(function(){
$(".overlay").fadeIn();
$(".popup").fadeIn();
});
$(".overlay").click(function(){
$(".overlay").hide();
$(".popup").hide();
});
});
</script>
<style>
*
{
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: "helvetica ";
}
button
{
position: absolute;
left: 47%;
height: 50px;
border: none;
top: 10%;
width: 5%;
border-radius: 10px/150px;
transition: 0.5s;
z-index: -2;
}
button:hover
{
cursor: pointer;
background: #212121;
color: white;
font-size: 20px;
}
.overlay
{
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 667px;
background: black;
z-index: 1000;
opacity: 0.5;
display: none;
}
.overlay:hover
{
cursor: pointer;
}
.popup
{
width: 50%;
height: 350px;
background: white;
z-index: 1001;
position: absolute;
left: 25%;
top: 25%;
border-radius: 20px;
padding:15px;
text-align: center;
font-size: 36px;
display: none;
}
</style>
</head>
<body>
<button>
Pop up
</button>
<div class="overlay">
</div>
<div class="popup">
<p>AM A Pop Up</p>
<input type="button" value="click me">
</div>
</body>
</html>