V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Kamato
V2EX  ›  前端开发

推荐一个精美的 IE 浏览器兼容性提示弹窗,支持中文

  •  
  •   Kamato ·
    panteng · 2016-01-28 17:53:56 +08:00 · 3148 次点击
    这是一个创建于 3222 天前的主题,其中的信息可能已经有所发展或是发生改变。

    GitHub 地址: https://github.com/panteng/ie-blocker

    IE-Blocker

    Block outdated Internet Explorer from your website and display a friendly message of upgrading to modern browsers.

    Screenshot

    Live Preview

    Please visit the websites below with IE 6-9.

    English Version

    中文版本

    Install

    Install Manually

    Simply download the latest version of IE-Blocker from this page. Unzip the file and place the ie-blocker folder into your projects.

    Install Using Bower or Npm

    Optionally, you can install IE-Blocker with Bower or Npm:

    // With Bower
    bower install ie-blocker
    
    // With Npm
    npm install ie-blocker
    

    Usage

    Manual Install

    1. Include ie-blocker.css and ie-blocker.js inside the <head> tag. Use conditional comments to make these codes only work in old version IE.

      <!--[if lte IE 8]>
      <link rel="stylesheet" href="ie-blocker/ie-blocker.css">
      <script src="ie-blocker/ie-blocker.js"></script>
      <![endif]-->
      
    2. Place the following html code before the closing <body> tag. You can find the full code in template.html. Use conditional comments to make these codes only work in old version IE.

      <!--[if lte IE 8]>
      <div id="ib-container">
          <div class="ib-modal">
              ...
          </div>
          <div class="ib-mask"></div>
      </div>
      <![endif]-->
      
    3. That's it.

    Options

    • img-path:
      IE-Blocker uses some images to display browser icons. By default, IE-Blocker will look for these images in the img folder which locates at the same path of ie-blocker.js.
      So if you want to place these images somewhere else, you need to add an attribute img-path to script tag. For example:

      <!--[if lte IE 8]>
      <link rel="stylesheet" href="ie-blocker/ie-blocker.css">
      <script src="ie-blocker/ie-blocker.js" img-path="../images/browser_icons/"></script>
      <![endif]-->
      

      Remember the img-path is relative to ie-blocker.js, not the html file.
      Do not forget the '/' at the end.

    License

    MIT

    第 1 条附言  ·  2016-01-29 10:44:47 +08:00

    中文版截图

    Screenshot

    1 条回复    2016-01-28 18:12:30 +08:00
    aivier
        1
    aivier  
       2016-01-28 18:12:30 +08:00
    我也做了一个,代码比较烂,用的人不多
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2164 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 01:16 · PVG 09:16 · LAX 17:16 · JFK 20:16
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.