苹果IOS系统Safari浏览器网页底部自动弹出关闭添加至桌面遮罩效果html5源码

苹果IOS系统Safari浏览器网页底部自动弹出关闭添加至桌面遮罩效果html5源码

个别时候我们想要用户将网页添加到主屏幕,用来提高用户粘稠度提高回头率,当然用户很难自主想到这样做,所以就需要遮罩代码辅助提示完成这一任务。

下面分享的遮罩代码,实现的功能是用户首次访问打开页面,就会弹出提示添加到主屏幕遮罩(无操作会一直显示),用户触发页面(对页面有任意操作,上下滑动,点击任意位置等)则会自动关闭遮罩,不操作页面点击关闭按钮也行。

将以下代码整合到自己需要显示添加到主屏幕遮罩的页面(一般只有主页需要),替换代码里的介绍和背景logo图片为自己的(已标注),代码没有对浏览器进行判断显示(默认好像IOS浏览器都会显示),可以百度一下找到判断是否为Safari浏览器的代码整合到页面效果更好。

<!DOCTYPE html>
<html>
<head>

<!--star-->
<meta charset="utf-8">
<meta http-equiv="Cache-Control" content="no-siteapp">
<meta content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" name="viewport">
<meta name="apple-mobile-web-app-title" content="保存到桌面的名称">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="format-detection" content="telephone=no">
<link rel="apple-touch-icon" sizes="114x114" href="保存到桌面的图标地址">
<link rel="apple-touch-startup-image" href="保存到桌面的图标地址">
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<style>
.desktop {
display: none;
z-index: 990;
position: fixed;

bottom: 0;
left: 50%;
width: 7rem;
margin-left: -3.6rem;
height: rem;
background: url('http://dy.360wifi.cc/upload/index/desktop.png') 0 0 no-repeat;
/*这里PS修改替换为自己的背景logo图片*/
background-size: 100% 100%;
height: 3rem;
}

.desktop:before {
position: absolute;
content: '+';
top: 0rem;
right: 0.1rem;
line-height: 1;
font-size: 0.6rem;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
cursor: pointer;
}

.desktop-info {
padding: 0.6rem 0.1rem 0 2.2rem;
}

.desktop-info span {
display: block;
font-size: 0.4rem;
line-height: 0.5rem;
}

.desktop-info b {
position: relative;
top: 1px;
display: inline-block;
width: 0.4rem;
height: 0.4rem;
background: url('http://dy.360wifi.cc/upload/index/normal.png') 0 0 no-repeat;
background-size: 100% auto;
}

.desktop-info b.desk-safari {
background: url('http://dy.360wifi.cc/upload/index/safari.png') 0 0 no-repeat;
background-size: 100% auto;
}
</style>
<script>
(function () {
var t;
function setbaseFont() {
var w_width = $(window).width();
var baseFontSize = w_width / 10;
$('html').css('font-size', (baseFontSize > 64 ? 64 : baseFontSize) + 'px');
}
setbaseFont();
$(window).on('resize', function (e) {
// t = setInterval(,200)
setbaseFont();
});
})();
$(document).ready(function ($) {
// 桌面快捷方式
(function() {
var $tip = $('.desktop');
var $icon = $('.desktop b');
var $wd = $(window);
var pf = '';

pf = (function() {
var ua = navigator.userAgent.toLowerCase();
var pf = '';

if (ua.indexOf("micromessenger") > -1) {
pf = 'weixin';
} else if (ua.indexOf("safari") > -1 && ua.indexOf('iphone') > -1) {
pf = 'ios';
}
return pf;
})();

switch (pf) {
case 'ios':
$icon.addClass('desk-safari');
showTip();
break;
case 'weixin':
break;
default:
$tip.hide();
}

function showTip() {
$tip.show();
$tip.on('click', function() {
$tip.hide();
});

function hideTip() {
if ($wd.scrollTop() > 50) {
$tip.hide();
$wd.off('scroll', hideTip);
}
}
$wd.on('scroll', hideTip);
}
})();
});
</script>
<!--end-->

</head>
<body style="background-color: black;">
<div style="height:1800px;width:100%;">

<!--star-->
<div class="desktop" style="display: block;">
<div class="desktop-info"> 
<span>添加 bbk资讯 至桌面</span> <!--修改这里的介绍-->
<span>点击下方的"<b style="background: url(http://dy.360wifi.cc/upload/index/safari.png) 0 0 no-repeat;background-size: 100% auto;"></b>"</span> 
<span>然后选择"添加至主屏幕"</span> 
</div>
</div>
<!--end-->

</div>
</body>
</html>

用户必读:隐私政策和版权声明


bbk资源 » 苹果IOS系统Safari浏览器网页底部自动弹出关闭添加至桌面遮罩效果html5源码

发表评论