Html代码
<div id="mcover" onclick="weChat()" style="display:none;">
<img src="images/guide.png" />
</div>
<div class="text" id="content">
<div id="mess_share">
<dsiv id="share_1">
<button class="button2" onclick="button1()">
<img src="images/icon_msg.png" width="64" height="64" />
发送给朋友
</button>
</div>
<div id="share_2">
<button class="button2" onclick="button2()">
<img src="images/icon_timeline.png" width="64" height="64" />
分享到朋友圈
</button>
</div>
<div class="clr"></div>
</div>
</div>
css代码
#mcover {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
display: none;
z-index: 20000;
}
#mcover img {
position: fixed;
right: 18px;
top: 5px;
width: 260px!important;
height: 180px!important;
z-index: 20001;
}
.text {
margin: 15px 0;
font-size: 14px;
word-wrap: break-word;
color: #727272;
}
#mess_share {
margin: 15px 0;
display: block;
}
#share_1 {
float: left;
width: 49%;
display: block;
}
#share_2 {
float: right;
width: 49%;
display: block;
}
.clr {
display: block;
clear: both;
height: 0;
overflow: hidden;
}
.button2 {
font-size: 16px;
padding: 8px 0;
border: 1px solid #adadab;
color: #000000;
background-color: #e8e8e8;
background-image: linear-gradient(to top, #dbdbdb, #f4f4f4);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.45), inset 0 1px 1px #efefef;
text-shadow: 0.5px 0.5px 1px #fff;
text-align: center;
border-radius: 3px;
width: 100%;
}
#mess_share img {
width: 22px!important;
height: 22px!important;
vertical-align: top;
border: 0;
}
Jquery代码
<script type="text/javascript">
function button1(){
$("#mcover").css("display","block") // 分享给好友按钮触动函数
}
function button2(){
$("#mcover").css("display","block") // 分享给好友圈按钮触动函数
}
function weChat(){
$("#mcover").css("display","none"); // 点击弹出层，弹出层消失
}
$(function(){
setTimeout(function () {
$("#mcover").show();}, 6000); // 6000时毫秒是弹出层
setTimeout(function () {
$("#mcover").hide(); }, 8000); //8000毫秒是隐藏层
})
</script>
最终效果图
注意：不要忘记引用Jquery，可以引用百度的Jquery地址
有很多朋友说这个代码不能用，而且找不到图片，很对不起，所以把我全部的代码分享出去，演示地址：http://2.iyuyoung.sinaapp.com/share/share.html
