javascript - Bootstrap modal close event - Stack Overflow

admin管理员组

文章数量:1387313

I have bootstrap modal which looks something like this ;

Following is the code for it

<!-- Buy Send Offer Success -->
<div class="modal fade custom-modal" id="make-offer-success" tabindex="-1" 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" onclick="javascript:add_request()"><span aria-hidden="true"><i class="fa fa-close"></i></span></button>
            <h4 class="modal-title" id="myModalLabel"><?php echo $data['item']['brand'].' '.$data['item']['model'];?></h4>
        </div>
        <div class="modal-body">
            <div class="send-success"><i class="fa fa-check"></i> Your offer has been successfully sent</div>
        </div>
        <div class="modal-footer">
            <div class="col-md-6 btn-mrgn">
                <input type="hidden" id="item_unique_id" value="<?php echo $data['item']['item_unique_id']; ?>">
                <input type="hidden" id="buyer_id" value="<?php echo $this->session->userdata['id'] ?>">
                <button type="submit" class="btn gray-btn btn-mon upercase" onclick="javascript:add_request()">Close</button>
            </div>
        </div>
    </div>
</div>

I am calling a java script function on close button and on "x" button on the modal. My problem is when user clicks anywhere on the screen Modal disappears, my function is not called and the screen stays faded.

Can anyone help to fix this problem?. How can i call my javascript function when user clicks anywhere on screen other than modal close buttons.

I have bootstrap modal which looks something like this ;

Following is the code for it

<!-- Buy Send Offer Success -->
<div class="modal fade custom-modal" id="make-offer-success" tabindex="-1" 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" onclick="javascript:add_request()"><span aria-hidden="true"><i class="fa fa-close"></i></span></button>
            <h4 class="modal-title" id="myModalLabel"><?php echo $data['item']['brand'].' '.$data['item']['model'];?></h4>
        </div>
        <div class="modal-body">
            <div class="send-success"><i class="fa fa-check"></i> Your offer has been successfully sent</div>
        </div>
        <div class="modal-footer">
            <div class="col-md-6 btn-mrgn">
                <input type="hidden" id="item_unique_id" value="<?php echo $data['item']['item_unique_id']; ?>">
                <input type="hidden" id="buyer_id" value="<?php echo $this->session->userdata['id'] ?>">
                <button type="submit" class="btn gray-btn btn-mon upercase" onclick="javascript:add_request()">Close</button>
            </div>
        </div>
    </div>
</div>

I am calling a java script function on close button and on "x" button on the modal. My problem is when user clicks anywhere on the screen Modal disappears, my function is not called and the screen stays faded.

Can anyone help to fix this problem?. How can i call my javascript function when user clicks anywhere on screen other than modal close buttons.

• javascript
• jquery
• twitter-bootstrap

Share Improve this question Follow asked Jul 7, 2015 at 11:51 Mudassar KhaniMudassar Khani 1,47922 gold badges2222 silver badges3939 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

Instead using the hide event handler, which will be called however the modal was closed(assuming you are using modal method to hide the modal)

$('#make-offer-success').on('hide.bs.modal', function(){
    //do your stuff
})

Demo: Fiddle

本文标签： javascriptBootstrap modal close eventStack Overflow