通过单击链接通过 JavaScript 打开 Bootstrap 4 Modal

Posted 2023-02-22

【中文标题】通过单击链接通过 JavaScript 打开 Bootstrap 4 Modal

【英文标题】：Open Bootstrap 4 Modal via JavaScript by clicking a link

【发布时间】：2018-10-17 01:01:46

【问题描述】：

我想在单击链接时打开一个模式。 不幸的是，我无法更改链接的 html。我只能更改href的内容。

像这样：

<a href="#Modal">Open modal</a>

我无法添加数据属性或任何其他 HTML。

在文档中，我找到了一种通过 javascript 打开模式的方法。我将此代码添加到我的网站：

$('#Modal').modal();

它可以工作，但模式会在页面加载后立即打开。 我需要在点击链接后打开它。

有没有办法做到这一点？

这是我的模态：

<div class="modal" id="Modal" tabindex="-1" role="dialog" aria-labelledby="ModalTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <p class="h5 modal-title" id="ModalTitle">Modal Title</p>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            </div>
            <div class="modal-body">
                Content
            </div>
        </div>
    </div>
</div>

【问题讨论】：

$('#Modal') 指代带有id="Modal" 的元素。

好的，我可以添加id="Modal"，但这无济于事:-(

克雷你试过这个吗？ ***.com/questions/11404711/…

@TAHASULTANTEMURII 已经尝试过了，但它不起作用

@Cray 你能添加你的html和js吗？

【参考方案1】：

点击链接后需要打开它。

所以你需要检查链接是否被点击。

jQuery 提供了许多选择元素的方法。 http://api.jquery.com/category/selectors/

$('a[href$="#Modal"]').on( "click", function() 
   $('#Modal').modal();
);`

【讨论】：

我看到你已经得到了正确的答案，但我只是想确定一下。 jsfiddle.net/Ldnzn5bn 是一个工作示例。

【参考方案2】：

试试这个

<!-- Trigger the modal with a button -->
<a href="#" class="btn btn-info btn-lg">Open Modal</a>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

<!-- Modal content-->
<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h4 class="modal-title">Modal Header</h4>
  </div>
  <div class="modal-body">
    <p>Some text in the modal.</p>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  </div>
</div>

  </div>
</div>


$('a').on( "click", function() 
   $('#myModal').modal('show');
);

【讨论】：

正如我在问题中所写，我无法使用按钮或更改链接标签的 html

【参考方案3】：

在a[href$="#Modal"] 上触发点击事件。

$('a[href$="#Modal"]').on( "click", function() 
   $('#Modal').modal('show');
);

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<!-- Trigger the modal with a button -->
<a href="#Modal" class="btn btn-info btn-lg">Open modal</a>
<!-- Modal -->
<div id="Modal" class="modal fade" role="dialog">
  <div class="modal-dialog">

<!-- Modal content-->
<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h4 class="modal-title">Modal Header</h4>
  </div>
  <div class="modal-body">
    <p>Some text in the modal.</p>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  </div>
</div>

  </div>
</div>

EIDT：将 myModal 更改为 Modal

【讨论】：

就是这样！但我不得不将 myModal 更改为 Modal