Merge pull request 'Changed to using modal methods to launch modal' (#6) from release/0.2.1.005 into master

Reviewed-on: #6

bsdialog5.js

@@ -1,6 +1,6 @@
 /**
  * BSDialog5
- * @version v0.2.0.055 (2023/11/12 1428)
+ * @version v0.2.1.005 (2023/11/14 2028)
  */
 var BSDialog5 = {
 	Default: function() {
@@ -51,8 +51,11 @@ var BSDialog5 = {
 		a.id = _options.ID;
 		a.pfx = "bsdia5_";
 
-		a.addBackdrop();
-		a.addModal(_options.ID, _options.Title, _options.Size, _options.ShowFooter, _options.EasyClose, _options.Colour);
+		a.addModal(_options.ID, _options.Title, _options.Size, _options.ShowFooter, _options.Colour);
+
+		(new bootstrap.Modal(document.getElementById(a.pfx + _options.ID), {
+			backdrop: _options.EasyClose
+		})).show();
 
 		if (_options.URL == null) {
 			await a.Update({ ID: _options.ID, Body: _options.Message });
@@ -180,21 +183,7 @@ var BSDialog5 = {
 	GetBody: function() {
 		return document.getElementsByTagName("body")[0];
 	},
-	addBackdrop: function () {
-		const a = this;
-
-		// don't allow duplicates
-		if (a.GetBody().querySelectorAll(".modal-backdrop").length > 0) {
-			return;
-		}
-
-		a.appendHtml(a.GetBody(), '<div class="modal-backdrop fade show"></div>');
-
-		// lock background
-		a.GetBody().classList.add("modal-open");
-		a.GetBody().style.overflow = "hidden";
-	},
-	addModal: function (id, title, size, showFooter, easyClose, closeColour) {
+	addModal: function (id, title, size, showFooter, closeColour) {
 		const a = this;
 
 		// don't allow duplicates
@@ -204,7 +193,7 @@ var BSDialog5 = {
 		}
 
 		let html = "";
-		html += '<div class="modal modal-' + size + ' fade show d-block" id="' + a.pfx + id + '" tabindex="-1" aria-modal="true" role="dialog">';
+		html += '<div class="modal modal-' + size + ' fade" id="' + a.pfx + id + '" tabindex="-1" aria-labelledby="' + a.pfx + id + '" aria-hidden="true" style="display:none;">';
 		html += '  <div class="modal-dialog">';
 		html += '    <div class="modal-content">';
 		html += '      <div class="modal-header">';
@@ -240,29 +229,8 @@ var BSDialog5 = {
 			return;
 	 	}
 
-		// Close on backdrp
-		if (easyClose === true) {
-			modal.Modal.addEventListener("click", function(e){
-				e.stopPropagation();
-				e.preventDefault();
-
-				a.Close(id);
-			});
-
-			const modalContent = modal.Modal.querySelectorAll(".modal-content")[0];
-			modalContent.addEventListener("click", function(e){
-				e.stopPropagation();
-				e.preventDefault();
-			});
-		}
-
-		modal.Close.forEach(function(e){
-			e.addEventListener("click", function(e){
-				e.stopPropagation();
-				e.preventDefault();
-
-					a.Close(id);
-				});
+		document.getElementById(a.pfx + id).addEventListener('hidden.bs.modal', function (event) {
+			a.Close(id);
 		});
 
 		modal.Title.addEventListener("dblclick", function(e){