• 手写的一个兼容到ie6的提示更换浏览器的提示框


    const content = `

      var isIE = !!window.ActiveXObject || "ActiveXObject" in window

      function isWeiXin(){

        var ua = window.navigator.userAgent.toLowerCase();

        if(ua.match(/MicroMessenger/i) == 'micromessenger'){

            return true;

        }else{

            return false;

        }

      }

      if(isIE || isWeiXin()) {

        var frag = document.createDocumentFragment()

        var dpnDialog = document.createElement('div')

        dpnDialog.id = 'dpn-dialog'

        document.body.style.background='#B0B0B0'

        function closeModal() {

          document.getElementById('dpn-dialog').style.display="none"

        }

        var modalInnerHTML = [

          '<div style="500px; height:300px; border: 1px solid #D9D9D9; position:absolute;top:50%;left:50%;margin-left:-250px;margin-top:-150px; border-radius: 5px; z-index:10;',

          '<div style="100%; height:50px; border-bottom: 1px solid #D9D9D9;"><span style="font-size:14px; line-height:50px;margin:0 12px;">⚠️ 系统检测</span></div>',

          '<div style="100%;height:250px;">',

          '<div style="100%;padding:36px 0px 72px 24px;font-size:14px;">当前浏览器与系统不匹配,请更换</div>',

          '<div style="100%;text-align: center;">',

          '<div style="250px;height:40px;line-height:40px;background:#4064F1;border-radius: 5px;cursor: pointer;margin: 0 auto 16px auto;"> <a style="display: inline-block; 250px;height: 40px;text-decoration: none;font-size:16px;line-height:40px; color: white;text-align:center; " href="">查看可用浏览器</a></div>',

          '<div style="250px;height:40px;line-height:40px;background:#F5F5F5;border-radius: 5px;cursor: pointer;margin: 0px auto;font-size:16px;color: blue;text-align:center;id="btn-close" onclick="closeModal() ">下次再说</div>',

          '</div> </div> </div>'

        ]

        dpnDialog.innerHTML = modalInnerHTML.join('')

        frag.appendChild(dpnDialog)

        document.body.appendChild(frag)

        frag = null

      }

    `

  • 相关阅读:
    服务器内部模拟Http请求
    面试题分类
    Linux常用命令
    css补充之hover与overflow
    css之position
    css边框及float、display样式
    css存在形式及优先级
    css选择器
    body标签之fieldest与label标签
    body内标签之table标签
  • 原文地址:https://www.cnblogs.com/kangxinzhi/p/16044160.html
Copyright © 2020-2023  润新知