Skip to content
This repository has been archived by the owner on Mar 19, 2020. It is now read-only.

Home

Jump to bottom
Ukjin Yang edited this page Dec 12, 2013 · 17 revisions

jQuery MsgBox 0.7.4 Beta

The Message box for web, Firefox style, User notification made simple.

(MIT License)

한국어 문서는 이곳을 참조하세요.

Basic Usage

$.alert(message,callback) : normal alert

message : alert message
callback : a function that call after user clicked ok button.
	function(){
	    //'this' keyword scopes alert container.
	}

$.confirm(message,callback) : normal confirm

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

$.prompt(message,value,callback,ispassword) : normal prompt alert

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 'undefined' value. NOT NULL. UNDEFINED.
	    //when user input no word in prompt value and clicked ok, value arg will provide empty string.
	    //'this' keyword scopes alert container.
	}

Advenced Usage

$.msgbox(message,options) : A prototype of jQuery msgbox function.

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

$.msgbox.strings

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

$.msgbox.css

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)

$.msgbox.onresize

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

Styling Guide

You can apply own style of MsgBox. It's 2 way of set you style, javascript way and css way.

Set style using Javascript

see css property of $.msgbox.css

Set style using CSS

If you want set style as CSS, you can set

	<link class="msgbox-style" />
	<!-- or -->
	<style class="msgbox-style" type="text/css"></style>

OK. Let's see below.

msgbox-style

div.msgbox-modal : Yes. just modal background.
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.

Tested Browser

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.4 or above. (delegate method used, remove Browser compatibility for support jQuery over 1.8)

Known Issues

jQuery MsgBox is NOT awaiting 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.

Clone this wiki locally