jQuery手机端点击弹出分享按钮代码

 时间:2024-10-31 00:23:09

1、新建html文档。

jQuery手机端点击弹出分享按钮代码

2、书写html。争犸禀淫<span onclick="toshare()" style="border:dotted 1px #ddd;displa烤恤鹇灭y: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>

jQuery手机端点击弹出分享按钮代码

3、书写css样式。<style type="text/css">* { padding: 0; margin: 0; }.am-share { font-size: 14px; border-radius: 0; bottom: 0; left: 0; position: fixed; text-align: center; -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); -webkit-transition: -webkit-transform 300ms; transition: transform 300ms; width: 100%; z-index: 1110; }.am-modal-active { transform: translateY(0px); -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0) }.am-modal-out { z-index: 1109; -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%) }.am-share-title { background-color: #f8f8f8; border-bottom: 1px solid #fff; border-top-left-radius: 2px; border-top-right-radius: 2px; color: #555; font-weight: 400; margin: 0 10px; padding: 10px 0 0; text-align: center; }.am-share-title::after { border-bottom: 1px solid #dfdfdf; content: ""; display: block; height: 0; margin-top: 10px; width: 100%; }.am-share-footer { margin: 10px; }.am-share-footer .share_btn { color: #555; display: block; width: 100%; background-color: #e6e6e6; border: 1px solid #e6e6e6; border-radius: 0; cursor: pointer; font-size: 16px; font-weight: 400; line-height: 1.2; padding: 0.625em 0; text-align: center; transition: background-color 300ms ease-out 0s, border-color 300ms ease-out 0s; vertical-align: middle; white-space: nowrap; font-family: "微软雅黑"; }.am-share-sns { background-color: #f8f8f8; border-radius: 0 0 2px 2px; margin: 0 10px; padding-top: 15px; height: auto; zoom: 1; overflow: auto; }.am-share-sns li { margin-bottom: 15px; display: block; float: left; height: auto; width: 25%; }.am-share-sns a { color: #555; display: block; text-decoration: none; }.am-share-sns span { display: block; }.am-share-sns li i { background-position: center 50%; background-repeat: no-repeat; background-size: 36px 36px; background-color: #ccc; color: #fff; display: inline-block; font-size: 18px; height: 36px; line-height: 36px; margin-bottom: 5px; width: 36px; }.am-share-sns .share-icon-weibo { background-image: url(); }.sharebg { background-color: rgba(0, 0, 0, 0.6); bottom: 0; height: 100%; left: 0; opacity: 0; position: fixed; right: 0; top: 0; width: 100%; z-index: 1100; display: none; }.sharebg-active { opacity: 1; display: block; }</style>

jQuery手机端点击弹出分享按钮代码

4、书写js。<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>

jQuery手机端点击弹出分享按钮代码

5、应用js包,js包可以在网站上下载。<script type="text/javascript" src="jquery-1.7.js"></script>

  • jQuery自定义菜单界面操作代码
  • 实用的jquery输入框增加列表代码
  • Jquery微信朋友圈分享代码
  • jQuery手机自定义确认提示框代码
  • 热门搜索
    预防新型冠状病毒的手抄报 我的成长足迹手抄报 宪法手抄报图片大全 历史手抄报资料 手抄报怎么做 做美德少年手抄报 健康教育手抄报内容 鲁迅的手抄报 科普知识的手抄报 我是环保小卫士手抄报