bsdialog5.js

@@ -1,6 +1,6 @@
 /**
  * BSDialog5
- * @version v0.2.1.005 (2023/11/14 2028)
+ * @version v0.2.0.055 (2023/11/12 1428)
  */
 var BSDialog5 = {
 	Default: function() {
@@ -51,11 +51,8 @@ var BSDialog5 = {
 		a.id = _options.ID;
 		a.pfx = "bsdia5_";
 
-		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();
+		a.addBackdrop();
+		a.addModal(_options.ID, _options.Title, _options.Size, _options.ShowFooter, _options.EasyClose, _options.Colour);
 
 		if (_options.URL == null) {
 			await a.Update({ ID: _options.ID, Body: _options.Message });
@@ -183,7 +180,21 @@ var BSDialog5 = {
 	GetBody: function() {
 		return document.getElementsByTagName("body")[0];
 	},
-	addModal: function (id, title, size, showFooter, closeColour) {
+	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) {
 		const a = this;
 
 		// don't allow duplicates
@@ -193,7 +204,7 @@ var BSDialog5 = {
 		}
 
 		let html = "";
-		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 modal-' + size + ' fade show d-block" id="' + a.pfx + id + '" tabindex="-1" aria-modal="true" role="dialog">';
 		html += '  <div class="modal-dialog">';
 		html += '    <div class="modal-content">';
 		html += '      <div class="modal-header">';
@@ -229,10 +240,31 @@ var BSDialog5 = {
 			return;
 	 	}
 
-		document.getElementById(a.pfx + id).addEventListener('hidden.bs.modal', function (event) {
+		// 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);
+				});
+		});
+
 		modal.Title.addEventListener("dblclick", function(e){
 			e.stopPropagation();
 			e.preventDefault();