<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>

​

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js' type='text/javascript'></script>

​

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css"/>

​

<style>

/* Modal dialog by hung1001 */

.modal{display:none;position:fixed;z-index:100;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgb(0,0,0);background-color:rgba(0,0,0,0.8)}

.modal-content{background-color:#fefefe;padding:20px;border:1px solid #888;width:50%;left:50%;top:50%;position:relative;-webkit-transform:translateX(-50%) translateY(-50%)!important;transform:translateX(-50%) translateY(-50%)!important}

.close{color:#000;float:right;font-size:28px;font-weight:bold;position:relative;top:-15px}

.close:hover,.close:focus{color:#000;text-decoration:none;cursor:pointer}

.myBtn{cursor:pointer}

</style>

​

<div id="myModal" class="modal">

    <div class="modal-content">

        <span class="close">×</span>

        <p>Viết thông báo vào đây..</p>

    </div>

</div>

<center><br />

<button class="myBtn btn btn-primary">Button mở thông báo</button><br /><br />

<a class="myBtn" href="javascript:void(0)">Liên kết mở thông báo</a><br /><br />

<a class="myBtn" href="javascript:void(0)"><i class="fa fa-bell"></i></a>

</center>

​

<script>

    $(".myBtn").click(function() {

        $("#myModal").fadeIn(400).css({

            display: 'block'

        });;

    });

    $(".close").click(function() {