在Bootstrap模式打开时调用函数

我曾经使用jQuery UI的对话框，它有开放选项，在那里你可以指定一些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!");
});

你可以根据需要使用显示事件/显示事件:

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

演示:一美元

更新引导3和4

对于Bootstrap 3.0和4.0，你仍然可以使用显示的事件，但你会这样使用它:

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

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

2013-07-04 04:06:25

引导模态暴露事件。像这样听所显示的事件

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

2013-07-04 04:07:55

不管用…请改用$(window)

显示

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

为隐藏

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

2014-04-28 15:18:24

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

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

2016-11-17 11:52:52

如果有人仍然有一个问题，唯一的工作完美为我使用(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
        });
});

2018-11-12 11:03:43

这与我的目标特定的模式

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

2023-01-19 10:52:10

在Bootstrap模式打开时调用函数

推荐文章

最新文章

标签