add close btn in modals. fixes #199

src/changelog.html

@@ -1,3 +1,9 @@
+<a d-click="onModalCloseBtnClick" href="" aria-label="Close notifications" title="Close" class="js-modal__close-btn  modal__close-btn">
+	<svg>
+		<use xlink:href="#cross-icon"></use>							
+	</svg>
+</a>
+
 <h1>Whats new?</h1>
 
 <div class="notification">

src/index.html

@@ -243,6 +243,11 @@
 
 		<div class="modal" id="addLibraryModal">
 			<div class="modal__content">
+				<a d-click="onModalCloseBtnClick" href="" aria-label="Close add library modal" title="Close" class="js-modal__close-btn  modal__close-btn">
+					<svg>
+						<use xlink:href="#cross-icon"></use>							
+					</svg>
+				</a>
 				<h1>Add Library</h1>
 				<h3>JavaScript</h3>
 				<p style="font-size: 0.8em;opacity: 0.7;">Note: You can load external scripts from following domains: localhost, https://ajax.googleapis.com, https://code.jquery.com, https://cdnjs.cloudflare.com, https://unpkg.com, https://maxcdn.com, https://cdn77.com, https://maxcdn.bootstrapcdn.com, https://cdn.jsdelivr.net/, https://rawgit.com, https://wzrd.in</p>
@@ -268,6 +273,11 @@
 
 		<div class="modal" id="cssSettingsModal">
 			<div class="modal__content">
+				<a d-click="onModalCloseBtnClick" href="" aria-label="Close CSS settings modal" title="Close" class="js-modal__close-btn  modal__close-btn">
+					<svg>
+						<use xlink:href="#cross-icon"></use>							
+					</svg>
+				</a>
 				<h1>Atomic CSS Settings</h1>
 				<h3>Configure Atomizer settings. <a href="https://github.com/acss-io/atomizer#api" target="_blank">Read more</a> about available settings.</h3>
 				<div style="height: calc(100vh - 350px);">
@@ -278,6 +288,11 @@
 
 		<div class="modal" id="helpModal">
 			<div class="modal__content">
+				<a d-click="onModalCloseBtnClick" href="" aria-label="Close help modal" title="Close" class="js-modal__close-btn  modal__close-btn">
+					<svg>
+						<use xlink:href="#cross-icon"></use>
+					</svg>
+				</a>
 				<h1>Web Maker<small style="font-size:14px;"> v2.9.1</small></h1>
 				<div>
 					<p>Made with <span style="margin-right: 8px;">💖</span> & <span style="margin-right: 8px;">🙌</span> by <a href="https://twitter.com/chinchang457" target="_blank">Kushagra Gour</a></p>
@@ -371,6 +386,11 @@
 
 		<div class="modal modal--settings" id="settingsModal">
 			<div class="modal__content">
+				<a d-click="onModalCloseBtnClick" href="" aria-label="Close Settings" title="Close" class="js-modal__close-btn  modal__close-btn">
+					<svg>
+						<use xlink:href="#cross-icon"></use>							
+					</svg>
+				</a>
 				<h1>Settings</h1>
 
 				<h3>Indentation</h3>
@@ -583,6 +603,10 @@
 			</symbol>
 			<symbol id="gift-icon" viewBox="0 0 24 24">
 				<path d="M22,12V20A2,2 0 0,1 20,22H4A2,2 0 0,1 2,20V12A1,1 0 0,1 1,11V8A2,2 0 0,1 3,6H6.17C6.06,5.69 6,5.35 6,5A3,3 0 0,1 9,2C10,2 10.88,2.5 11.43,3.24V3.23L12,4L12.57,3.23V3.24C13.12,2.5 14,2 15,2A3,3 0 0,1 18,5C18,5.35 17.94,5.69 17.83,6H21A2,2 0 0,1 23,8V11A1,1 0 0,1 22,12M4,20H11V12H4V20M20,20V12H13V20H20M9,4A1,1 0 0,0 8,5A1,1 0 0,0 9,6A1,1 0 0,0 10,5A1,1 0 0,0 9,4M15,4A1,1 0 0,0 14,5A1,1 0 0,0 15,6A1,1 0 0,0 16,5A1,1 0 0,0 15,4M3,8V10H11V8H3M13,8V10H21V8H13Z" />
+			<symbol id="gift-icon" viewBox="0 0 24 24">
+			</symbol>
+			<symbol id="cross-icon" viewBox="0 0 24 24">
+				<path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" />
 			</symbol>
 		</svg>
 

src/script.js

@@ -1913,6 +1913,11 @@ globalConsoleContainerEl
 		trackEvent('ui', 'cssSettingsBtnClick');
 	};
 
+	scope.onModalCloseBtnClick = function(e) {
+		closeAllOverlays();
+		e.preventDefault();
+	};
+
 	function init() {
 		var lastCode;
 
@@ -2140,10 +2145,10 @@ globalConsoleContainerEl
 		});
 
 		window.addEventListener('click', function(e) {
-			if (
+			if (typeof e.target.className !== 'string') {
-				typeof e.target.className === 'string' &&
+				return;
-				e.target.className.indexOf('modal-overlay') !== -1
+			}
-			) {
+			if (e.target.className.indexOf('modal-overlay') !== -1) {
 				closeAllOverlays();
 			}
 		});

src/style.css

@@ -438,6 +438,20 @@ body > #demo-frame {
 		margin-left: -45vw;
 	}
 }
+.modal__close-btn {
+	position: absolute;
+	right: 10px;
+	top: 10px;
+	opacity: 0.3;
+transition: 0.25s ease;
+}
+.modal__close-btn > svg {
+	fill: black;
+	width:30px; height:30px;
+}
+.modal__close-btn:hover {
+	opacity: 0.7;
+}
 .modal__content {
 	background: #fdfdfd;
 	color: #444;