Prevent scrolling of the page when modals are displayed (#5816)

* prevent scroll-chaining in modals

* make body overflow hidden to prevent background scrolling

core/modules/utils/dom/modal.js

@@ -243,6 +243,7 @@ Modal.prototype.adjustPageClass = function() {
 	if(windowContainer) {
 		$tw.utils.toggleClass(windowContainer,"tc-modal-displayed",this.modalCount > 0);
 	}
+	$tw.utils.toggleClass(this.srcDocument.body,"tc-modal-prevent-scroll",this.modalCount > 0);
 };
 
 exports.Modal = Modal;

editions/tw5.com/tiddlers/demonstrations/SampleWizard.tid

@@ -1,6 +1,6 @@
 created: 20140912145537860
 footer: <$button message="tm-close-tiddler">Close</$button>
-modified: 20140912145537861
+modified: 20210627054504823
 subtitle: I'm a modal wizard
 title: SampleWizard
 type: text/vnd.tiddlywiki

themes/tiddlywiki/vanilla/base.tid

@@ -1942,6 +1942,9 @@ html body.tc-body.tc-single-tiddler-window {
 	border-top: 1px solid <<colour modal-footer-border>>;
 }
 
+.tc-modal-prevent-scroll {
+	overflow: hidden;
+}
 
 /*
 ** Centered modals