点击链接后，我能否关闭Bootstrap模态框？

Question

现在，我正在使用Bootstrap模态框将其重定向到一个站点：

<a href="http://www.example.com/" href="_blank">click</a>

我希望链接点击后模态框关闭，因此我认为将 data-dismiss="modal" 添加到标签中会起作用，但它会导致模态框在打开链接之前关闭。

我能否将它们结合起来，在 URL 打开后再关闭模态框？

- user1814016

Answer 1

这对我有效，并且不需要额外的脚本标签：

<a href="http://www.example.com/" onclick="$('#myModal').modal('hide')">click</a>

- Skylar Ittner

---

这在Bootstrap 5.0版本中无法正常工作。 - M.Amin Alizadeh

在 Bootstrap 5.0 版本中，这个无法正常工作。 - M.Amin Alizadeh

Answer 2

在Bootstrap 4中：

<a href="http://www.example.com/" data-dismiss="modal" target="_blank">click</a>

- Mwspace LLC

---

链接无效。它只是关闭了模态框。 - VladimirAus

Answer 3

在锚点标签中添加一个id。然后，一旦单击该id，您就可以关闭模态框。

<a href="http://www.example.com/" href="_blank" id="sample">click</a>

<script>        
    $("a#sample").click(function(){
    $('#myModal').modal('hide')
    });
</script>

- ilmk

Answer 4

这对我很有帮助。 <a onclick="location.href='http://www.example.com/';" data-dismiss="modal">点击</a>

- user11580136

Answer 5

类似以下内容应该可以胜任

$('a').click(function(){
  $('modal-selector').modal('hide')
})

- Yohn

Answer 6

您可以在元素中使用已经存在的类：

class="modal-close"

- Ahmed

---

在Bootstrap4中对我没用。 - VladimirAus

Answer 7

我将这段代码添加到整个项目中。

$(document).on('click', '.modal-hide-continue', function (e){
    $(this).closest('.modal').modal('hide');
});

它会自动在模态框内任何类名为modal-hide-continue的元素上起作用。

- Narek