4

我在理解 Bootstraps Modal Callbacks时遇到问题。

以下代码的“ .on('show',function(){}) ”部分未触发。不知道为什么。请指教。此外，欢迎任何/所有代码优化提示。

的HTML

<p><a class="bsModal" href="#" title="Bootstrap Modal">testing modal</a></p>

jQuery

    // Dynamically calling Bootstrap Modal
$('.bsModal').click(function(){


    var bsModalWindow = '<div class="modal" id="myModal">';
        bsModalWindow +=    '<div class="modal-header">';
        bsModalWindow +=        '<button type="button" class="close" data-dismiss="modal">×</button>';
        bsModalWindow +=            '<h3>Modal header</h3>';
        bsModalWindow +=    '</div>';
        bsModalWindow +=    '<div class="modal-body">';
        bsModalWindow +=        '<p>This is an example of the Bootstrap jQuery Plugin: Modal.</p>';
        bsModalWindow +=    '</div>';
        bsModalWindow +=    '<div class="modal-footer">';
        bsModalWindow +=        '<a href="#" class="btn" data-dismiss="modal">Close</a>';
        bsModalWindow +=        '<a href="#" class="btn btn-primary">Save changes</a>';
        bsModalWindow +=    '</div>';
        bsModalWindow += '</div>';

        $(bsModalWindow).modal()
            .on('show', function() {
                console.log('Modal will be shown');
            })
            .on('shown', function() {
                console.log('Modal was shown');
            })
            .on('hide', function() {
                console.log('Modal will be hidden');
            })
            .on('hidden', function() {
                console.log('Modal is hidden');
            })
            .show({
                backdrop: true,
                keyboard:true
            });                 

});
4

1 回答 1

9

这是您显示动态引导模型并调用其回调函数的解决方案。

HTML：

<div id="panel">
  <div class="divbutton">
    <a href="#myModal" class="btn btn-primary btn-large bsModal">
      Launch Demo Modal 
    </a>
  </div>
</div>

jQuery：

$(function() {
    var bsModalWindow = '<div class="modal hidden fade" id="myModal">';
    bsModalWindow += '<div class="modal-header">';
    bsModalWindow += '<button type="button" class="close" data-dismiss="modal">�&lt;/button>';
    bsModalWindow += '<h3>Modal header</h3>';
    bsModalWindow += '</div>';
    bsModalWindow += '<div class="modal-body">';
    bsModalWindow += '<p>This is an example of the Bootstrap jQuery Plugin: Modal.</p>';
    bsModalWindow += '</div>';
    bsModalWindow += '<div class="modal-footer">';
    bsModalWindow += '<a href="#" class="btn" data-dismiss="modal">Close</a>';
    bsModalWindow += '<a href="#" class="btn btn-primary">Save changes</a>';
    bsModalWindow += '</div>';
    bsModalWindow += '</div>';

    //Append Model Div before button div on html page
    $(".divbutton").before(bsModalWindow); 

    $(".bsModal").click(function() {
        //Bind Callback functions with model events 
        $("#myModal").on('show', function() {
            //Change Top position of modal on show call back
            $("#myModal").css('top', '100%');
            console.log('Modal will be shown');
        }).on('shown', function() {
            console.log('Modal was shown');
        }).on('hide', function() {
            console.log('Modal will be hidden');
        }).on('hidden', function() {
            console.log('Modal is hidden');
        }).show({
            backdrop: true,
            keyboard: true
        });
        //Show Modal
        $("#myModal").modal('show');
    });
});

我在http://codebins.com/bin/4ldqpa7上做了垃圾箱

于 2012-07-19T11:49:23.460 回答