JSFiddle - React, Tailwind, and code Playground

by Andrew Lyndem

HTML

<a class="btn btn-primary" onclick="javascript:smoke.alert('Do you know you can win a free flight?<br/>Or even 4 flights!<br/>Create a Quest to Win!<br/><a href=\'#\' class=\'btn btn-orange\'>Continue</a> <a href=\'#\' class=\'btn btn-orange\'>No, thanks</a>');">Contest</a>

CSS

.btn-orange{background-color:#f05a29;}
.smoke-base .dialog{
    width: 75% !important;
    left: 35% !important;
    margin-left: 0px !imporant;
    
}
.smoke-base .dialog-inner{background-color: rgb(0, 49, 74);color:#FFF !important;}
.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;
  background-color: transparent;
  font-size: 16px;
  padding: 8px;
}

.smoke-base {
  background: rgba(0,0,0,.3);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#90000000,endColorstr=#900000000);
}

.smoke-base .dialog {
  top: 25%;
  width: 40%;
  left: 50%;
  margin-left: -20%;
}

.smoke-base .dialog-inner {
  padding: 15px;

  color:#202020;
}

.smoke {
  background-color: rgba(255,255,255,0.95);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff,endColorstr=#ffffff);
	box-shadow: 0 2px 8px #666;
}


.dialog-buttons button {
  background-color: rgba(0,0,0,.85);
  filter:...

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