[ js ] [ jQuery ] 外部リンクがクリックされた時、モーダルウィンドウをアラートとして表示させる

結局、先達の知恵をお借りして実装しましたが、そこに辿り着くのに手間取り、それまでは自分で実装していました。

なぜこれが採用されなかったのか、それはie11で機能しなかったからです。どうしても原因を見つけることができず、お蔵入りとなりました。

サイト内にある外部リンクがクリックされた時、モーダルウィンドウが立ち上がって、「本当に出ていきますか？否か？」を迫るプログラムです。

<a class="modalexternal-open" href="https://www.example.com/">サンプル</a>

<div class="modalexternal">
  <div class="modalexternal__bg modalexternal-close"></div>
  <div class="modalexternal__content">
    <div class="modalexternal__content__txt">外部サイトへ遷移します。本当にいいですか？</div>

    <div class="modalexternal__yesno">
      <a id="modalexternal__link" target="_blank">遷移する</a>
      <a class="modalexternal-close" href="">遷移しない</a>
    </div>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>
$(function(){
    $('.modalexternal-open').on('click',function(){
        var index = $('.modalexternal-open').index(this);
        var elements = document.querySelectorAll('.modalexternal-open');
        var elementsArray = Array.from(elements);
        var target = document.getElementById('modalexternal__link')
        target.href = elementsArray[index].getAttribute('href');

        $('.modalexternal').fadeIn();
        return false;
    });
    $('.modalexternal-close').on('click',function(){
        $('.modalexternal').fadeOut();
        return false;
    });
});
</script>

.modal{
    width:100%;
    height: 100vh;
    background: rgba(0,0,0,0.8);
    position:fixed;
    top: 0;
}
.modal_bg{
    background: rgba(0,0,0,0.8);
    height: 100vh;
    position: absolute;
    width: 100%;
}
.modal_area{
    background: #fff;
    left: 50%;
    padding: 40px;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 60%;
}
.modal_area p{
    padding:15px;
}
.modal_area button{
    display:block;
    color: #8586AE;
}
.modal_area button:hover{
    opacity: 0.6;
}

参考URL
JavaScriptでURLのパラメータやアンカーを判断して処理を変更する方法 ｜ Tips Note by TAM
JavaScriptでモーダル（ポップアップ）を表示させる方法 | Tech dig
これなら簡単！JavaScriptでポップアップ表示・入力する方法を解説 | 侍エンジニア塾ブログ（Samurai Blog） - プログラミング入門者向けサイト