<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/> <!-- Modal --> <div class="modal fade" id="AdPopup" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered" role="document"> <div id="ad_content" class="modal-content"> <img src="https://picsum.photos/350/500" height="350" weight="500"> </div> <a id="ad_close_btn" data-dismiss="modal" aria-label="Close" aria-hidden="true"> <i class="fas fa-times"></i> </a> </div> </div>

#ad_content{ padding:0px; border-radius:0px; } #ad_close_btn{ position:absolute; top:-5px; right:-5px; height: 30px; line-height: 25px; width: 30px; border-radius: 50%; background-color: #fff; text-align: center; display:none; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } #ad_content:hover + #ad_close_btn{ display:inline; } #ad_close_btn > i{ color:#000000; }

$(document).ready(function(){ $('#AdPopup').modal('show'); });