CODEWITHSUNDEEP
twitter-bootstrap
jsduniya
jsduniya

Reputation: 2474

Bootstrap 3 modal does not close on outside click

I have created a modal using call,

 $('#myModalContent').modal('show');

html is:

<div class=" modal fade" id="myModalContent" 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" data-dismiss="modal" aria-hidden="true">&times;</button>
            </div>
            <div class="modal-body">


            </div>

        </div>
    </div>
</div>

Problem is when i click outside the modal popup, its doesn't close. (its closes on esc)

Upvotes: 10

Views: 24053

Answers (5)

vijay
vijay

Reputation: 107

Just add data-backdrop="static" and data-keyboard="false" attributes to that modal (ie where you have class='modal')

data-backdrop="true" is the default behaviour that allows for background click dismissal and data-backdrop="static" is the behaviour that your explaining, no dismissal, so probably you have set it somewhere to "static".

data-keyboard="false" is for not allowing ESC

Upvotes: 4

jsduniya
jsduniya

Reputation: 2474

I have written custom code to solve this.

   $("body").on("click", ".modal-dialog", function(e) {
        if ($(e.target).hasClass('modal-dialog')) {
            var hidePopup = $(e.target.parentElement).attr('id');
            $('#' + hidePopup).modal('hide');
        }
    });

Upvotes: 9

Ambala Chandrashekar
Ambala Chandrashekar

Reputation: 532

//remove modal class from modal start div and

$('#MyModal').modal({ backdrop: false });
$('body').removeClass("modal-open");

Upvotes: 0

Vivekh
Vivekh

Reputation: 4259

 It should work if you are using bootstrap 3 

<div class="modal fade bs-example-modal-sm" id="modalExample" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
        <div class="modal-header">
            <button aria-hidden="true" data-dismiss="modal" class="close" type="button">&times;</button>
            <h4 class="modal-title">Small Modal</h4>
        </div>
        <div class="modal-body">...</div>
    </div>
  </div>
</div>

and call it as call it as : $('#modalExample').modal();

Upvotes: -1

Vishal Kumar Verma
Vishal Kumar Verma

Reputation: 312

You can pass options to the modal as :

$('#myModal').modal({
    show:true,
    backdrop:true,
    keyboard:true
})

Upvotes: 2

Related Questions