Home
The Message box for web, Firefox style, User notification made simple.
(MIT License)
message : alert message
callback : a function that call after user clicked ok button.
function(){
//'this' keyword scopes alert container.
}
message : confirm message
callback : a function that call after user click ok or cancel button
function(bool){
//bool is a boolean value that true if user click ok, false if user click cancel.
//'this' keyword scopes alert container.
}
message : prompt message
value : a string value that default prompt value.
callback : a function that call after user click ok or cacel button
function(value){
//value will provide user prompt value to your callback function.
//when user clicked ok, value arg will provide user defined value.
//but when user clicked cacel, value arg will provide 'null' value. same as prompt().
//when user input no word in prompt value and clicked ok, value arg will provide empty string.
//'this' keyword scopes alert container.
}
ispassword : If set true, input box will masked like password input. just you know, [type=password].
message : A message of msgbox.
options : A options.
submit : callback function. default is null.
confirm : the msgbox will user confirm box, true. otherwise, false. default is false.
input : the msgbox will prompt, give true or value string for default input value. If you want not this, just set false or not set.
ok : a string defined alert ok button. default is $.msgbox.strings.ok
yes : a string defined confirm or prompt ok button. $.msgbox.strings.yes
no : a string defined confirm or prompt cancel button. $.msgbox.strings.no\
onresize : a event when window size changed.
function(io){
// 'io' is internal event bag for msgbox.
// 'this' keyword point in alert container. plain DOM. not jQuery.
// this.modal : background modal container.
// this.msg : a child container that contains your message.
// this.inbox : a child container that contains input box. prompt only.
// this.buttons : a child container that contains buttons.
}
onopen : a event when msgbox wan opened. see $.msgbox.onopen
onclose : a event when msgbox getting closed. see $.msgbox.onclose
static member, A default msgbox strings. you can change this globally.
.ok : a string defined alert ok button. default is 'OK'.
.yes : a string defined confirm or prompt ok button. default is 'OK'.
.no : a string defined confirm or prompt cancel button. default is 'Cancel'.
static member, A default msgbox style. If you want manual setting a msgbox style, just set this property. or you can use CSS style.
ui : msgbox main container
modal : background modal container
msg : message container
buttons : buttons container
inbox : contains input box (prompt only)
input : a input box (prompt only)
static member, same as window.onresize event callback but affected for msgbox. same as onresize property of $.msgbox()
if you want not fire default onresize callback for responsive page, just set empty function $.msgbox.onresize = $.noop;
note : onresize for $.msgbox() > $.msgbox.onresize > default onresize callback
static member, same as onopen of $.msgbox() event. This property will fired when msgbox opened.
function(options){
//'this' will pointed to msgbox ui container. this.parentNode will get msgbox root container.
//options will get $.msgbox called with options.
//just callback. no returns.
}note : onopen for $.msgbox() > $.msgbox.onopen > default is not fired.
static member, same as onclose of $.msgbox() event. This property will fired before msgbox closing.
function(value){
//'this' will pointed to msgbox ui container. this.parentNode will get msgbox root container.
//value will get user requested value or button state.
//in prompt, If clicked OK, value will get a user input string. If clicked Cancel, value will get null.
//in confirm, value will get true when user clicked OK, false when user clicked Cancel.
//You can return deferred object to delay close for using own CSS or JS animations.
//you can use jquery common effect method such as .animation() or .slideUp() custom deferred in $.Deferred are available.
return $(this).slideUp('fast'); //example
//If you never return or not deferred object. msgbox will close instantly.
}note : onclose for $.msgbox() > $.msgbox.onclose > default is not fired.
you can close msgbox manually. first, you must get a msgbox container object. and see my example below.
var msgbox = $.alert('sample alert.');
setTimeout(function(){
msgbox.find('.msgbox-ok').trigger('click');
}, 5000); // msgbox will automated close after 5 seconds.I'll check out how to use msgbox more convenient. stay tuned.
You can apply own style of MsgBox. It's 2 way of set you style, javascript way and css way.
see css static property of $.msgbox
If you want set style as CSS, you can set
<link class="msgbox-style" />
<!-- or -->
<style class="msgbox-style" type="text/css"></style>Then, MsgBox will remove a default style. are you ready? Let's see below.
div.msgbox-modal : Yes. just modal background.
div.msgbox-container : Msgbox root container. for wrapping msgbox.
div.msgbox-ui : MsgBox main container.
div.msgbox-alert : Msgbox alert container with msgbox-ui.
div.msgbox-confirm : Msgbox confirm container with msgbox-ui.
div.msgbox-prompt : Msgbox prompt container with msgbox-ui.
div.msgbox-msg : contains your message.
div.msgbox-inbox : If you called prompt, this will contains text input box.
input.msgbox-input : The input box, prompt only.
div.msgbox-buttons : A place buttons in this.
button.msgbox-button : Just pointed all buttons.
button.msgbox-ok : OK button in alert, confirm, prompt.
button.msgbox-no : Cancel button in confirm, prompt.
now, Style yourself.
Internet Explorer 8 or above, Firefox 3 or above, Chrome 9 or above, Safari 3 or above.
NOT Supported Browser : Internet Explorer 7 or lower due to CSS issue. I'll never see these browsers.
jQuery 1.5 or above. (delegate method used, remove Browser compatibility for support jQuery over 1.8)
jQuery MsgBox is NOT waiting user confirmation while script running. you should give callback function to provide next process.
in IE under 8, will flick Msgbox when showing. It's a known issue but I can't figure out it. but I'll fix it.
in IE uner 8, when you set own style using inline CSS such as style tag, you MUST contain with type="text/css". It's IE restrict of dynamic style. not bug.