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


 184

Show ResultJAVASCRIPT


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'>OK</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 = "OK";
},
cancel: function () {
output.innerHTML = "NO";
}

});
});

})();

</script>
<style>
@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic');

body
{
margin: 0;
padding: 0;
font: 100%/1 'Lato', Arial, sans-serif;
color: #333;
background: #fff;
}
.button
{
background-color:#f5f5f5;
border:1px solid #dcdcdc;
color:#666;
cursor:pointer;
display:inline-block;
vertical-align:middle;
font-size:13px;
font-weight: bold;
font-family: 'Lato', Arial, sans-serif;
text-transform: uppercase;
height:27px;
line-height:27px;
min-width:54px;
padding:0 8px;
text-align:center;
text-decoration:none;
border-radius:2px;
background:linear-gradient(top,#f5f5f5,#f1f1f1);
}

.trigger, #output
{
padding: 1em;
margin: 0;
}

/*= Confirm Box */

#confirm-wrapper
{
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 1000000;
background: rgba( 204, 204, 204, 0.6 );
display: none;
transition: opacity 1s ease-in;
}

#confirm-box
{
width: 300px;
background: #fff;
min-height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin: -100px 0 0 -150px;
}

#confirm-buttons
{
position: absolute;
width: 100%;
text-align: center;
bottom: 0;
left: 0;
padding-bottom: 1em;
}

#confirm-buttons button
{
display: inline-block;
background: transparent;
color: #000;
font-size: 1em;
font-family: 'Lato', Arial, sans-serif;
font-weight: bold;
cursor: pointer;
text-transform: uppercase;
border: 2px solid;
margin: 0 0.5em;
padding: 0.6em 0;
width: 120px;
}

#confirm-header
{
text-align: center;
font-size: 1em;
font-weight: bold;
text-transform: uppercase;
margin: 2.5em 0 1.5em 0;
}

#confirm-header:after
{
content: ' ';
display: block;
width: 1em;
border-top: 1px solid;
margin: 0.4em auto;
}
</style>

</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     Created   
The power of the user (%)
4%



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

  5.4K     384

get client hostname javascriptget client hostname javascriptJAVASCRIPT

Click to see more ...

  3.2K     263

detect ie javascriptdetect ie javascriptJAVASCRIPT

Click to see more ...

  1.8K     167

Create fireworks using javascriptCreate fireworks using javascriptJAVASCRIPT

Click to see more ...

  1.7K     136

create 3d barrel using javascriptcreate 3d barrel using javascriptJAVASCRIPT

Click to see more ...

  1.6K     99

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

Click to see more ...

  1.1K     83

get ip address javascriptget ip address javascriptJAVASCRIPT

Click to see more ...

  846     76

create qr code javascriptcreate qr code javascriptJAVASCRIPT

Click to see more ...

  595     71

get filename using javascript get filename using javascript JAVASCRIPT

Click to see more ...

  576     61

how to create the connect to a database with ADODB using javascript ?how to create the connect to a database with ADODB using javascript ?JAVASCRIPT

Click to see more ...

  552     59