有部分网站对浏览器的要求极为严格,而其他浏览器打开又会有bug或者无法操作等情况。那么这时候 就需要有一个代码,禁止以网站不支持的浏览器打开,或者指定浏览器访问才可以打开。 否则跳转到指定页面,即利用js实现让wordpress网站以指定的浏览器才可以访问打开!
效果如下图:
教程如下:
1.实际操作的时候把下面代码中的 js部分添加到网站的公共文件 一般为footer.php
<script>
var explorer = window.navigator.userAgent;
explorer = explorer.toUpperCase();
if (!window.FileReader || explorer.indexOf('CHROME') < 0 && explorer.indexOf('SAFARI') < 0) {
document.body.innerHTML = '<div class="mod_popup popup_browser" data-aria="popup"><div class="popup__mask"></div><div class="popup__box"> <div class="popup__hd"><h2 class="popup__tit">本站温馨提示</h2></div><div class="popup__bd"><div class="popup__bd_inner popup__bd__browser"><h3 class="popup__subtit">为保证您更好的使用本系统,推荐使用以下浏览器访问。</h3><div class="browser"><p class="browser__item"><a target="_blank" href="https://pc.qq.com/detail/1/detail_2661.html"><i class="icon_chrome"></i>Chrome浏览器</a></p><p class="browser__item"><a target="_blank" href="https://browser.qq.com/?adtag=SEM170314011"><i class="icon_qq"></i>QQ浏览器</a></p></div></div></div></div></div>';
}
</script>
2.然后将style
标签中的css文件,单独引入。即可!
.mod_popup {
position:fixed;
z-index:1000
}
.mod_popup,
.popup__mask {
top:0;
right:0;
bottom:0;
left:0
}
.popup__mask {
position:absolute;
z-index:1;
background:rgba(0,0,0,.5)
}
.popup__box {
position:absolute;
top:50%;
left:50%;
z-index:2;
min-width:316px;
overflow:hidden;
border-radius:8px;
color:#000;
background:#fff;
-ms-transform:translate(-50%,-50%);
transform:translate(-50%,-50%)
}
.popup__hd {
height:56px;
line-height:56px;
background:#f5f6fa
}
.popup__tit {
text-align:center;
font-size:18px
}
.popup__bd {
position:relative;
margin:42px 10px 0;
padding:0 22px;
max-height:600px;
overflow:auto
}
.popup__para {
font-size:18px;
font-weight:700
}
.popup__para--center {
text-align:center
}
.popup__txt_thin {
font-size:16px
}
.popup__ft {
position:relative;
margin:32px 0;
text-align:center;
font-size:0
}
.popup__ft__txt {
position:absolute;
font-size:14px;
left:0;
top:0;
padding-left:26px;
line-height:40px
}
.popup__btn {
position:relative;
display:inline-block;
width:120px;
box-sizing:border-box;
height:40px;
line-height:38px;
margin:0 6px;
white-space:nowrap;
font-size:16px;
font-weight:700;
color:rgba(0,0,0,.6);
border:1px solid rgba(0,0,0,.2);
border-radius:999px;
background:#fff
}
.popup__btn:hover {
color:#22d59c;
border-color:#22d59c
}
.popup__btn:active {
color:#23c28f;
border-color:#23c28f
}
.popup__btn.disabled {
color:rgba(0,0,0,.3)!important;
border-color:rgba(0,0,0,.15)!important;
cursor:default
}
.popup__btn--primary {
color:#fff;
border:none;
background:#22d59c
}
.popup__btn--primary:hover {
color:#fff;
background:#24e0a4
}
.popup__btn--primary:active {
color:#fff;
background:#23c28f
}
.popup__btn--primary.disabled {
color:#fff!important;
background:rgba(34,213,156,.5)!important
}
.popup__close {
position:absolute;
font-size:0;
top:10px;
right:10px;
z-index:3;
width:20px;
height:20px;
cursor:pointer;
-ms-transform:rotate(45deg);
transform:rotate(45deg)
}
.popup__close:after,
.popup__close:before {
content:"";
position:absolute;
border-radius:2px;
background:#bababa
}
.popup__close:before {
top:9px;
left:2px;
width:16px;
height:2px
}
.popup__close:after {
top:2px;
left:9px;
width:2px;
height:16px
}
.popup__close:hover:after,
.popup__close:hover:before {
background:#22d59c
}
.popup--rich .popup__box {
display:flex;
flex-direction:column;
width:800px
}
.popup--rich .popup__bd {
flex-grow:1;
margin:0;
padding:0;
overflow:visible
}
.popup--rich .popup__ft {
margin-right:20px;
text-align:right
}
.popup--rich .popup__close {
top:18px;
right:15px
}
.popup--login .popup__box {
width:700px;
height:400px
}
.popup_tab {
position:relative;
z-index:2;
height:56px;
line-height:56px;
text-align:center;
font-size:0;
border:1px solid rgba(0,0,0,.05);
background-color:#fff
}
.popup_tab__item {
display:inline-block;
margin:0 50px;
font-size:16px;
cursor:pointer
}
.popup_tab__item--current {
color:#22d59c;
cursor:default
}
.popup_login_qq {
margin-top:-48px
}
.wechat_login_tips {
position:absolute;
left:0;
bottom:100px;
width:100%;
text-align:center;
font-size:12px;
color:rgba(0,0,0,.5)
}
.icon_qq {
background-position:0 -60px
}
.icon_firefox {
background-position:0 -120px
}
.icon_ie {
background-position:0 -180px
}
.popup__bd__browser {
padding:0 40px 28px
}
.popup__bd__browser .popup__subtit {
text-align:center;
}.icon_chrome,
.icon_firefox,
.icon_ie,
.icon_qq {
display:block;
margin:0 auto;
width:60px;
height:60px;
background:url(https://y.qq.com/artists/js/img/browser_99e4e86.jpg?max_age=25920000) no-repeat 0 0
}
.icon_qq {
background-position:0 -60px
}
.icon_firefox {
background-position:0 -120px
}
.icon_ie {
background-position:0 -180px
}
.popup__bd__browser {
padding:0 40px 28px
}
.popup__bd__browser .popup__subtit {
text-align:center
}
.popup__bd__browser .popup__subtit {
text-align: center;
}
.browser {
overflow: hidden;
padding: 30px 0;
text-align: center;
font-size: 0;
}
.browser__item {
display: inline-block;
margin: 0 15px;
min-width: 90px;
text-align: center;
font-size: 14px;
}
.browser__item {
text-align: center;
font-size: 14px;
}.browser__item {
display: inline-block;
margin: 0 15px;
min-width: 90px;
text-align: center;
font-size: 14px;
}
.browser__item a{
text-decoration: none;
color: #1a1a1a;
}.browser__item a:hover {
color:#22d59c;
border-color:#22d59c
}
.c_btn_normal:active {
color:#23c28f;
border-color:#23c28f
}
至此,效果实现,教程结束!