IEを判定してアラートを表示

当サイトで配布するテンプレートは IE非対応 です。ですが、対策をしたいとお考えの方もいらっしゃるかもしれないのでその方法をご紹介します。

01. オーバーレイ表示

Internet Explorerを判定してアラートを表示し、モダンブラウザへ誘導する方法（PHP版 / JS版） | WEMO

上記のサイト様の記事でIEを判断してモダンブラウザへの移行を促すアラートを表示させる方法を紹介してくださっているので、ご参考下さい。

このままではエラーが出てしまったので、js の変更点を挙げます。

02. 変更点

`<span>Internet Explorer、ダメ絶対！</span>

Google Chromeをダウンロード</a>`;

分かりにくいですが、「`」の記号がエラーになってしまうので「'」に変更します。

'<span>Internet Explorer、ダメ絶対！</span>

Google Chromeをダウンロード</a>';

次に中身の改行をなくします。

ieDiv.innerHTML = '<span>Internet Explorer、ダメ絶対！</span><p>あなたが使用している <b>Internet Explorer</b> というブラウザはとても古いものです。<br>言ってしまえば、百害あって一利なしの老害です。<br>世界中で、多くのWEB制作者があなたの <b>Internet Explorer</b> のせいで苦悩しています。<br><br>どうか、<b>最新のモダンブラウザ（EdgeやFirefox、Google Chrome）</b>をお使いください。</p><a href="https://www.google.co.jp/chrome/index.html">Google Chromeをダウンロード</a>';

これでアラートは正常に表示できると思います。

03. カスタマイズ

CSSや文章などはお好きにカスタマイズしてください。
例えば以下のようにCSSを変更してみました。

.ie_alert {
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 90%;
   height: 95%;
   background: #882642;
   color: #fff;
   text-align: center;
   padding: 20px 40px;
   z-index: 1000000;
}
.ie_alert span {
   display: block;
   font-size: 80px;
}
.ie_alert p {
   font-size: 20px;
}
.ie_alert a {
   display: inline-block;
   font-size: 16px;
   margin-top: 20px;
   padding: 8px 80px;
   border: solid 1px #fff;
   color: #fff;
}
.ie_alert a:hover {
   background: rgba(255,255,255,0.1);
}

参考になればうれしいです。

04. 終わりに

「IE非対応のサイトでアラートを表示する方法」についてまとめました。