toastmessage

HTML

<script src="http://ashishblog.com/ash/jquery.toastmessage.js"></script>
     <script type="text/javascript"> 
 

        function showSuccessToast() { 
            $().toastmessage('showSuccessToast', "Success Dialog which is fading away ..."); 
        } 
        function showStickySuccessToast() { 
            $().toastmessage('showToast', { 
                text: 'Success Dialog which is sticky', 
                sticky: true, 
                position: 'top-left', 
                type: 'success', 
                closeText: '', 
                close: function () { 
                    console.log("toast is closed ..."); 
                } 
            }); 
 

        } 
        function showNoticeToast() { 
            $().toastmessage('showNoticeToast', "Notice  Dialog which is fading away ..."); 
        } 
        function showStickyNoticeToast() { 
            $().toastmessage('showToast', { 
                text: 'Notice Dialog which is sticky', 
                sticky: true, 
                position: 'top-left', 
                type: 'notice', 
                closeText: '', 
                close: function () { console.log("toast is closed ..."); } 
            }); 
        } 
        function showWarningToast() { 
            $().toastmessage('showWarningToast', "Warning Dialog which is fading away ..."); 
        } 
        function showStickyWarningToast() { 
            $().toastmessage('showToast', { 
                text: 'Warning Dialog which is sticky', 
                sticky: true, 
                position: 'middle-left', 
                type: 'warning', 
                closeText: '', 
                close: function () { 
                    console.log("toast is closed ..."); 
                } 
            }); 
        } 
        function showErrorToast() { 
            $().toastmessage('showErrorToast', "Error Dialog which is fading away ..."); 
        } 
        function showStickyErrorToast() { 
           ...

CSS

.toast-container {     width: 280px;     z-index: 9999; }   * html .toast-container {     position: absolute;         }   .toast-item {     height: auto;     background: #333;     opacity: 0.9;     -moz-border-radius: 10px;     -webkit-border-radius: 10px;     color: #eee;     padding-top: 20px;     padding-bottom: 20px;     padding-left: 6px;     padding-right: 6px;     font-family: lucida Grande;     font-size: 14px;     border: 2px solid #999;     display: block;     position: relative;     margin: 0 0 12px 0; }  .toast-item p {     text-align: left;     margin-left: 50px; }  .toast-item-close {     background:url(http://ashishblog.com/ash/images/close.gif);     width:22px;     height:22px;     position: absolute;     top:7px;     right:7px; }  .toast-item-image {     width:32px;     height: 32px;     margin-left: 10px;     margin-top: 10px;     margin-right: 10px;     float:left; }  .toast-item-image-notice {     background:url(http://ashishblog.com/ash/images/notice.png); }  .toast-item-image-success {     background:url(http://ashishblog.com/ash/images/success.png); }  .toast-item-image-warning {     background:url(http://ashishblog.com/ash/images/warning.png); }  .toast-item-image-error {     background:url(http://ashishblog.com/ash/images/error.png); }   /**   * toast types   *   * pattern: toast-type-[value]  * where 'value' is the real value of the plugin option 'type'  *   */ .toast-type-notice {     color: white;     }  .toast-type-success {     color: white;     }  .toast-type-warning {     color: white;     border-color: #FCBD57; }  .toast-type-error {     color: white;     border-color: #B32B2B; }  /**   * positions   *   * pattern: toast-position-[value]  * where 'value' is the real value of the plugin option 'position'  *   */ .toast-position-top-right {     position: fixed;     top: 20px;     right: 20px; }  .toast-position-center {     position: fixed;     left: 50%;     margin-left: -140px;     margin-top: -40px;     top: 50%; } ...