0

I am using Bootstrap 4 on my website. The webpage contains articles consisting of text and an image.

Page View

When you click on the image an enlarge image pop up in a modal like this.

enter image description here

But the problem is on modal opening the page scrolls to the top of the page. Is there any method I can prevent automatic scrolling of my page on modal opening.

Samuel Liew
  • 76,741
  • 107
  • 159
  • 260
Mohd Faisal
  • 1
  • 3

2 Answers2

1

You can do it by applying CSS when you fire event of open your image i.e. Just Apply Overflow:hidden to your body as shown bellow

Try this

Script

$("#YourModalID").on("show", function () {
  $("body").addClass("modal-open");
}).on("hidden", function () {
  $("body").removeClass("modal-open")
});

CSS

body.modal-open {
    overflow: hidden;
}

Refer same quetion on Prevent BODY from scrolling which explains above better

Som
  • 598
  • 3
  • 12
1

kindly check positions of your bootsrap4 modal in css.. Bootsrap4 explained clearly in bootsrap4 modal documentation

Additionally, you can refer this simple example to understand the behavior of images modal popup

Asmi
  • 651
  • 1
  • 8
  • 16