In this article we are going give an example of alert message box or how to use confirm message box using jQuery with example.


The alert.js use to show mobile-friendly popup boxes.

alert.js is a lightweight jQuery/Zepto plugin used to create cross-browser, mobile-friendly popup boxes that meet all your needs about confirm/alert dialogs and toast-style notifications.

Click here to download it.

Let’s see an example of alert.js:

  <!DOCTYPE html>

    <meta charset="utf-8">
    <title>jQuery alert.js Demos</title>
    <script src="//"></script>
    <script src="alert.min.js"></script>
        p {
            font-size: 14px;
            line-height: 16px;
            color: #777;

        body {
            background-color: #F7F7F7;
            font-family: 'Roboto';

        .hide {
            visibility: hidden;
            height: 0;
            width: 0;

        code {
            overflow: auto !important;

        pre {
            padding: 1px !important;
            width: 100%;

        .btn {
            border: 1px solid #ccc;
            color: #666;
            display: inline-block;
            padding: 3px 6px;
            cursor: pointer;
            font-size: 14px;

            .btn:hover {
                border-color: #aaa;
                color: #333;

        .new:before {
            content: 'New';
            color: red;
            text-shadow: 0 0 5px yellow;
            font-weight: bold;
            padding: 0 5px;

        .container {
            margin-top: 70px;


    <div class="btn" onclick="alert()">Alert Dialog</div>
    <div class="btn" onclick="confirm()">Confirm Dialog</div>
    <div class="btn new" onclick="confirmNew()">Close When Click On Cancel Button.</div>
    <div class="btn new" onclick="ToastMessage()">Toast Message</div>
        var alert = function () {
            $.alert('This is an alert message', function (a) { $.alert('You clicked confirm') })
        var confirm = function () {
            $.confirm('This is a confirmation message',
                function (a) {
                    $.alert('You just clicked' + (a ? 'Okey' : 'Cancel')
        var confirmNew = function () {
            $.confirm('The dialog CANNOT be closed.', function (e) {
                if (!e) return;
                this.find('.alert_content').html('The dialog CANNOT be closed untile you click CANCEL button.');
                return false;
        var ToastMessage = function ()
            var showdef = Math.random() > 0.5;
            $.tips(showdef ? 'Auto close after 2 seconds if no duration is specified.'
                : 'This is a toast message that auto hides after 5 seconds',
                showdef ? 50000 : 50000)


how to create message alert box using jquery

 I hope this article will help to you after reading.

  Modified On Sep-07-2019 12:18:16 AM

Leave Comment