syedowaisali / js-metro-alert

Javascript metro alert style

#JS Metrol Alert

js metro alert is simple replace with browser default alert plus add extra functionality with handy use.

##Usage

First, load jQuery (v1.4 or greater) and the plugin.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/crystal-metro-alert-1.0.min.js" type="text/javascript" charset="utf-8"></script>

##Screenshot

##Options

Metro Alert accepts several options to customize its behaviour:

###theme (String)

If you use metro alert with different style for other purpose you can use styles option default is metroStyle.INFO.

####Styles

metroStyle.INFO
metroStyle.WARNING
metroStyle.SUCCESS
metroStyle.ERROR

metroAlert("Info style alert", {
    theme: metroStyle.INFO
});

###buttonText (String)

Change default button text with your own text.

metroAlert("Button text changed", {
    buttonText: "Close"
});

###showCloseButton (Boolean)

Control close button from boolean type default true.

metroAlert("Close button shown", {
    showCloseButton: true
});

###autoClose (Boolean)

Control auto close alert metro type default false.

metroAlert("Auto close", {
    autoClose: true
});

###autoCloseTime (Integer)

Control auto close delay time default 5000 // 5 seconds.

metroAlert("Auto close after 3 seconds", {
    autoClose: true,
    autoCloseTime: 3000 // 3 seconds
});

###updateMetro (Boolean)

If you want to update text, style and etc without closing metro alert add this property with true value default false.

metroAlert("Update metro alert text", {
    buttonText: "Cancel",
    updateMetro: true
});

###layerClass (String)

Change back layer class with new class default metro-alert.

metroAlert("Update metro alert text", {
    layerClass: "my-back-layer-class"
});

###boxClass (String)

Change metro box class with new class default metro-alert-box.

metroAlert("Update metro alert text", {
    boxClass: "my-metro-box-class"
});

###onInit (Event)

Trigger before initialize metro alert.

metroAlert("Alert", {
    onInit: function(){
        // insert logic
    }
});

###onCloseInit (Event)

Trigger when user click close button before close metro alert.

metroAlert("Alert", {
    onCloseInit: function(){
        // insert logic
    }
});

###onCloseComplete (Event)

Trigger when completely closed metro alert.

metroAlert("Alert", {
    onCloseComplete: function(){
        // insert logic
    }
});

##Authors

• Syed Owais Ali original Author