Search code examples
jquerytwitter-bootstraptwitter-bootstrap-3

Bootstrap body auto padding remove after open modal

After open bootstrap modal a auto padding-right : 19px adding in body tag. I want to remove this auto padding. I have tried bellow code for modal and remove body auto padding.

<div class="media" data-toggle="modal" data-target="#kolpochitro"> 
             --------
</div>

Then I have written 

<div class="modal fade" id="kolpochitro" role="dialog">
    <div class="modal-dialog modal-sm" >

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
              -------
        </div>
        <div class="modal-body">
              ------
        </div>
      </div>

    </div>
  </div>

After open modal my body tag looking at firebug 

<body class="cbp-spmenu-push modal-open" style="padding-right: 19px;">

for remove this style I am trying bellow code 

$('document').ready(function(){
            $('.media').click(function(){
                $("body").removeAttr("style");
            })
})

But it's not working.

Solution

  • Use shown function for updating it: 

    $('#modal-content').on('shown.bs.modal', function() {
       $("body.modal-open").removeAttr("style");
 });

    Or For Previous version Bootstrap :

    $('#modal-content').on('shown', function() {
        $("body.modal-open").removeAttr("style");
})

    For more information check this link