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

1 Answer 1

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