Fixed change size not working
Fixed improper backdrop removal Improve test HTML file
This commit is contained in:
parent
198e8c3995
commit
4e2aa45fa7
@ -20,34 +20,85 @@
|
|||||||
<body class="py-5">
|
<body class="py-5">
|
||||||
|
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="row mb-3">
|
<div class="row mb-3 border-bottom">
|
||||||
<div class="col-12">
|
<div class="col-12">
|
||||||
|
|
||||||
<button type="button" class="btn btn-primary" onclick="BSDialog.Create('abc123', 'My Modal Box 123', null, 'xl')">
|
<p><b>Example One</b></p>
|
||||||
Launch Modal 1
|
<p>Launch an empty modal</p>
|
||||||
</button>
|
<div class="alert alert-secondary">BSDialog.Create('abc123', 'My Modal Box 123', null, 'xl');</div>
|
||||||
|
<p><button id="button1" type="button" class="btn btn-primary">Launch Modal</button></p>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row mb-3">
|
<div class="row mb-3 border-bottom">
|
||||||
<div class="col-12">
|
<div class="col-12">
|
||||||
|
|
||||||
<button type="button" class="btn btn-primary" onclick="BSDialog.Create('abc123', 'My Modal Box 123', 'Hello momo!', 'lg')">
|
<p><b>Example Two</b></p>
|
||||||
Launch Modal 2
|
<p>Launch a modal with text</p>
|
||||||
</button>
|
<div class="alert alert-secondary">BSDialog.Create('abc123', 'My Modal Box 123', 'Hello momo!', 'lg');</div>
|
||||||
|
<p><button id="button2" type="button" class="btn btn-primary">Launch Modal</button></p>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row mb-3">
|
<div class="row mb-3 border-bottom">
|
||||||
<div class="col-12">
|
<div class="col-12">
|
||||||
|
|
||||||
<button type="button" class="btn btn-primary" onclick="BSDialog.ShowToast('abc123', 'My Modal Box 123', 'Help! I\'m toast.', 'sm')">
|
<p><b>Example Three</b></p>
|
||||||
Launch Modal 3
|
<p>Launch an empty modal then update its title, body, footer and size.</p>
|
||||||
</button>
|
<div class="alert alert-secondary">
|
||||||
|
BSDialog.ShowToast('abc123', 'My Modal Box 123', null, 'sm');<br />
|
||||||
|
BSDialog.UpdateTitle('abc123', 'My Modal Box 567');<br />
|
||||||
|
BSDialog.UpdateBody('abc123', 'Help, I\'m toast!');<br />
|
||||||
|
BSDialog.UpdateFooter('abc123', '');<br />
|
||||||
|
BSDialog.UpdateSize('abc123', 'lg');<br />
|
||||||
|
</div>
|
||||||
|
<p><button id="button3" type="button" class="btn btn-primary">Launch Modal</button></p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row mb-3 border-bottom">
|
||||||
|
<div class="col-12">
|
||||||
|
|
||||||
|
<p><b>Example Four</b></p>
|
||||||
|
<p>Launch a multiple modals</p>
|
||||||
|
<div class="alert alert-secondary">
|
||||||
|
BSDialog.ShowToast('abc123', 'My Modal Box 123', 'Help! I\'m toast.', 'sm');<br />
|
||||||
|
BSDialog.ShowToast('abc123456', 'My Modal Box 123.567', 'Help! I\'m a second toast.', 'md');<br />
|
||||||
|
</div>
|
||||||
|
<p><button id="button4" type="button" class="btn btn-primary">Launch Modal</button></p>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
|
||||||
|
$(document).ready(function(){
|
||||||
|
$("#button1").on('click', function(){
|
||||||
|
BSDialog.Create('abc123', 'My Modal Box 123', null, 'xl');
|
||||||
|
});
|
||||||
|
|
||||||
|
$("#button2").on('click', function(){
|
||||||
|
BSDialog.Create('abc123', 'My Modal Box 123', 'Hello momo!', 'lg');
|
||||||
|
});
|
||||||
|
|
||||||
|
$("#button3").on('click', function(){
|
||||||
|
BSDialog.ShowToast('abc123', 'My Modal Box 123', null, 'sm');
|
||||||
|
BSDialog.UpdateTitle('abc123', 'My Modal Box 567');
|
||||||
|
BSDialog.UpdateBody('abc123', 'Help, I\'m toast!');
|
||||||
|
BSDialog.UpdateFooter('abc123', '');
|
||||||
|
BSDialog.UpdateSize('abc123', 'lg');
|
||||||
|
});
|
||||||
|
|
||||||
|
$("#button4").on('click', function(){
|
||||||
|
BSDialog.ShowToast('abc123', 'My Modal Box 123', 'Help! I\'m toast.', 'sm');
|
||||||
|
BSDialog.ShowToast('abc123456', 'My Modal Box 123.567', 'Help! I\'m a second toast.', 'md');
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
18
bsdialog4.js
18
bsdialog4.js
@ -1,6 +1,6 @@
|
|||||||
/**
|
/**
|
||||||
* BSDialog4
|
* BSDialog4
|
||||||
* @version v0.1.1.024 (2023/08/03 0013)
|
* @version v0.1.1.026 (2023/08/19 12:58)
|
||||||
*/
|
*/
|
||||||
var BSDialog = {
|
var BSDialog = {
|
||||||
Create: async function (id, title, url, size) {
|
Create: async function (id, title, url, size) {
|
||||||
@ -62,11 +62,13 @@ var BSDialog = {
|
|||||||
}
|
}
|
||||||
|
|
||||||
modal.Modal.forEach(function(e) {
|
modal.Modal.forEach(function(e) {
|
||||||
e.classList.remove("modal-sm");
|
let modalDialog = e.querySelectorAll(".modal-dialog")[0];
|
||||||
e.classList.remove("modal-md");
|
|
||||||
e.classList.remove("modal-lg");
|
modalDialog.classList.remove("modal-sm");
|
||||||
e.classList.remove("modal-xl");
|
modalDialog.classList.remove("modal-md");
|
||||||
e.classList.add("modal-" + size);
|
modalDialog.classList.remove("modal-lg");
|
||||||
|
modalDialog.classList.remove("modal-xl");
|
||||||
|
modalDialog.classList.add("modal-" + size);
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
UpdateBody: function (id, content) {
|
UpdateBody: function (id, content) {
|
||||||
@ -256,6 +258,10 @@ var BSDialog = {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (this.body.querySelectorAll(".modal").length > 0) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
let backdrop = this.body.querySelectorAll(".modal-backdrop")[0];
|
let backdrop = this.body.querySelectorAll(".modal-backdrop")[0];
|
||||||
backdrop.parentNode.removeChild(backdrop);
|
backdrop.parentNode.removeChild(backdrop);
|
||||||
|
|
||||||
|
4
bsdialog4.min.js
vendored
4
bsdialog4.min.js
vendored
@ -1,5 +1,5 @@
|
|||||||
/**
|
/**
|
||||||
* BSDialog4
|
* BSDialog4
|
||||||
* @version v0.1.1.024 (2023/08/03 0013)
|
* @version v0.1.1.026 (2023/08/19 12:58)
|
||||||
*/
|
*/
|
||||||
var BSDialog={Create:async function(t,l,o,e){var a=this;a.id=t,a.pfx="bsdia4_",a.body=document.getElementsByTagName("body")[0],a.addBackdrop(),a.addModal(t,l,e),a.isNullOrWhitespace(o)?a.UpdateBody(t,""):o.startsWith("http://")||o.startsWith("https://")||o.startsWith("/")?a.UpdateBodyRemote(t,o):await a.UpdateBody(t,o)},Clear:function(){this.body.querySelectorAll(".modal").forEach((function(t){t.parentNode.removeChild(t)})),this.removeBackdrop()},Close:function(t){let l=this.Find(t);null!==l&&(l.Modal.forEach((function(t){t.parentNode.removeChild(t)})),l=this.Find(t),null===l&&this.removeBackdrop())},UpdateTitle:function(t,l){let o=this.Find(t);null!==o&&o.Title.forEach((function(t){t.innerHTML=l}))},UpdateSize:function(t,l){let o=this.Find(t);null!==o&&o.Modal.forEach((function(t){t.classList.remove("modal-sm"),t.classList.remove("modal-md"),t.classList.remove("modal-lg"),t.classList.remove("modal-xl"),t.classList.add("modal-"+l)}))},UpdateBody:function(t,l){var o=this;let e=o.Find(t);null!==e&&e.Body.forEach((function(t){o.html(t,l)}))},UpdateBodyRemote:async function(t,l){var o=this;o.Exists(t)&&await fetch(l,{cache:"no-cache",credentials:"same-origin"}).then((t=>t.text())).then((l=>{o.UpdateBody(t,l)})).catch((l=>{o.UpdateBody(t,"Error: "+l)}))},UpdateFooter:function(t,l){var o=this;let e=o.Find(t);null!==e&&e.Footer.forEach((function(t){o.html(t,l)}))},Exists:function(t){return null!==this.Find(t)},Find:function(t){let l=this.body.querySelectorAll("#"+this.pfx+t+".modal");return l?l.length<=0?null:{Title:l[0].querySelectorAll(".modal-title"),Body:l[0].querySelectorAll(".modal-body"),Footer:l[0].querySelectorAll(".modal-footer"),Close:l[0].querySelectorAll("[data-dismiss='modal']"),Modal:l}:null},ShowToast:function(t,l,o,e){this.Create(t,l,null,e),this.UpdateBody(t,o)},addBackdrop:function(){let t=this;t.body.querySelectorAll(".modal-backdrop").length>0||(t.appendHtml(t.body,'<div class="modal-backdrop fade show"></div>'),t.body.classList.add("modal-open"),t.body.style.overflow="hidden",t.body.querySelectorAll(".modal-backdrop")[0].addEventListener("click",(function(l){l.stopPropagation(),l.preventDefault(),t.Clear()})))},addModal:function(t,l,o){var e=this;let a=e.Find(t);if(null!==a)return;let d="";d+='<div class="modal fade show d-block" id="'+e.pfx+t+'" tabindex="-1">',d+=' <div class="modal-dialog modal-'+o+'">',d+=' <div class="modal-content">',d+=' <div class="modal-header">',d+=' <span class="modal-title font-weight-bold">'+l+"</span>",d+=' <button type="button" class="close" data-dismiss="modal" aria-label="Close">',d+=' <span aria-hidden="true">×</span>',d+=" </button>",d+=" </div>",d+=' <div class="modal-body">',d+='<div class="row mt-3 pb-3">',d+=' <div class="col-12 text-center">',d+=' <div class="spinner-border" role="status">',d+='\t <span class="sr-only">Loading...</span>',d+=" </div>",d+=" </div>",d+="</div>",d+=" </div>",d+=' <div class="modal-footer">',d+=' <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Close</button>',d+=" </div>",d+=" </div>",d+=" </div>",d+="</div>",e.appendHtml(e.body,d),a=e.Find(t),null!==a&&a.Close.forEach((function(l){l.addEventListener("click",(function(l){l.stopPropagation(),l.preventDefault(),e.Close(t)})),l.addEventListener("auxclick",(function(t){t.stopPropagation(),t.preventDefault(),1===t.button&&e.toggleSize()}))}))},appendHtml:function(t,l){let o=document.createElement("template");o.innerHTML=l,o=o.content.firstChild,t.appendChild(o)},html:function(t,l){jQuery?jQuery(t).html(l):t.innerHTML=l},isNullOrWhitespace:function(t){return void 0===t||(null==t||(0==t||t.trim().length<=0))},removeBackdrop:function(){if(this.body.querySelectorAll(".modal-backdrop").length<=0)return;let t=this.body.querySelectorAll(".modal-backdrop")[0];t.parentNode.removeChild(t),this.body.classList.remove("modal-open"),this.body.style.overflow=null},toggleSize:function(){let t=this.Find(this.id);if(null===t)return;let l=t.Modal[0].querySelectorAll(".modal-dialog")[0];l.classList.contains("modal-sm")?(l.classList.remove("modal-sm"),l.classList.add("modal-md")):l.classList.contains("modal-md")?(l.classList.remove("modal-md"),l.classList.add("modal-lg")):l.classList.contains("modal-lg")?(l.classList.remove("modal-lg"),l.classList.add("modal-xl")):l.classList.contains("modal-xl")?(l.classList.remove("modal-xl"),l.classList.add("modal-sm")):(l.classList.remove("modal-sm"),l.classList.remove("modal-md"),l.classList.remove("modal-lg"),l.classList.remove("modal-xl"),l.classList.add("modal-md"))}};
|
var BSDialog={Create:async function(t,l,o,e){var a=this;a.id=t,a.pfx="bsdia4_",a.body=document.getElementsByTagName("body")[0],a.addBackdrop(),a.addModal(t,l,e),a.isNullOrWhitespace(o)?a.UpdateBody(t,""):o.startsWith("http://")||o.startsWith("https://")||o.startsWith("/")?a.UpdateBodyRemote(t,o):await a.UpdateBody(t,o)},Clear:function(){this.body.querySelectorAll(".modal").forEach((function(t){t.parentNode.removeChild(t)})),this.removeBackdrop()},Close:function(t){let l=this.Find(t);null!==l&&(l.Modal.forEach((function(t){t.parentNode.removeChild(t)})),l=this.Find(t),null===l&&this.removeBackdrop())},UpdateTitle:function(t,l){let o=this.Find(t);null!==o&&o.Title.forEach((function(t){t.innerHTML=l}))},UpdateSize:function(t,l){let o=this.Find(t);null!==o&&o.Modal.forEach((function(t){let o=t.querySelectorAll(".modal-dialog")[0];o.classList.remove("modal-sm"),o.classList.remove("modal-md"),o.classList.remove("modal-lg"),o.classList.remove("modal-xl"),o.classList.add("modal-"+l)}))},UpdateBody:function(t,l){var o=this;let e=o.Find(t);null!==e&&e.Body.forEach((function(t){o.html(t,l)}))},UpdateBodyRemote:async function(t,l){var o=this;o.Exists(t)&&await fetch(l,{cache:"no-cache",credentials:"same-origin"}).then((t=>t.text())).then((l=>{o.UpdateBody(t,l)})).catch((l=>{o.UpdateBody(t,"Error: "+l)}))},UpdateFooter:function(t,l){var o=this;let e=o.Find(t);null!==e&&e.Footer.forEach((function(t){o.html(t,l)}))},Exists:function(t){return null!==this.Find(t)},Find:function(t){let l=this.body.querySelectorAll("#"+this.pfx+t+".modal");return l?l.length<=0?null:{Title:l[0].querySelectorAll(".modal-title"),Body:l[0].querySelectorAll(".modal-body"),Footer:l[0].querySelectorAll(".modal-footer"),Close:l[0].querySelectorAll("[data-dismiss='modal']"),Modal:l}:null},ShowToast:function(t,l,o,e){this.Create(t,l,null,e),this.UpdateBody(t,o)},addBackdrop:function(){let t=this;t.body.querySelectorAll(".modal-backdrop").length>0||(t.appendHtml(t.body,'<div class="modal-backdrop fade show"></div>'),t.body.classList.add("modal-open"),t.body.style.overflow="hidden",t.body.querySelectorAll(".modal-backdrop")[0].addEventListener("click",(function(l){l.stopPropagation(),l.preventDefault(),t.Clear()})))},addModal:function(t,l,o){var e=this;let a=e.Find(t);if(null!==a)return;let d="";d+='<div class="modal fade show d-block" id="'+e.pfx+t+'" tabindex="-1">',d+=' <div class="modal-dialog modal-'+o+'">',d+=' <div class="modal-content">',d+=' <div class="modal-header">',d+=' <span class="modal-title font-weight-bold">'+l+"</span>",d+=' <button type="button" class="close" data-dismiss="modal" aria-label="Close">',d+=' <span aria-hidden="true">×</span>',d+=" </button>",d+=" </div>",d+=' <div class="modal-body">',d+='<div class="row mt-3 pb-3">',d+=' <div class="col-12 text-center">',d+=' <div class="spinner-border" role="status">',d+='\t <span class="sr-only">Loading...</span>',d+=" </div>",d+=" </div>",d+="</div>",d+=" </div>",d+=' <div class="modal-footer">',d+=' <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Close</button>',d+=" </div>",d+=" </div>",d+=" </div>",d+="</div>",e.appendHtml(e.body,d),a=e.Find(t),null!==a&&a.Close.forEach((function(l){l.addEventListener("click",(function(l){l.stopPropagation(),l.preventDefault(),e.Close(t)})),l.addEventListener("auxclick",(function(t){t.stopPropagation(),t.preventDefault(),1===t.button&&e.toggleSize()}))}))},appendHtml:function(t,l){let o=document.createElement("template");o.innerHTML=l,o=o.content.firstChild,t.appendChild(o)},html:function(t,l){jQuery?jQuery(t).html(l):t.innerHTML=l},isNullOrWhitespace:function(t){return void 0===t||(null==t||(0==t||t.trim().length<=0))},removeBackdrop:function(){if(this.body.querySelectorAll(".modal-backdrop").length<=0)return;if(this.body.querySelectorAll(".modal").length>0)return;let t=this.body.querySelectorAll(".modal-backdrop")[0];t.parentNode.removeChild(t),this.body.classList.remove("modal-open"),this.body.style.overflow=null},toggleSize:function(){let t=this.Find(this.id);if(null===t)return;let l=t.Modal[0].querySelectorAll(".modal-dialog")[0];l.classList.contains("modal-sm")?(l.classList.remove("modal-sm"),l.classList.add("modal-md")):l.classList.contains("modal-md")?(l.classList.remove("modal-md"),l.classList.add("modal-lg")):l.classList.contains("modal-lg")?(l.classList.remove("modal-lg"),l.classList.add("modal-xl")):l.classList.contains("modal-xl")?(l.classList.remove("modal-xl"),l.classList.add("modal-sm")):(l.classList.remove("modal-sm"),l.classList.remove("modal-md"),l.classList.remove("modal-lg"),l.classList.remove("modal-xl"),l.classList.add("modal-md"))}};
|
Loading…
Reference in New Issue
Block a user