Super Tiny jQuery Modal Dialog Box Plugin - ssDialog

ssDialog is a super tiny jQuery modal plugin that make it easier to create message or confirm boxes with one line of source code.

Features:

• Simple and easy to implement
• Cross browser. Supports almost all modern browsers even IE 7/8.
• Extremely clean. No animation. No overlay.
• Customizable via javascript and CSS
• The message can be passed in two forms "string" and jQuery object

Basic Usage:

1. Include jQuery javascript library and jQuery ssDialog plugin on the web page

<link href="css/jquery.ssdialog.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/jquery.ssdialog.js"></script>

2. The sample CSS for customizing your modal windows

.ssdialog {
position: fixed;
top: 30px;
left: 50%;
width: 274px;
margin-left: -140px;
border: 3px solid #FFF;
border-radius: 10px;
background: #000;
}
.ssdialog-message {
margin: 0;
padding: 20px 20px 5px 20px;
font-size: 14px;
line-height: 21px;
text-align: center;
color: #FFF;
}
.ssdialog-buttons {
padding: 20px 0;
}
.ssdialog-button {
color: #FFF;
font-weight: bold;
padding: 6px 15px;
text-decoration: none;
border: 2px solid #FFF;
border-radius: 4px;
font-size: 15px;
}
.ssdialog-buttons-1 .ssdialog-button {
float: none;
margin: 0 auto;
width: 80px;
}
.ssdialog-buttons-2 .ssdialog-button {
width: 60px;
}
.ssdialog-buttons-2 .ssdialog-button-cancel {
margin-left: 12%;
float: left;
}
.ssdialog-buttons-2 .ssdialog-button-ok {
margin-right: 12%;
float: right;
}

3. Call a button to trigger a modal window

<button id="demo1">Confirm Box Example</button>

4. Call the plugin with options

$(document).ready( function() {
	
$('button#demo1').click(function() {
$.ssdialog.alert($("<h2>jQueryScript.Net</h2>"));
});

});
</script>

---

This awesome jQuery plugin is developed by kjirou. For more Advanced Usages, please check the demo page or visit the official website.