Sunday, February 4, 2018

How to create alert messages with CSS

Error, Success, Warning, and Info Messages with CSS

In this tutorial we are going to learn How to create alert messages with CSS. This alert messages are used to notify the user about current status of their request. Here we have created four different type of alert messages :
  1. Error
  2. Success
  3. Warning
  4. Information 

How To Create an Alert Message Box

Lets see the complete example to display CSS Alert Messages when user click on buttons and hide the Alert Messages when user click on "X" Symbol.



<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <style>
        .alert {
            padding: 10px;
            color: white;
            opacity: 1;
            transition: opacity 0.6s;
            margin-bottom: 15px;
            width: 400px;
            display: none;
        }
        .alert.error {
            background-color: #f44336;
        }
        .alert.success {
            background-color: #4CAF50;
        }
        .alert.info {
            background-color: #2196F3;
        }
        .alert.warning {
            background-color: #ff9800;
        }
        .closebtn {
            margin-left: 15px;
            color: white;
            font-weight: bold;
            float: right;
            font-size: 22px;
            line-height: 10px;
            cursor: pointer;
            transition: 0.3s;
        }
        .closebtn:hover {
            color: black;
        }
        button {
            border: none;
            cursor: pointer;
            color: white;
            padding: 10px 30px;
            border-radius: 2px;
            font-size: 22px;
            box-shadow: 2px 2px 4px rgba(0, 0, 0, .4);
            background: #5cd38c;
            margin: 3px;
        }
    </style>

    <script>
        $(document).ready(function() {

            // on click remove alert message
            $(document).on('click', 'div', function() {
                $(this).hide();
            });

            $(".error").on("click", function() {
                $(".error").show();
            });
            $(".success").on("click", function() {
                $(".success").show();
            });
            $(".info").on("click", function() {
                $(".info").show();
            });
            $(".warning").on("click", function() {
                $(".warning").show();
            });
        });
    </script>

</head>

<body>

    <h2>Alert Messages</h2>
    <p> when user click on button, it will display alert message </p>
    <p> when user click on X, it will hide alert message </p>
    <div class="alert error">
        <span class="closebtn">×</span>
        <strong>Danger!</strong> It's a Invalid Request.
    </div>

    <div class="alert success">
        <span class="closebtn">×</span>
        <strong>Success!</strong> Your Request Processed successfully.
    </div>

    <div class="alert info">
        <span class="closebtn">×</span>
        <strong>Information! We are providing new offers</strong> .
    </div>

    <div class="alert warning">
        <span class="closebtn">×</span>
        <strong>Warning!</strong> Invalid Request, please contact adminstration.
    </div>

    <button class="error"> Error </button>
    <button class="success"> Success </button>
    <button class="info"> Information </button>
    <button class="warning"> Warning </button>
</body>

</html>

Output:

This is all about Error, Success, Warning, and Information Alert Messages with CSS. Please free to ask questions in comment box if any ?



No comments:

Post a Comment