话不多说，上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title></title>
<script src="http://cdn.bootcss.com/zepto/1.0rc1/zepto.min.js"></script>
<script>
//get browser type
var ua = navigator.userAgent;
var wx = /MicroMessenger/;
var qqbrowser = /MQQBrowser/;
var ucbrowser = /UCBrowser/;
//var baidu = /baidu/;
//关闭弹窗
function uiCloseAll(){
$('.js-ui-acttemp-layer,.js-ui-acttemp-tuc-alert-2,.js-ui-acttemp-wx-alert,.js-ui-acttemp-tuc-alert-3').addClass('hide');
}
$(function(){
//设定html基础字体大小
function setHtmlFontSize() {
var baseWidth = 640,
baseFontSize = 20,
newSize;
newSize = parseInt( ((window.innerWidth) / baseWidth) * 20);
document.documentElement.style.fontSize = ((window.innerWidth) / baseWidth) * 20 + "px";
}
setHtmlFontSize();
window.onresize = function() {
setHtmlFontSize();
}
//type of wx
if(wx.test(ua)){
var s ="";
var share = '<div class="ui-acttemp-layer js-ui-acttemp-layer" onClick="uiCloseAll()"></div><div onClick="uiCloseAll()" class="ui-acttemp-wx-alert js-ui-acttemp-wx-alert"><p class="ui-acttemp-wx-arrow"><span></span></p><div class="ui-acttemp-text-list"><p class="ui-acttemp-pl5"><span class="ui-acttemp-t1"><em class="ui-acttemp-wx-bn"></em>请点击右上角:</span></p><p><span class="ui-acttemp-span">【发送给朋友】或【分享到朋友圈】</span></p><p class="ui-acttemp-pl5">'+s+'</p></div></div>' ;
$('body').append(share);
}
else{
//type of uc or qq and safari
if(!wx.test(ua)&&qqbrowser.test(ua)||ucbrowser.test(ua)||(/Safari/.test(ua)&&/iPhone|ipod|ipad/.test(ua))){
var share = '<div class="ui-acttemp-layer js-ui-acttemp-layer" onClick="uiCloseAll()"></div><div onClick="uiCloseAll()" class="ui-acttemp-tuc-alert-2 js-ui-acttemp-tuc-alert-2"><p class="ui-acttemp-sb-title">请用浏览器菜单分享到<span>【微信朋友圈】</span></p><span class="middlebottom"></span></div>';
$('body').append(share);
}
//other browser
else{
var share = '<div class="ui-acttemp-layer js-ui-acttemp-layer" onClick="uiCloseAll()"></div><div onClick="uiCloseAll()" class="ui-alert js-ui-acttemp-tuc-alert-3"><div class="ui-alert-tit"> 提示 </div><div class="ui-alert-cont"><span class="ui-alert-txt">请用浏览器菜单分享到微信朋友圈</span></div><div class="ui-alert-ft"><div class="ui-alert-btn js-ui-alert-btn">我知道了</div></div></div>'
$('body').append(share);
}
}
})
</script>
<style>
/*wx*/
.ui-acttemp-layer{top:0; left:0; width:100%; height:100%; position:fixed; opacity:.8; z-index:99; background:#000;}
.ui-acttemp-wx-alert{ width:270px; height:220px; position:fixed;font-size:16px; top:10px; right:25px;z-index:100; color:#FFF;}
.ui-acttemp-wx-alert .ui-acttemp-text-list{line-height:30px;}
.ui-acttemp-wx-alert .ui-acttemp-text-list .ui-acttemp-span{color:#c3e8aa;}
.ui-acttemp-wx-alert .ui-acttemp-text-list .ui-acttemp-pl5{ padding-left:7px;}
.ui-acttemp-wx-alert .ui-acttemp-text-list .ui-acttemp-t1{ position:relative; height:30px; line-height:30px; display:inline-block;}
.ui-acttemp-wx-alert .ui-acttemp-text-list .ui-acttemp-wx-bn{ width:2px; height:12px; display:block; position:absolute; top:50%; margin-top:-6px; right:-10px; background:url() no-repeat 0 0; background-size:100% 100%;}
.ui-acttemp-wx-alert .ui-acttemp-wx-arrow{ text-align:right; }
.ui-acttemp-wx-alert .ui-acttemp-wx-arrow span{ width:92px; height:110px; display:inline-block; background:url(images/rightup.png) no-repeat 0 0; background-size:92px 110px;}
/*tuc*/
.ui-acttemp-tuc-alert {position: fixed;left: 0;bottom: 0;width: 100%;z-index:100;background: #f2f2f2;padding: 0 15px 10px;box-sizing: border-box;transition: all 0.5s ease;-webkit-transition: all 0.5s ease;transform: translateY(100%);-webkit-transform: translateY(100%); display:none;}
.ui-acttemp-tuc-alert .ui-acttemp-head {padding: 10px 0;border-bottom: 1px solid #cecece;font-size: 16px;}
.ui-acttemp-tuc-alert .ui-acttemp-content{ margin-top:10px;}
.ui-acttemp-tuc-alert .ui-acttemp-content span{ margin-right:10px;}
.ui-acttemp-tuc-alert .ui-acttemp-hide {float: right;}
.ui-acttemp-tuc-alert.ui-acttemp-show {transform: translateY(0);-webkit-transform: translateY(0); display:block;}
/*uc-qq-safari*/
.ui-acttemp-tuc-alert-2{ width:100%; height:200px; position:fixed; bottom:30px; left:0;z-index:100; text-align:center; color:#FFF; font-size:16px;}
.ui-acttemp-tuc-alert-2 .ui-acttemp-sb-title{ color:#FFF; font-size:16px; padding-bottom:15px;}
.ui-acttemp-tuc-alert-2 .ui-acttemp-sb-title span{ color:#c3e8aa}
.ui-acttemp-tuc-alert-2 span.middlebottom{ width:40px; height:130px; display:inline-block; background:url(images/middlebottom.png) no-repeat 0 0; background-size:40px 130px;}
/*other*/
.ui-alert-layer {z-index:90; top:0; left:0; width:100%; height:100%; position:fixed; opacity:.6; z-index:99; background:#000; }
.ui-alert {position:fixed; z-index:100; top:50%; margin-top:-90px; padding-bottom:64px; left:10px; right:10px; background:#fff; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px;-webkit-box-sizing:border-box;box-sizing:border-box;font-family:"microsoft yahei"}
.ui-alert-bd {overflow:auto;height:100%;padding-bottom:50px;-webkit-box-sizing:border-box;box-sizing:border-box;}
.ui-alert-tit {margin-top:10px; text-align:center; color:#000; font-size:18px;}
.ui-alert-cont {color:#666; font-size:14px; padding:10px 20px 0 20px; line-height:24px; text-align:center; min-height:30px;}
.ui-alert-txt {display:inline-block; text-align:left;}
.ui-alert-ft {display:table; width:100%; position:absolute; z-index:101; left:0; bottom:0; background:#F6F6F6; border-radius:0 0 3px 3px; -moz-border-radius:0 0 3px 3px; -webkit-border-radius:0 0 3px 3px; border-top:1px solid #ddd;}
.ui-alert-btn {display:table-cell; height:48px; text-align:center;color:#3366cc; font-size:15px; line-height:48px;width:50px;}
.ui-alert-btn:nth-child(2) {border-left:1px solid #ddd;}
.hide{display:none;}
</style>
</head>
<body>
</body>
</html>
效果图
还有一个是微信浏览器的指向右上角分享，就不截图了。
250
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
