打开Bootstrap模态框时调用函数

Question

我以前使用jQuery UI的对话框，它有open选项，您可以在对话框打开后指定一些JavaScript代码进行执行。我将使用该选项来调用我的一个函数，以便在对话框中选择文本。

现在我想使用Bootstrap的模态框来实现同样的功能。下面是HTML代码：

<div id="code" class="modal hide fade">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3>Modal header</h3>
    </div>
    <div class="modal-body">
        <pre>
print 'Hello World'

至于打开模态框的按钮：

 <a href="#code" data-toggle="modal" class="btn code-dialog">Display code</a>

我尝试使用按钮的onclick监听器，但是警告消息在模态窗口出现之前就被显示了：

$( ".code-dialog" ).click(function(){
    alert("I want this to appear after the modal has opened!");
});

- Mohamed Khamis

---

当HTML文档中至少包含<div class="modal fade"><div class="modal-dialog"></div></div>结构时，就会触发shown.bs.modal事件。 - Chemical Programmer

复制链接：https://dev59.com/ZGct5IYBdhLWcg3wULvo - gtzinos

问候评论 @化学程序员，它应该出现在答案中。 - Tariq

Answer 1

您可以根据需要使用"shown event"/"show event"，具体请参考https://getbootstrap.com/2.3.2/javascript.html#modals。

$( "#code" ).on('shown', function(){
    alert("I want this to appear after the modal has opened!");
});

演示： Plunker

Bootstrap 3和4的更新

对于Bootstrap 3.0和4.0，您仍然可以使用“shown”事件，但是您需要像这样使用它：

$('#code').on('shown.bs.modal', function (e) {
  // do something...
})

在“事件”下方查看Bootstrap 3.0文档。

- Arun P Johny

---

在 Bootstrap 3.0 中，使用 $("#code").on("shown.bs.modal", function(e) {})。该代码用于模态框显示后执行的操作。 - teewuane

#code 指的是 jQuery 选择器之一，它是 jQuery 的基本组成部分之一：https://www.w3schools.com/jquery/jquery_selectors.asp - DdW

我使用 $(document).on("shown.bs.modal", ... 进行整体监听。 - vladkras

@Xatenev show在事件开始时使用，shown则在结束时使用。这在Bootstrap 3和4中保持一致。 - cameronjonesweb

至少 shown.bs.modal 事件在模态框显示之前就会执行。在我的情况下这不是问题，但了解这一点可能会很有用。 - Jonny

Answer 2

不起作用，请改用$(window)

用于显示

$(window).on('shown.bs.modal', function() { 
    $('#code').modal('show');
    alert('shown');
});

隐藏

$(window).on('hidden.bs.modal', function() { 
    $('#code').modal('hide');
    alert('hidden');
});

- viper_tkd

---

$( "#modal" ).on('shown', function(){ alert("我希望这个在模态框打开后出现！");} 对我来说不起作用，但 $(window) 起作用了！！感谢 @viper_tkd。 - Krutal Modi

我需要绑定到任何打开/关闭的模态框，而不是特定的选择器。这个答案在那种情况下对我很有效。 - jyoseph

这段代码在模态框完全加载到GUI之前就可以运行。我想在模态框加载后从中获取数据 - 这种方法对所有内容都返回“未定义”，因为模态框GUI尚不存在，所以字段和其他所有内容都无法查询（不可见）。 - FrenkyB

这对我有用，但我在处理程序中添加了一个检查来针对一个特定的模态框： if($('#code').is(e.relatedTarget)) { ... } 因为我的页面上有多个模态框。 - allicarn

感谢提供正确的事件名称，但是不需要替换$(window)的元素ID。使用jQuery 3.4和bs4。 - Jcc.Sanabria

如果要在我的 Bootstrap 版本中获取特定的模态框，更新后的代码将是： if (shownEvent.target.id == 'uploadTemplateModal'){ } - Mahmoud Magdy

Answer 3

您可以使用show而不是shown，使函数在打开模态框之前加载，而不是在打开模态框之后加载。

$('#code').on('show.bs.modal', function (e) {
  // do something...
})

- Atchyut Nagabhairava

Answer 4

Bootstrap模态框暴露事件。像这样监听shown事件：

$('#my-modal').on('shown', function(){
  // code here
});

- Josnidhin

---

如果使用Bootstrap > 3，请将 shown 替换为 shown.bs.modal。 - David Kariuki

Answer 5

这是我用来针对特定模态框的有效方法。

$('#code').on('shown.bs.modal', function(){
  // code here
  alert('shown13');
});

- Mahmoud Magdy

Answer 6

如果有人仍然遇到问题，对我来说唯一完美运作的方法是使用 (loaded.bs.modal)：

 $('#editModal').on('loaded.bs.modal', function () {
       console.log('edit modal loaded');

       $('.datepicker').datepicker({
            dateFormat: 'yy-mm-dd',
            clearBtn: true,
            rtl: false,
            todayHighlight: true,
            toggleActive: true,
            changeYear: true,
            changeMonth: true
        });
});

- Erose

Answer 7

使用Bootstrap 5

您可以以编程方式打开模态框，然后简单地调用您的方法，如下所示：

const modal = new bootstrap.Modal('#myModal')
modal.show()
alert('modal is showing')

- Jakob

---

在这里，你可以手动触发模态框并触发另一个手动警告。原始问题是想要在程序中显示模态框时触发一个事件。Bootstrap 5需要使用shown事件来绑定模态框。myModalEl.addEventListener('shown.bs.modal', event => {})https://getbootstrap.com/docs/5.2/components/modal/ - WiseGuy

@WiseGuy 谢谢你的回复。你说得对，但至少对我来说效果是一样的，所以我保留它，这可能也会对其他人有帮助。 - Jakob