Sunday, February 4, 2018

Skptricks CSS html html5 web development How to create alert messages with CSS

How to create alert messages with CSS

by on February 04, 2018 in , , ,
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 ?



By at
Tags: , , ,

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)