<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="../css/main.css">
<title>Document</title>
<script src="../js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function () {
// 1.點選 彈出按鈕 彈出提示框
$("#btn01").click(function (){
// $("#pop").show();
$("#pop").fadeIn();
return false;
})
// 2.選中空白的地方 隱藏提示框
$(window).click(function (){
$("#pop").hide();
// $("#pop").fadeOut;
// 3.找到詳情的提示框標籤 阻止冒泡
$(".pop_con").click(function () {
return false;
})
// 4.X 按鈕
$("#shutoff").click(function (){
$("#pop").hide();
})
})
})
</script>
</head>
<body>
<input type="button" value="彈出彈框" id="btn01">
<div class="pop_main" id="pop">
<div class="pop_con">
<div class="pop_title">
<h3>系統提示</h3>
<a href="#" id="shutoff">×</a>
</div>
<div class="pop_detail">
<p class="pop_text">親！請關注近期的優惠活動！</p>
</div>
<div class="pop_footer">
</div>
</div>
<div class="mask"></div>
</div>
</body>
</html>