CODEWITHSUNDEEP
jquerytwitter-bootstraptriggersmodal-dialog
Jony-Y
Jony-Y

Reputation: 1579

Bootstrap fade class blocking hidden.bs.modal event bootstrap 3.0.21

I'm using Bootstrap and I'm facing an issue when I trying to fire an event on closing my modal, if I have the fade class in the modal the event doesn't get fired, but if I remove it everything works fine.

I want the animation and I want the trigger and I don't want to use any workaround such as create my own fade class or manually trigger hide events.... I want to use bootstraps classes and events.

<div class="modal fade" tabindex="-1" id ="alertModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4> bli</h4>
        </div>
        <div class="modal-body">
            <h2 >blabla</h2>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-primary" data-dismiss="modal"> bla</button>
        </div>
    </div>
</div>
</div>

    postRender: function() {
                    $('#alertModal').on('hidden.bs.modal', function() {
                        alert("test");
                    });
                    this.startModal();
                },
                startModal: function() {
                    this.$el.modal({
                        keyboard: false
                    });
                }
...

Again, if I remove the fade class, it all works perfectly.

Update

solved...see answer.

Upvotes: 2

Views: 1978

Answers (1)

Jony-Y
Jony-Y

Reputation: 1579

SOLVED

Solved it by just setting the trigger when the Modal is defined.

postRender: function() {
            this.startModal();
        },
        startModal: function() {
            this.$el.modal({
                keyboard: false
            }).on('hidden.bs.modal', function() {
                alert("test");
            });
        },

apparently the if you try to set a trigger to the event after the modal is created the trigger gets blocked by the fade class. but like this it works. still not 100% sure why

but works and tested.

Upvotes: 2

Related Questions