JSFiddle - React, Tailwind, and code Playground
by Andrew Lyndem
August 17, 2015
HTML
<a class="btn btn-primary" onclick="javascript:smoke.confirm('Join the Quest for the Best!<br/>Win a Premium Backpack or<br/>possibly a Multi City Flight', 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
});">Contest</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: 65% !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) and (max-width:1400px){
.smoke-base .dialog{
width: 50% !important;
left: 45% !important;
margin-left: 0px !imporant;
}
}
@media (min-width: 1400px) and (max-width: 1661px){
.smoke-base .dialog {
top: 25%;
width: 30% !important;
left: 55% !important;
margin-left: -20%;
}
.dialog-buttons button{
margin: 0px 20px !imporant;
}
}
@media (min-width: 1662px) and (max-width: 1900px){
.smoke-base .dialog {
top: 25%;
width: 25% !important;
left: 55% !important;
margin-left: -20%;
}
}
@media (min-width: 1901px) and (max-width: 2100px){
.smoke-base .dialog {
top: 25%;
width: 25% !important;
left: 37% !important;
margin-left: -20%;
}
}
@media (min-width: 2101px) and (max-width: 2500px){
.smoke-base .dialog {
top: 25%;
width: 22% !important;
left: 40% !important;
margin-left: -20%;
}
}
@media (min-width: 2501px) and (max-width: 2800px){
.smoke-base .dialog {
top: 25%;
width: 20% !important;
left: 40% !important;
margin-left: -20%;
}
}
@media (min-width: 2801px){
.smoke-base .dialog {
top: 25%;
width: 15% !important;
left: 42% !important;
margin-left: -20%;
}
}
.smoke-base {
position: fixed;
top: 0;
left: 0;
...
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...