diff --git a/examples/dialog-modal/css/dialog.css b/examples/dialog-modal/css/dialog.css
index d5be27a5c6..616ec5b3bb 100644
--- a/examples/dialog-modal/css/dialog.css
+++ b/examples/dialog-modal/css/dialog.css
@@ -23,6 +23,10 @@ body:not(.toc-inline) {
   padding: 1.6em 0 2em;
 }
 
+.dialog-active #base_window_layer {
+  user-select: none;
+}
+
 #base_window_layer main, #base_window_layer nav {
   max-width: 50em;
   margin: auto;
diff --git a/examples/dialog-modal/js/dialog.js b/examples/dialog-modal/js/dialog.js
index 56f3770480..7766e79cd1 100644
--- a/examples/dialog-modal/js/dialog.js
+++ b/examples/dialog-modal/js/dialog.js
@@ -131,6 +131,8 @@ aria.Utils = aria.Utils || {};
         'Dialog() requires a DOM element with ARIA role of dialog.');
     }
 
+    document.body.classList.add('dialog-active');
+
     // Wrap in an individual backdrop element if one doesn't exist
     // Native <dialog> elements use the ::backdrop pseudo-element, which
     // works similarly.
@@ -292,6 +294,10 @@ aria.Utils = aria.Utils || {};
     if (topDialog.dialogNode.contains(closeButton)) {
       topDialog.close();
     }
+
+    if (!aria.OpenDialogList.length) {
+      document.body.classList.remove('dialog-active');
+    }
   }; // end closeDialog
 
   window.replaceDialog = function (newDialogId, newFocusAfterClosed,