<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="jquery.min.js"></script>
<style>
.over-lay{
width: 300px;
height: 300px;
position: absolute;
left:50px;
top:50px;
background-color: rgba(235,235,235,0.5);
}
.over-lay.hide{
display: none;
}
.content{
background-color: green;
width: calc(100% - 60px);
height: calc(100% - 0px);
border-radius: 10px;
position: absolute;
left: 30px;
top: 0px;
}
.back-button,.forward-button{
width: 30px;
height: 30px;
position: absolute;
top:calc(50% - 15px);
left:0px;
background-color: red;
font-size: 12px;
}
.forward-button{
right:0px;
left:auto;
}
</style>
<script>
$(function(){
$(".over-lay").on("click",".back-button,.forward-button",function(event){
console.log("不關(guān)閉overlay");
event.stopPropagation();//阻止冒泡到.over-lay
});
$(".over-lay").on("click",function(event){
console.log("關(guān)閉overlay");
$(this).addClass("hide");
});
});
</script>
</head>
<body>
<div class="over-lay">
<div class="back-button">后退</div>
<div class="content"></div>
<div class="forward-button">前進(jìn)</div>
</div>
</body>
</html>
