Notification Plugin Html, Css or Js Simple Code..

For supporting file is use in online link below :-

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>

HTML

 <div class="container">

        <!--<h1>check box check and value show in alert</h1>-->

        <div class="row">

            <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12"><br /><br /><br /><br />

                <div class="outer-div">

                    <div class="notification-bg">

                        <p> hello this the message has been submited sucessfull</p>

                    </div>

                    <div class="cross">X</div>

                </div><br /><br /><br /><br /><br /><br /><br /><br /><br /><button class="btn btn-sucess">notification</button>

            </div>

        </div>

    </div>

    

   

Css

-----------------

<style type="text/css">

        .notification-bg {

            background: #0ace07;

            padding: 18px 20px;

            border: 1px solid #07a505;

            border-radius: 3px;

        }

        .notification-bg>p {

            color: #fff;

            margin: 0px;

        }

        .cross {

            float: right;

            width: 40px;

            height: 40px;

            border-radius: 50%;

            color: #fff;

            background: #34740b;

            position: ;

            margin-top: -76px;

            margin-right: -16px;

            text-align: center;

            cursor: pointer;

        }

        .outer-div {

            float: left;

            width: 100%;

            position: relative;

            display: none;

        }

    </style>

Js

-----------------

<script type="text/javascript">

        $(document).ready(function() {

            $('.btn-sucess').click(function() {

                $('.outer-div').fadeIn(1000).delay(3000).fadeOut();

            });

            $('.cross').click(function() {

                $('.outer-div').hide();

            });

        });

    </script>