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 the modal('hide') Method You can simply use the modal('hide') method to hide or close the modal window in Bootstrap using jQuery. Other related Bootstrap's modal methods are modal('show') and modal('toggle') .
You can prevent closing of modal dialog by setting the beforeClose event argument cancel value to true. In the following sample, the dialog is closed when you enter the username value with minimum 4 characters. Otherwise, it will not be closed.
The .modal-header class is used to define the style for the header of the modal. The <button> inside the header has a data-dismiss="modal" attribute which closes the modal if you click on it.
I had the same problem. Removing the inline style with Javascript as in the accepted answer will remove the padding but not until the modal is completely shown so it still results in kind of an erratic behavior. In the end I removed the padding with CSS, which will make sure there page content doesn't move and there is no padding at all times.
body.modal-open {
padding-right: 0 !important;
}
Hope this will help anyone with the same question.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With