This example includes additional page content so you can scroll before opening the dialog.
Scroll down to the trigger, open the dialog, and verify that background scrolling is locked while the modal is active.
Some text before.
Some text after.
Additional content below the trigger makes it easier to confirm that the page remains in place while the dialog is open.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere, orci nec tincidunt dapibus, neque felis feugiat sapien, vitae volutpat nibh lorem sed sem.
Curabitur euismod, erat nec tincidunt tincidunt, enim risus pretium nulla, at varius velit tellus vel neque. Donec tempor feugiat sem, ut suscipit nibh lacinia vitae.
Sed sit amet magna id sem fermentum suscipit. Nullam feugiat, urna quis finibus vulputate, dui purus pretium est, vitae luctus magna velit at lorem.
Vivamus luctus mauris ut libero tincidunt, at porttitor lectus porttitor. Aliquam erat volutpat. Suspendisse potenti.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum volutpat nisl ac neque posuere, vitae placerat justo dictum.
Integer convallis risus et purus gravida, at lacinia leo volutpat. Cras non nisl eu justo condimentum pretium.