From 66df1b2230e9b11c1fa7db921795b02c026205e4 Mon Sep 17 00:00:00 2001
From: Simon Marsh <simon@sesa.me.uk>
Date: Sat, 12 Jan 2019 11:22:13 +0000
Subject: [PATCH] Update modal dialog for Bootstrap 4

---
 static/js/lg.js       |  4 ++--
 templates/layout.html | 30 ++++++++++++++++++------------
 2 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/static/js/lg.js b/static/js/lg.js
index ba11f05..ed2b023 100644
--- a/static/js/lg.js
+++ b/static/js/lg.js
@@ -51,8 +51,8 @@ $(function(){
 			event.preventDefault();
 			link = $(this).attr('href');
 			$.getJSON(link, function(data) {
-				$(".modal h3").html(data.title);
-			        $(".modal .modal-body > p").html(data.output);
+				$(".modal .modal-dialog .modal-content .modal-header .modal-title").html(data.title);
+			        $(".modal .modal-dialog .modal-content .modal-body > p").html(data.output);
 				$(".modal").modal('show');
 			});
 		});
diff --git a/templates/layout.html b/templates/layout.html
index 2ae820a..09ed813 100644
--- a/templates/layout.html
+++ b/templates/layout.html
@@ -93,18 +93,24 @@
 			<div class="progress progress-info progress-striped active" style="position:fixed;bottom:0px;right:10px;display:none;height:10px;width:200px;">
 				<div class="progress-bar" style="width: 100%;"></div>
 			</div>
-			<div class="modal fade" style="display:none;">
-				<div class="modal-header">
-					<a class="close" data-dismiss="modal">×</a>
-					<h3>Modal header</h3>
-				</div>
-				<div class="modal-body" style="height: 300px; overflow: auto;">
-					<p>One fine body…</p>
-				</div>
-				<div class="modal-footer">
-					<a href="#" class="btn btn-primary">Close</a>
-				</div>
-			</div>	
+
+			<div class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
+			  <div class="modal-dialog modal-lg" role="document">
+			    <div class="modal-content">
+			      <div class="modal-header">
+				<h5 class="modal-title">Modal header</h5>
+				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
+				  <span aria-hidden="true">&times;</span>
+				</button>
+			      </div>
+			      <div class="modal-body"><p>One fine body...</p></div>
+			      <div class="modal-footer">
+				<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
+			      </div>
+			    </div>
+			  </div>
+			</div>
+			
 		</div>
 		<script type="text/javascript" src="{{url_for('static', filename='js/jquery.js') }}"></script>
 		<script type="text/javascript" src="{{url_for('static', filename='js/bootstrap.min.js') }}"></script>