Welcome aboard! We are happy you are here and wish you good net-raft!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script type="text/javascript">
(function () {
function ConfirmBox(element, params) {
this.element = element;
this.params = params || {};
this.params.ok = params.ok || function () { };
this.params.cancel = params.cancel || function () { };
this.init();
}
ConfirmBox.prototype = {
init: function () {
this.instance = null;
this.create();
this.layout();
this.actions();
},
create: function () {
if (document.querySelector("#confirm-wrapper") === null) {
var wrapper = document.createElement("div");
wrapper.id = "confirm-wrapper";
var html = "<div id='confirm-box'><h2 id='confirm-header'></h2>";
html += "<div id='confirm-buttons'><button id='confirm-ok'>YES</button><button type='button' id='confirm-cancel'>NO</button></div>";
html += "</div>";
wrapper.innerHTML = html;
document.body.appendChild(wrapper);
}
this.instance = document.querySelector("#confirm-wrapper");
},
layout: function () {
var wrapper = this.instance;
var winHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
wrapper.style.height = winHeight + "px";
},
show: function (element) {
element.style.display = "block";
element.style.opacity = 1;
},
hide: function (element) {
element.style.opacity = 0;
setTimeout(function () {
element.style.display = "none";
}, 1000);
},
actions: function () {
var self = this;
self.element.addEventListener("click", function () {
self.instance.querySelector("#confirm-header").innerHTML = self.element.dataset.question;
self.show(self.instance);
}, false);
self.instance.querySelector("#confirm-ok").
addEventListener("click", function () {
self.hide(self.instance);
setTimeout(function () {
self.params.ok();
}, 1000);
}, false);
self.instance.querySelector("#confirm-cancel").
addEventListener("click", function () {
self.hide(self.instance);
setTimeout(function () {
self.params.cancel();
}, 1000);
}, false);
}
};
document.addEventListener("DOMContentLoaded", function () {
var confirm = document.querySelector("#confirm");
var output = document.querySelector("#output");
var confBox = new ConfirmBox(confirm, {
ok: function () {
output.innerHTML = "YES";
},
cancel: function () {
output.innerHTML = "NO";
}
});
});
})();
</script>
<link href="/project/Nani C./sl_7DYupf2PAx202004172/file.css" type="text/css" rel="stylesheet">
</head>
<body>
<p class="trigger"><button type="button" id="confirm" data-question="Do you like javascript ?" class="button">Submit</button></p>
<div id="output"></div>
</body>
</html>
The most helpful JAVASCRIPT solutions
How can I get the last day and the next day in javascript ?JAVASCRIPT Click to see more ... 5.8K 507