<!DOCTYPE html>
|
<html>
|
<head>
|
<meta charset="utf-8" />
|
<title></title>
|
<script type="text/javascript" src="js/jquery-1.7.2.min.js" ></script>
|
<style>
|
*{margin:0;padding: 0;}
|
.clear{clear: both;}
|
a{text-decoration:none;}
|
.pageBox{width:100%;height:100%;margin: 0 auto;display:none;background:rgba(0,0,0,0.6);color:#2b2b2b;position: fixed;top:0;left: 0;}
|
.pageBox1{width:400px;border-radius: 8px;background:#fff;margin: 0 auto;overflow:hidden;}
|
.pageBoxP1{font-size:30px;text-align: center;border-bottom:1px solid #2B2B2B;line-height:2em;;}
|
.pageBoxP2{font-size:28px;text-align: center;padding:2%;}
|
.pageBoxBU{font-size:25px;width:45%;display: block;border:0;color:#fff;line-height:2em;border-radius:5px;margin:3% 0;cursor: pointer;text-align: center;}
|
.pageBoxBU1{float: right;margin-right:3%;background:#1aad19;}
|
.pageBoxBU2{float: left;margin-left: 3%;background:#858585;}
|
</style>
|
<script>
|
/* 提示框弹出 以及 提示音播放 */
|
function autoPlay(){
|
var music = document.getElementById("myaudio");
|
if(music.paused){
|
music.load(); //重新加载提示音
|
music.play(); //播放提示音
|
$('.pageBox').show();
|
}else{
|
music.pause(); //停止提示音
|
$('.pageBox').hide();
|
}
|
}
|
/* 隐藏提示框 以及 关闭提示音 */
|
function outPlay(){
|
var music = document.getElementById("myaudio");
|
$('.pageBox').hide();
|
music.pause();
|
}
|
</script>
|
</head>
|
<body>
|
<button onclick="autoPlay()">点击</button>
|
<div class="pageBox">
|
<table width="100%" height="100%"><tr><td valign="center">
|
<div class="pageBox1">
|
<p class="pageBoxP1">提示</p>
|
<p class="pageBoxP2">您有10条任务未处理!</p>
|
<a href="" class="pageBoxBU1 pageBoxBU">现在去处理</a>
|
<button class="pageBoxBU2 pageBoxBU" onclick="outPlay()">等下再处理</button>
|
<div class="clear"></div>
|
</div>
|
</td></tr></table>
|
<!--提示音-->
|
<audio id="myaudio" src="1.mp3"></audio>
|
</div>
|
|
</body>
|
</html>
|
