在引导模式打开时调用函数

Posted 2023-02-22

【中文标题】在引导模式打开时调用函数

【英文标题】：Calling a function on Bootstrap modal open

【发布时间】：2013-07-01 22:49:46

【问题描述】：

我曾经使用 JQuery UI 的对话框，它有 open 选项，您可以在其中指定一些 javascript 代码在对话框打开后执行。我会使用该选项使用我拥有的功能选择对话框中的文本。

现在我想使用引导程序的模式来做到这一点。下面是 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!");
);

【问题讨论】：

shown.bs.modal 事件在 HTML 文档至少包含 <div class="modal fade"><div class="modal-dialog"></div></div> 结构时发生。

复制***.com/questions/12190119/bootstrap-modal-show-event

欢迎评论@Chemical Programmer，它应该与答案一起出现

【参考方案1】：

您可以根据需要使用shown event/show 事件：

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

演示：Plunker

Bootstrap 3.0 更新

对于 Bootstrap 3.0，您仍然可以使用显示的事件，但您可以像这样使用它：

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

See the Bootstrap 3.0 docs here 在“事件”下。

【讨论】：

在 bootstrap 3.0 中使用 $("#code").on("shown.bs.modal", function(e) )。

确保考虑到化学程序员所说的需要 结构至少要调用此代码

#code 指的是 jQuery 选择器，它是 jQuery 的基本成分之一：w3schools.com/jquery/jquery_selectors.asp

@Xatenev show 是活动的开始，shown 是活动的结束。这在 Bootstrap 3 和 4 中是一致的

至少显示的.bs.modal 在模态显示之前实际执行。就我而言，这不是问题，但可能很高兴知道。

【参考方案2】：

行不通.. 改用$(window)

展示

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

隐藏

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

【讨论】：

$( "#modal" ).on('shown', function() alert("我希望它在模式打开后出现！"); 不适合我，但$(window) 工作了！！谢谢@viper_tkd

我需要绑定到打开/关闭的 ANY 模式，而不是通过特定的选择器。在那种情况下，这个答案对我很有效。

这在模式完全加载到 GUI 之前有效。我想在模态加载后从我的模态中获取数据 - 此方法为所有内容返回“未定义”，因为模态 GUI 尚不存在，因此字段和其他所有内容尚不可查询。 （不可见）

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

感谢您提供正确的事件名称，但无需替换 $(window) 的元素 ID。在 jquery 3.4 中使用 bs4。

【参考方案3】：

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

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

【参考方案4】：

引导模式公开事件。像这样监听shown 事件

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

【参考方案5】：

如果有人仍然有问题，那么使用 (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
        );
);