jQuery Impromptu is an extention to help provide a more pleasant way to spontaneously prompt a user for input. More or less this is a great replacement for an alert, prompt, and confirm. Not only does it replace these but it also allows for creating forms within these controls. This is not intended to be a modal replacement, just a quick tool to prompt user input in a fashionable way.
Has Impromptu been helpful to you?
Version 2.8
Last updated on 12/18/2009
jQuery Impromptu is currently available for use in all personal or commercial projects under both MIT and GPL licenses. This means that you can choose the license that best suits your project, and use it accordingly.
JQuery Impromptu is minified using JS Minifier.
There are many options with Impromptu:
$.prompt( msg , options )
The message can either be a string, or an object of "states". Each state has the following properties:
var temp = {
state0: {
html:'test 1...',
buttons: { Cancel: false, Next: true },
focus: 1,
submit:function(v,m){ }
},
state1: {
html:'test 2..',
buttons: { Back: -1, Exit: 0, Next: 1 },
focus: 2,
submit:function(v,m){ }
}
};
If a string is passed as the message in place of a state, buttons, focus, and submit will be substituted from the options below (just as with earlier versions of Impromptu).
returns a jQuery object of the prompt box and fade. Note: This has changed to a container with everything within it, fade and prompt box.
jQuery.prompt.setDefaults({
prefix: 'myPrompt',
show: 'slideDown'
});
jQuery.prompt.setStateDefaults({
buttons: { Ok:true, Cancel:false },
focus: 1
});
Below is an example of the css format that could be used with Impromptu. You dont need to use any positioning and transparency attributes as Impromptu takes care of those for you.
Each element within your css should resemble the prefix option you supply to the function call. If a prefix isn't supplied jqi is used. The CSS for all examples can be found in examples.css
.jqifade{
position: absolute;
background-color: #aaaaaa;
}
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;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
padding: 7px;
}
div.jqi .jqicontainer{
font-weight: bold;
}
div.jqi .jqiclose{
position: absolute;
top: 4px; right: -2px;
width: 18px;
cursor: default;
color: #bbbbbb;
font-weight: bold;
}
div.jqi .jqimessage{
padding: 10px;
line-height: 20px;
color: #444444;
}
div.jqi .jqibuttons{
text-align: right;
padding: 5px 0 5px 0;
border: solid 1px #eeeeee;
background-color: #f4f4f4;
}
div.jqi button{
padding: 3px 10px;
margin: 0 10px;
background-color: #2F6073;
border: solid 1px #f4f4f4;
color: #ffffff;
font-weight: bold;
font-size: 12px;
}
div.jqi button:hover{
background-color: #728A8C;
}
div.jqi button.jqidefaultbutton{
background-color: #BF5E26;
}
.jqiwarning .jqi .jqibuttons{
background-color: #BF5E26;
}
To simply call Impromptu like you would a regular alert command:
$.prompt('Example 1');
To add a a couple extra buttons with different values:
$.prompt('Example 2',{ buttons: { Ok: true, Cancel: false } });
To change the opacity of the fading overlay:
$.prompt('Example 3',{ opacity: 0.2 });
To change the default focused button:
$.prompt('Example 4',{ buttons: { Ok: true, Cancel: false }, focus: 1 });
To change the css name use prefix:
$.prompt('Example 5',{ prefix: 'impromptu' });
To change the prompt show effect:
$.prompt('Example 6',{ show:'slideDown' });
To use your own jQuery effect:
$.fn.extend({
dropIn: function(speed, callback){
var $t = $(this);
if($t.css("display") == "none"){
eltop = $t.css('top');
elouterHeight = $t.outerHeight(true);
$t.css({ top: -elouterHeight, display: 'block' }).animate({ top: eltop },speed,'swing', callback);
}
}
});
$.prompt('Example 7',{ show:'dropIn' });
To add a callback function:
function mycallbackfunc(v,m,f){
$.prompt('i clicked ' + v);
}
$.prompt('Example 8',{ callback: mycallbackfunc });
The callback function has three parameters.
If a form were in the prompt you could access its elements within this second parameter. The values of the form fields are gathered for you within the third parameter.
var txt = 'Please enter your name:<br />
<input type="text" id="alertName"
name="alertName" value="name here" />';
function mycallbackform(v,m,f){
$.prompt(v +' ' + f.alertName);
}
$.prompt(txt,{
callback: mycallbackform,
buttons: { Hey: 'Hello', Bye: 'Good Bye' }
});
The submit function can prevent the box from closing and the callback function from being called by returning false. This is great for validating input before closing the prompt. You must always return true or false with this function.
var txt = 'Try submitting an empty field:<br />
<input type="text" id="alertName"
name="myname" value="" />';
function mysubmitfunc(v,m,f){
an = m.children('#alertName');
if(f.alertName == ""){
an.css("border","solid #ff0000 1px");
return false;
}
return true;
}
$.prompt(txt,{
submit: mysubmitfunc,
buttons: { Ok:true }
});
Impromptu plays very nicely with other jQuery extensions like the jQuery Corner Plugin
$.prompt('Example 11',{prefix:'impromptu'}).children('#impromptu').corner();
Give it a complete make over! Some buttons, a different prefix, a new entrance effect and some rounded corners! The css is in the CSS file for this page and the slideDown effect comes in the jQuery library.
$.prompt('Example 12<p>Save these settings?</p>',{
buttons:{ Apply:1,Maybe:2,Never:3 },
prefix:'colsJqi',
}).children('#colsJqi').corner();
A nice light brown theme.
var brown_theme_text = '<h3>Example 13</h3>'+
'<p>Save these settings?</p>'+
'<img src="images/help.gif" alt="help" '+
'class="helpImg" />';
$.prompt(brown_theme_text,{
buttons:{Ok:true,Cancel:false},
prefix:'brownJqi'
});
A nice clean blue theme.
$.prompt('Hello World!!',{
buttons:{Ok:true,Cancel:false},
prefix:'cleanblue'
});
A nice clean blue theme with an Ext feel.
$.prompt('Hello World!!',{
buttons:{Ok:true,Cancel:false},
prefix:'extblue'
});
A smooth theme based on the default theme.
$.prompt('Hello World!!',{
buttons:{Ok:true,Cancel:false},
prefix:'jqismooth'
});
A simple States example. For a more detailed example please see this States Demo
var statesdemo = {
state0: {
html:'test 1.<br />test 1..<br />test 1...',
buttons: { Cancel: false, Next: true },
focus: 1,
submit:function(v,m,f){
if(!v) return true;
else
$.prompt.goToState('state1');
return false;
}
},
state1: {
html:'test 2',
buttons: { Back: -1, Exit: 0 },
focus: 1,
submit:function(v,m,f){
if(v==0) $.prompt.close()
else if(v=-1)
$.prompt.goToState('state0');
return false;
}
}
};
$.prompt(statesdemo);