有部分网站对浏览器的要求极为严格,而其他浏览器打开又会有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 }