JSFiddle - React, Tailwind, and code Playground

by Andrew Lyndem

HTML

<a class="btn btn-primary" onclick="javascript:smoke.confirm('You will soon receive your Quest<br/>But there’s more...<br/>If your Quest is the Best you can win!', function(e){
	if (e){

	}else{

	}
}, {
	ok: '<a href=\'#\' class=\'btn btn-orange\'>Tell Me More</a>',
	cancel: '<a href=\'#\' class=\'btn btn-orange\'>Maybe Later</a>',
	classname: 'custom-class',
	reverseButtons: true
});">Contest2</a>

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic,700italic);

.smoke{font-family: 'Open Sans', sans-serif !important;}
.dialog-buttons button{font-family: 'Open Sans', sans-serif !important;margin: 0 40px !important;}
.btn-orange{background-color:#f05a29; font-size: 16px;}
.btn-orange:hover {background-color:#FFF; font-size: 16px;}
.smoke-base .dialog{
    width: 75% !important;
    left: 35% !important;
    margin-left: 0px !imporant;
    
}
.dialog-buttons button{background-color:transparent !imporant; padding:0px !important;}
.btn {border-radius:0px !important;}
.dialog-buttons button a{color:#FFF;}

.smoke-base .dialog-inner{background-color: rgba(0,49,74,0.85);color:#FFF !important;}
@media (min-width:1025px){
    .smoke-base .dialog{
    width: 50% !important;
    left: 45% !important;
    margin-left: 0px !imporant;
    
}
}



.smoke-base {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  visibility: hidden;
  opacity: 0;
}

.smoke-base.smoke-visible {
  opacity: 1;
  visibility: visible;
}

.smokebg {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.smoke-base .dialog {
  position: absolute;
}

.dialog-prompt {
  margin-top: 15px;
  text-align: center;
}

.dialog-buttons {
  margin: 20px 0 5px 0
}

.smoke {
  font-family: Menlo, 'Andale Mono', monospace;
  text-align: center;
  font-size: 22px;
  line-height: 150%;
}

.dialog-buttons button {
  display: inline-block;
  vertical-align: baseline;
  cursor: pointer;
  font-family: Menlo, 'Andale Mono', monospace;
  font-style: normal;
  text-decoration: none;
  border: 0;
  outline: 0;
  margin: 0 5px;
  -webkit-background-clip: padding-box;
  font-size: 13px;
  line-height: 13px;
  font-weight: normal;
  padding: 9px 12px;
}

.dialog-prompt input {
  margin: 0;
  border: 0;
  font-family: sans-serif;
  outline: none;
  font-family: Menlo, 'Andale Mono', monospace;
  border: 1px solid #aaa;
  width: 75%;
  display: inline-block;
 ...

JavaScript

(function(e,t){var n={smoketimeout:[],init:false,zindex:1e3,i:0,bodyload:function(e){var r=t.createElement("div");r.setAttribute("id","smoke-out-"+e);r.className="smoke-base";r.style.zIndex=n.zindex;n.zindex++;t.body.appendChild(r)},newdialog:function(){var t=(new Date).getTime();t=Math.random(1,99)+t;if(!n.init){n.listen(e,"load",function(){n.bodyload(t)})}else{n.bodyload(t)}return t},forceload:function(){},build:function(t,r){n.i++;r.stack=n.i;t=t.replace(/\n/g,"<br />");t=t.replace(/\r/g,"<br />");var i="",s="OK",o="Cancel",u="",a="",f;if(r.type==="prompt"){i='<div class="dialog-prompt">'+'<input id="dialog-input-'+r.newid+'" type="text" '+(r.params.value?'value="'+r.params.value+'"':"")+" />"+"</div>"}if(r.params.ok){s=r.params.ok}if(r.params.cancel){o=r.params.cancel}if(r.params.classname){u=r.params.classname}if(r.type!=="signal"){a='<div class="dialog-buttons">';if(r.type==="alert"){a+='<button id="alert-ok-'+r.newid+'">'+s+"</button>"}else if(r.type==="quiz"){if(r.params.button_1){a+='<button class="quiz-button" id="'+r.type+"-ok1-"+r.newid+'">'+r.params.button_1+"</button>"}if(r.params.button_2){a+='<button class="quiz-button" id="'+r.type+"-ok2-"+r.newid+'">'+r.params.button_2+"</button>"}if(r.params.button_3){a+='<button class="quiz-button" id="'+r.type+"-ok3-"+r.newid+'">'+r.params.button_3+"</button>"}if(r.params.button_cancel){a+='<button id="'+r.type+"-cancel-"+r.newid+'" class="cancel">'+r.params.button_cancel+"</button>"}}else if(r.type==="prompt"||r.type==="confirm"){if(r.params.reverseButtons){a+='<button id="'+r.type+"-ok-"+r.newid+'">'+s+"</button>"+'<button id="'+r.type+"-cancel-"+r.newid+'" class="cancel">'+o+"</button>"}else{a+='<button id="'+r.type+"-cancel-"+r.newid+'" class="cancel">'+o+"</button>"+'<button id="'+r.type+"-ok-"+r.newid+'">'+s+"</button>"}}a+="</div>"}f='<div id="smoke-bg-'+r.newid+'" class="smokebg"></div>'+'<div class="dialog smoke '+u+'">'+'<div...