---
title: "how to create message alert box using jquery"  
description: "alert.js is a jQuery/Zepto plugin used to create mobile-friendly popup boxes that meet all your needs about confirm/alert dialogs and toast-style noti"  
author: "Anonymous User"  
published: 2018-06-08  
updated: 2019-12-20  
canonical: https://www.mindstick.com/articles/12940/how-to-create-message-alert-box-using-jquery  
category: "jquery"  
tags: ["jquery"]  
reading_time: 4 minutes  

---

# how to create message alert box using jquery

## [Introduction](https://www.mindstick.com/blog/359/iphone-development-introduction):

In this [article](https://yourviews.mindstick.com/view/84667/how-congress-government-misused-the-article-356) we are going give an example of alert [message](https://yourviews.mindstick.com/view/81772/what-is-whatsapp-vcard-scary-message-how-to-safe-it) box or how to use [confirm](https://answers.mindstick.com/qa/115761/facebook-account-locked-with-confirm-your-identity-loop) message box using jQuery with example.

## Description:

The alert.js use to show [mobile](https://yourviews.mindstick.com/view/84860/why-website-load-time-on-mobile-matters)-[friendly](https://www.mindstick.com/articles/23189/5-sustainable-eco-friendly-products-to-look-out-for) popup boxes.

alert.js is a lightweight jQuery/Zepto [plugin](https://www.mindstick.com/articles/23236/institute-management-for-wordpress-plugin) used to create cross-[browser](https://www.mindstick.com/articles/323165/top-10-fastest-internet-browsers-in-the-world), mobile-friendly popup boxes that meet all [your needs](https://www.mindstick.com/articles/12875/blunders-you-must-avoid-while-hiring-java-developers-to-get-the-best-fulfilling-your-needs) about confirm/alert dialogs and toast-style notifications.

Click here to [download](https://www.mindstick.com/blog/114673/download-hungry-shark-evolution-mod-apk-unlimited-money) it.

Let’s see an example of alert.js:

```
  <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery alert.js Demos</title>
    <script src="//code.jquery.com/jquery.min.js"></script>
    <script src="alert.min.js"></script>
    <style>
        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;
        }
    </style>

</head>
<body>

    <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>
    <script>
        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)
        }
    </script>
</body>
</html>
```

Output:

![how to create message alert box using jquery](https://www.mindstick.com/mindstickarticle/16f47f6b-2323-4534-b3c7-02c89fc67505/images/4c7f7106-0c22-42e5-a8dc-637e0539224d.png)

I hope this article will help to you after reading.

\

---

Original Source: https://www.mindstick.com/articles/12940/how-to-create-message-alert-box-using-jquery

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.
