jquery css3手机端点击遮罩弹出分享按钮代码



228 911 304



特效描述:点击遮罩弹出 分享按钮代码,jquery css3点弹出分享按钮,遮罩弹出层.

代码结构

1. 引入JS

<script type="text/javascript" src="jquery-1.7.js"></script>

2. HTML代码

<script type="text/javascript">
	function toshare(){
		$(".am-share").addClass("am-modal-active");	
		if($(".sharebg").length>0){
			$(".sharebg").addClass("sharebg-active");
		}else{
			$("body").append('<div class="sharebg"></div>');
			$(".sharebg").addClass("sharebg-active");
		}
		$(".sharebg-active,.share_btn").click(function(){
			$(".am-share").removeClass("am-modal-active");	
			setTimeout(function(){
				$(".sharebg-active").removeClass("sharebg-active");	
				$(".sharebg").remove();	
			},300);
		})
	}	
</script>
<span onClick="toshare()" style="border:dotted 1px #ddd;display:block;width:100px;text-align:center;margin:20px auto 0 auto;cursor:pointer;height:60px;line-height:60px;">点击分享到</span>
<div class="am-share">
  <h3 class="am-share-title">分享到</h3>
  <ul class="am-share-sns">
    <li><a href="#"> <i class="share-icon-weibo"></i> <span>新浪微博</span> </a> </li>
    <li><a href="#"> <i class="share-icon-weibo"></i> <span>新浪微博</span> </a> </li>
    <li><a href="#"> <i class="share-icon-weibo"></i> <span>新浪微博</span> </a> </li>
    <li><a href="#"> <i class="share-icon-weibo"></i> <span>新浪微博</span> </a> </li>
  </ul>
  <div class="am-share-footer"><button class="share_btn">取消</button></div>
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 右键菜单 文字提示框 提示框/弹出层 layer lightbox Tooltip工具提示框 浮动提示框 html5弹窗动画 弹出层拖动 窗口提示框

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到