Alimon Karim Alimon Karim - 1 month ago 6
jQuery Question

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.

Answer

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