Modal Dialog Example: Use Absolute Position and Make Full Screen For …

…Small Devices (pull #370)

For issue #321, to address feedback from @jnurthen, changed modal dialog to:

1. Use absolute positioning instead of fixed positioning.
2. Make full screen if screen size less than 640PX.

examples/dialog-modal/css/dialog.css

@@ -45,7 +45,7 @@ body:not(.toc-inline) #main_content main, body:not(.toc-inline) #main_content na
 }
 
 #dialog_layer.showing {
-	position: fixed;
+	position: absolute;
 	width: 100%;
 	height: 100%;
 	top: 0;
@@ -68,6 +68,15 @@ div.default_dialog {
 	left: 25%;
 }
 
+@media screen and (max-width: 640px) {
+	div.default_dialog {
+		box-sizing: border-box;
+		top: 1%;
+		left: 2%;
+		width: 96%;
+	}
+}
+
 .default_dialog h2:first-of-type {
 	text-align:center;
 }

examples/dialog-modal/dialog.html

@@ -4,6 +4,8 @@
 <meta charset="utf-8" />
 <title>Modal Dialog Example | WAI-ARIA Authoring Practices 1.1</title>
 
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+
 <!--  Core js and css shared by all examples; do not modify when using this template. -->
 <link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/base.css">
 <link href="../css/core.css" rel="stylesheet">