JSFiddle - React, Tailwind, and code Playground
by apoucoz
CSS
/*
------------------------------
Impromptu
------------------------------
*/
.jqifade{
position: absolute;
background-color: #777777;
}
div.jqi{
width: 400px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
position: absolute;
background-color: #ffffff;
font-size: 11px;
text-align: left;
border: solid 1px #eeeeee;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
padding: 7px;
}
div.jqi .jqicontainer{
}
div.jqi .jqiclose{
position: absolute;
top: 4px; right: -2px;
width: 18px;
cursor: default;
color: #bbbbbb;
font-weight: bold;
}
div.jqi .jqistate{
background-color: #fff;
}
div.jqi .jqititle{
padding: 5px 10px;
font-size: 16px;
line-height: 20px;
border-bottom: solid 1px #eeeeee;
}
div.jqi .jqimessage{
padding: 10px;
line-height: 20px;
color: #444444;
}
div.jqi .jqibuttons{
text-align: right;
margin: 0 -7px -7px -7px;
border-top: solid 1px #e4e4e4;
background-color: #f4f4f4;
border-radius: 0 0 6px 6px;
-moz-border-radius: 0 0 6px 6px;
-webkit-border-radius: 0 0 6px 6px;
}
div.jqi .jqibuttons button{
margin: 0;
padding: 15px 20px;
background-color: transparent;
font-weight: normal;
border: none;
border-left: solid 1px #e4e4e4;
color: #777;
font-weight: bold;
font-size: 12px;
}
div.jqi .jqibuttons button.jqidefaultbutton{
color: #489afe;
}
div.jqi .jqibuttons button:hover,
div.jqi .jqibuttons button:focus{
color: #287ade;
outline: none;
}
.jqiwarning .jqi .jqibuttons{
background-color: #b95656;
}
/* sub states */
div.jqi .jqiparentstate::after{
background-color: #777;
opacity: 0.6;
filter: alpha(opacity=60);
content: '';
position: absolute;
top:0;left:0;bottom:0;right:0;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}
div.jqi .jqisubstate{
position: absolute;
top:0;
left: 20%;
width: 60%;
padding: 7px;
border: solid 1px #eeeeee;
border-top: none;
border-radius: 0 0 6px 6px;
-moz-border-radius: 0 0 6px...JavaScript
/*
* jQuery Impromptu
* By: Trent Richardson [http://trentrichardson.com]
* Version 5.0
* Last Modified: 08/24/2013
*
* Copyright 2013 Trent Richardson
* You may use this project under MIT or GPL licenses.
* http://trentrichardson.com/Impromptu/GPL-LICENSE.txt
* http://trentrichardson.com/Impromptu/MIT-LICENSE.txt
*
*/
(function($) {
/**
* setDefaults - Sets the default options
* @param message String/Object - String of html or Object of states
* @param options Object - Options to set the prompt
* @return jQuery - container with overlay and prompt
*/
$.prompt = function(message, options) {
// only for backwards compat, to be removed in future version
if(options !== undefined && options.classes != undefined && typeof options.classes === 'string'){
options = { box: options.classes };
}
$.prompt.options = $.extend({},$.prompt.defaults,options);
$.prompt.currentPrefix = $.prompt.options.prefix;
var opts = $.prompt.options,
$body = $(document.body),
$window = $(window);
//build the box and fade
var msgbox = '<div class="'+ $.prompt.options.prefix +'box '+ opts.classes.box +'">';
if(opts.useiframe && ($('object, applet').length > 0)) {
msgbox += '<iframe src="javascript:false;" style="display:block;position:absolute;z-index:-1;" class="'+ opts.prefix +'fade '+ opts.classes.fade +'"></iframe>';
} else {
msgbox +='<div class="'+ opts.prefix +'fade '+ opts.classes.fade +'"></div>';
}
msgbox += '<div class="'+ opts.prefix +' '+ opts.classes.prompt +'">'+
'<form action="javascript:false;" onsubmit="return false;" class="'+ opts.prefix +'form">'+
'<div class="'+ opts.prefix +'close '+ opts.classes.close +'">'+ opts.closeText +'</div>'+
'<div class="'+ opts.prefix +'states"></div>'+
'</form>'+
'</div>'+
'</div>';
$.prompt.jqib = $(msgbox).appendTo($body);
$.prompt.jqi = $.prompt.jqib.children('.'+ opts.prefix);//.data('jqi',opts);
$.prompt.jqif =...