JAVASCRIPT create dialog yes and no options javascript - Net-Raft.com

Welcome aboard! We are happy you are here and wish you good net-raft!




Just a Web Code Solution

create dialog with yes and no options in javascript


 840

Show Result
file.css
JAVASCRIPT


1

<!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>


By        
The power of the user (%)
5%



The most helpful JAVASCRIPT solutions

How to get client machine name or computer name with javascript ?How to get client machine name or computer name with javascript ?JAVASCRIPT

Click to see more ...

  13.4K     391

get client hostname javascriptget client hostname javascriptJAVASCRIPT

Click to see more ...

  4.1K     274

detect ie javascriptdetect ie javascriptJAVASCRIPT

Click to see more ...

  2.5K     192

Create fireworks using javascriptCreate fireworks using javascriptJAVASCRIPT

Click to see more ...

  2.4K     161

fire event when user is idle javascriptfire event when user is idle javascriptJAVASCRIPT

Click to see more ...

  2.1K     153

Create progress bar using javascriptCreate progress bar using javascriptJAVASCRIPT

Click to see more ...

  1.3K     152

how to create foreach class using javascript ?how to create foreach class using javascript ?JAVASCRIPT

Click to see more ...

  1.7K     112

create 3d barrel using javascriptcreate 3d barrel using javascriptJAVASCRIPT

Click to see more ...

  1.9K     112

create qr code javascriptcreate qr code javascriptJAVASCRIPT

Click to see more ...

  1.6K     106

create earth in universe with three.jscreate earth in universe with three.jsJAVASCRIPT

Click to see more ...

  1.4K     90