引导程序模态打开时调用函数

2020/10/20 22:01 · javascript ·  · 0评论

我曾经使用过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!");
});

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

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

演示:柱塞

Bootstrap 3.0的更新

对于Bootstrap 3.0,您仍然可以使用显示的事件,但是您可以这样使用它:

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

请参阅“事件”下的Bootstrap 3.0文档

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

用于显示

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

对于隐藏

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

您可以使用show代替shown使函数在模式打开之前加载,而不是在模式打开之后加载。

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

Bootstrap模态公开事件。听这样的shown事件

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

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

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

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

如果要隐藏模型,则可以使用以下代码。

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

我希望这个答案对您的项目有用。

本文地址:http://javascript.askforanswer.com/yindaochengxumotaidakaishidiaoyonghanshu.html
文章标签: ,   ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!