modal multiple > Bootstrap/JS/PHP

Question

I used this link as a reference for creating my Modal: Open Multiple Bootstrap Modals.

After opening a modal and clicking outside the modal box, when we return to page, an automatic style of padding-right is opened:17px, and at each open modal it value is added with more 17px, result, the page will shrink to left on account of the padding.

I used F12 to check what is happening, 1st print taken at index, without opening modal:

2nd print taken with open modal:

I scanned behind some padding-right both in index, and in singles that is where the data for modal comes from, no padding was found.

{var a=parseInt(this.$body.css("padding-right")||0,10);this.originalBodyPad=document.body.style.paddingRight||"",this.bodyIsOverflowing&&this.$body.css("padding-right",a+this.scrollbarWidth)},c.prototype.resetScrollbar=function(){this.$body.css("padding-right",this.originalBodyPad)}

As you can see in the print, the {} element is stating that it comes from the inline, which would be this?

Detail: If I click on a link inside the Modal, it does not create padding. Padding occurs only when I click outside the modal and it closes it.

Answer 1

I don’t know if it would be the best solution for your case, but you could add this attribute to your modal:

data-backdrop="static"

It disables modal close when it is clicked outside your area.