Mensagens de Alerta com Bootstrap

This is a simple Bootstrap skeleton. You can fork it to get a ready to use Bootstrap fiddle.

by edgardleal

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<div class="panel panel-default">
    <div class="panel-heading">
       <div class="panel-title">
           Painel
       </div>
    </div>
    <div class="panel-body">
        <form action="" class="form form-default" method="POST">
      
        </form>
    </div>
    <div class="panel-footer">
        
    </div>
</div>

CSS

@import url('http://getbootstrap.com/dist/css/bootstrap.css');

JavaScript

function log(text){
    $('.panel-footer').text(text);
} 

$('.alert').alert();

    var Info = {
    		root : $('body'),
    		timeout : 5000,
    		icons : {
				success : 'glyphicon-ok-sign',
				info : 'glyphicon-ok-sign',
				warning : 'glyphicon-exclamation-sign',
				danger : 'glyphicon-exclamation-sign',
        	},
    		setRoot : function(element){
    			if(element)
    				if(element.length)
    					this.root = element;
    				else
    					this.root = $(element);
    		},
    		create : function(text, type){
    			var obj = $('<div class="alert alert-' + type + '"> ' + 
    				    '<span class="glyphicon ' + this.icons[type] + '"></span> ' +
    				    '</div> ');
    		    obj.html(obj.html() + text)
    		      .click(function(){
    				  $(this).fadeOut(function(){$(this).remove();});
    			   });
    			this.root.prepend(obj);
    			setTimeout(function(){
    				obj.fadeOut(function(){$(this).remove();})
        		}, this.timeout);
        	},
    		success : function(text){
				this.create(text, 'success');
    		},
    		alert : function(text){
				this.create(text, 'info');
    		},
    		warning : function(text){
				this.create(text, 'warning');
    		},
    	    error : function(text){
				this.create(text, 'danger');
    		}
    	};

Info.alert('Ok');
Info.warning('Ok');
Info.error('Ok');
Info.success('Ok');