标签：限定浏览器

有部分网站对浏览器的要求极为严格，而其他浏览器打开又会有bug或者无法操作等情况。那么这时候 就需要有一个代码，禁止该浏览器打开，或者指定浏览器才可以打开。 否则跳转到指定页面如下图。

效果图

1.实际操作的时候 把下面代码中的 js部分添加到网站的公共文件 一般为footer.php

js代码

<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">OKMG温馨提示</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文件，单独引入。即可！

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
}