Add close button to modal windows

This helps make it easier for automation tools like Selenium to close modal windows.
portegah85 · Sep 25, 2019 · 8360a32 · 8360a32
1 parent 4c81891
commit 8360a32
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 2 deletions.
diff --git a/Tailspin.SpaceGame.Web/Views/Home/Index.cshtml b/Tailspin.SpaceGame.Web/Views/Home/Index.cshtml
@@ -216,6 +216,9 @@
 <div class="modal fade" id="test-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
  <div class="modal-content">
+ <div class="modal-header no-border">
+ <button type="button" class="close" data-dismiss="modal">&times;</button>
+ </div>
  <div class="modal-body">
  modal
  </div>
@@ -227,6 +230,9 @@
 <div class="modal fade pic-01" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
  <div class="modal-content">
+ <div class="modal-header no-border">
+ <button type="button" class="close" data-dismiss="modal">&times;</button>
+ </div>
  <div class="modal-body text-center">
  <img src="/images/space-game-placeholder.svg" width="100%" alt="">
  <p>Gamescreen example</p>
@@ -239,6 +245,9 @@
 <div class="modal fade social-media" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
  <div class="modal-content">
+ <div class="modal-header no-border">
+ <button type="button" class="close" data-dismiss="modal">&times;</button>
+ </div>
  <div class="modal-body text-center">
  Social media example
  </div>
@@ -250,6 +259,9 @@
 <div class="modal fade" id="pretend-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
  <div class="modal-content">
+ <div class="modal-header no-border">
+ <button type="button" class="close" data-dismiss="modal">&times;</button>
+ </div>
  <div class="modal-body text-center">
  This link is for example purposes and goes nowhere. 😐
  </div>

diff --git a/Tailspin.SpaceGame.Web/Views/Home/Profile.cshtml b/Tailspin.SpaceGame.Web/Views/Home/Profile.cshtml
@@ -5,6 +5,9 @@
 <div class="modal fade profile" id="[email protected]" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
  <div class="modal-content">
+ <div class="modal-header no-border">
+ <button type="button" class="close" data-dismiss="modal">&times;</button>
+ </div>
  <div class="modal-body">
  <div class="row">
  <div class="col-sm-4">

diff --git a/Tailspin.SpaceGame.Web/wwwroot/css/site.css b/Tailspin.SpaceGame.Web/wwwroot/css/site.css
@@ -176,3 +176,6 @@ section {
  .social .share img {
  width: 3rem;
  height: 100%; }
+
+.no-border {
+ border: none; }
diff --git a/Tailspin.SpaceGame.Web/wwwroot/css/site.min.css b/Tailspin.SpaceGame.Web/wwwroot/css/site.min.css
diff --git a/Tailspin.SpaceGame.Web/wwwroot/css/site.scss b/Tailspin.SpaceGame.Web/wwwroot/css/site.scss
@@ -253,3 +253,7 @@ section {
  }
  }
 }
+
+.no-border {
+ border: none;
+}
diff --git a/gulpfile.js b/gulpfile.js
@@ -8,7 +8,7 @@ const gulp = require("gulp"),
  uglify = require("gulp-uglify");
 
 const paths = {
- webroot: "./wwwroot/"
+ webroot: "./Tailspin.SpaceGame.Web/wwwroot/"
 };
 
 paths.js = paths.webroot + "js/**/*.js";