首页 文章

在bootstrap模式上调用函数打开

提问于
浏览 次
142

我曾经使用过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!");
});
javascript jquery jquery-ui twitter-bootstrap modal-dialog

6 回答

  • 7

    您可以根据需要使用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在"Events"下 .

    回复于
  • 66

    将无法正常工作..请改用 $(window)

    // FOR SHOWING

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

    //为了隐藏

    $(window).on('hidden.bs.modal', function() { 
    $('#code').modal('hide');
    alert('hidden');
});
    回复于
  • 8

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

    $('#code').on('show.bs.modal', function (e) {
  // do something...
})
    回复于
  • 266

    Bootstrap模式公开事件 . 像这样听 shown 事件

    $('#my-modal').on('shown', function(){
  // code here
});
    回复于
  • -2

    如果有人仍然有问题，唯一可以通过使用（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
        });
});
    回复于
  • 0

    您可以使用belw代码显示和隐藏引导程序模型 .

    $('#my-model').on('shown.bs.modal', function (e) {
  // do something here...
})

    如果你想隐藏模型，那么你可以使用下面的代码 .

    $('#my-model').on('hidden.bs.modal', function() {
    // do something here...
});

    我希望这个答案对你的项目有用 .

    回复于

相关问题