リンクボタンを押してウィンドウを開き、モーダルを閉じる

Question

下記のようにリンク集ボタンがあり、
ボタンを押下するとモーダルが開きます。
各サイトのボタンを押下するとリンク先ページを別ウィンドウで開きつつ、
モーダルは閉じたいのですが、どのようにすればよろしいでしょうか。

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal1">
 リンク集を見る
</button>


<div class="modal" id="modal1" tabindex="-1"
      role="dialog" aria-labelledby="label1" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="label1">リンク集</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
       <a href="https://www.google.co.jp/" data-dismiss="modal" target="_blank">Google</a>
        <a href="https://www.yahoo.co.jp/" data-dismiss="modal" target="_blank">yahoo</a>
        <a href="https://zozo.jp/" data-dismiss="modal" target="_blank">zozo</a>
        <a href="https://www.rakuten.co.jp/" data-dismiss="modal" target="_blank">rakuten</a>
        <a href="https://www.amazon.co.jp/" data-dismiss="modal" target="_blank">amazon</a>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">閉じる</button>
      </div>
    </div>
  </div>
</div>





<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

a{
  background:#178308;
  color:#fff;
  padding:10px;
  text-decoration:none;
}

Answer 1

data-dismiss は外したうえで

$(document).on('click', '.modal a[target]', function(event) {
  $(this).closest('.modal').modal('hide');
});

https://getbootstrap.com/docs/4.2/components/modal/#modalhide

Comments

[up24]

bootstrapの技術で可能なのですね。確かにそうでした。ありがとうございます。

Answer 2

パッと思いついたのはaタグにあらかじめモーダルを閉じるように設定してaの機能を無効化してクリックされた要素のhref属性を取得してJsでジャンプかな？

<a href=https://google.co.jp id=a1>aiueo</a>

a {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: yellow
}

document.getElementById('a1').onclick = function(){
  document.getElementById('a1').style.width = '300px';
  window.open(document.getElementById('a1').getAttribute('href'));
  return false;
}

Comments

[kyoya0819]

https://codepen.io/asuchi0819/pen/wvvQwqE
サンプル

[up24]

こちら非常に勉強になりました。
ありがとうございます。