JSFiddle - React, Tailwind, and code Playground

by Reusablecode

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<div id="alert"></div>
<span class="label">Default [string as argument]</span>

<p>
    <button class="btn" onclick="jQuery(jQuery(this).parent()).alert('test alert');" type="button">Try it now</button>
</p>
<span class="label">Default [object as argument]</span>

<p>
    <button class="btn" onclick="jQuery(jQuery(this).parent()).alert({txt:'test alert'});" type="button">Try it now</button>
</p>
<span class="label label-info">Info</span>

<p>
    <button class="btn" onclick="jQuery(jQuery(this).parent()).alert({txt:'test alert',type:'info'});" type="button">Try it now</button>
</p>
<span class="label label-success">Success</span>

<p>
    <button class="btn" onclick="jQuery(jQuery(this).parent()).alert({txt:'test alert',type:'success'});" type="button">Try it now</button>
</p>
<span class="label label-warning">Warning</span>

<p>
    <button class="btn" onclick="jQuery(jQuery(this).parent()).alert({txt:'test alert',type:'warning'});" type="button">Try it now</button>
</p>
<span class="label label-important">Error</span>

<p>
    <button class="btn" onclick="jQuery(jQuery(this).parent()).alert({txt:'test alert',type:'error'});" type="button">Try it now</button>
</p>
<span class="label">Block error</span>

<p>
    <button class="btn" onclick="jQuery(jQuery(this).parent()).alert({txt:'test alert',type:'error',block:true});" type="button">Try it now</button>
</p>
<span class="label">Custom CSS class</span>

<p>
    <button class="btn" onclick="jQuery(jQuery(this).parent()).alert({txt:'Custom css class',class:'verdana',block:'no'});" type="button">Try it now</button>
</p>

CSS

.verdana {
    font-family:verdana;
    text-decoration:underline;
}

JavaScript

jQuery.fn.alert = function (props) {
    var defaults = {
        txt: '',
        type: 'info',
        block: false,
        class: '',
        closeBtn: '<button type="button" class="close" data-dismiss="alert">&times;</button>'
    }
    if (typeof props === 'string') {
        defaults.txt = props;
    }
    var opts = jQuery.extend({}, defaults, props);

    var $content = jQuery('<div/>')
        .addClass(opts.class)
        .addClass('alert')
        .addClass('alert-' + opts.type);

    if (opts.block && typeof opts.block === 'boolean') $content.addClass('alert-block');

    $content.html(opts.closeBtn + opts.txt);
    jQuery(this).prepend($content);
}