How do you think about respective callback for bootstrap modal triggers?

问题

On bootstrap modals, we know that we can bind events for triggers like show or hide using show, shown, hide, hidden, but this event binding only works for general case. What I want is 'specific case' such as:

$("#myModal").modal("show", function(e){
    alert("This pops-up after #myModal is shown properly.");
});

or maybe using dictionaries for more options.

Anyway, I want to call some functions as callback after these modal triggers are done.

I do know that there can be alternative implementations, like using setTimeout to wait until the modal is completely shown or hidden, or just unbind the event inside the callback function so the event handler works only for once. Either way, it's not very convenient and ugly.

Can this feature be feasible feature request for bootstrap?

Also, I'm not very satisfied that to change modal's property after its init, I have to change it by directly managing $("#myModal").data("bs.modal").options.

Again, I'm asking about particular situation. I don't want to make callback function called for every show, shown, hide or what ever. Just for specific situation where the modal is triggered manually via javascript.

Here is an example: Let's say that there are #myModal, and #btn-a, #btn-b.

$(document).ready(function(){
    $("#myModal").on("shown.bs.modal", function(e){
        console.log("myModal shown.");
    })
    $("#btn-a").click(function(e){
        $("#myModal").modal("show");
    });
    $("#btn-b").click(function(e){
        // There is no such thing like below. It's just pseudo code.
        $("#myModal").modal("show", function(e2){
            console("myModal shown by b.");
        });
    });
}

Then if #btn-a is clicked,

myModal shown.

will appear while if #btn-a is clicked,

myModal shown.
myModal shown by b.

will appear.

Again and again, I'm actually not asking how to make it. I already made what I want. What I'm asking is, will this feature be feasible feature request for bootstrap.

回答1:

Check out the section titled Events here:

http://getbootstrap.com/javascript/#modals

Hopefully, it will give you all the information you need

回答2:

You can use shown events to detect when the modal has been made visible on the screen:

$('#myModal').on('shown.bs.modal', function (e) {
    alert("This pops-up after #myModal is shown properly.");
})

You can check for more information in the events section of modal here.

来源：https://stackoverflow.com/questions/21108990/how-do-you-think-about-respective-callback-for-bootstrap-modal-triggers

标签

javascript

jquery

twitter-bootstrap

event-handling

modal-dialog