Friday, September 13, 2013

Custom Alert Box for HTML using jQuery

This is good and simple jQuery Custom Alert Box.




You can use this jQuery free and easily.
You can download files related to this jQuery from here.

This is how it works.
My Project Folder Structure looks liks this.


in the css folder, msgBoxLight.css
in the images folder, there icons for alert box icon to be display.
alert.png, confirm.png, error.png, info.png
in the js folder, jquery.msgBox.js, jquery-1.8.0.min.js
and in the views folder, you php or html content.

This is how to use code and display custom messages simply

Just a Message Box.
<html>
<head>
<script src="../../js/jquery-1.8.0.min.js" type="text/javascript"></script>
<script src="../../js/jquery.msgBox.js" type="text/javascript"></script>
<link href="../../css/msgBoxLight.css" rel="stylesheet" type="text/css">
</head>
<body>
<input type='submit' onclick='$.jQuery.msgBox({
    title:"Your Title Here",
    content:"Your Message Here."
});' />
</body>
</html>

To show a Information Message Box,
$.jQuery.msgBox({
    title:"Your Title Here",
    content:"Your Information Text Here",
    type:"info"
});


Option Box,
$.msgBox({
    title: "Are You Sure",
    content: "Is this what are you searching for.",
    type: "confirm",
    buttons: [{ value: "Yes" }, { value: "No" }, { value: "Cancel"}],
    success: function (result) {
        if (result == "Yes"{
            alert("OK. Thanks God. You Got it.");
        }
    }
});

No comments:

Post a Comment