<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 ----------> <div class="container py-5 text-center"> <!-- Button trigger modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalAd"> open </button> </div> <!-- Modal --> <div class="modal fade" id="modalAd"> <div class="modal-dialog modal-bulletin" role="document"> <button type="button" class="close" data-dismiss="modal"></button> <div class="modal-content"> <img class="modal-bulletin-img" src="https://image.ibb.co/doM4OV/23fa31249b82d9f88a1af995e1684c8c.png" alt=""> <div class="modal-body"> <h3 class="text-success text-center">Free 500</h3> <p class="text-secondary">Stored value 5,000 to send you 10,000</p> </div> </div> </div> </div>

.modal-bulletin { position: relative; padding: 30px; width: 300px; } .modal-bulletin .close { cursor: pointer; position: absolute; width: 30px; height: 30px; left: 0; top: 0; opacity: 1; border-radius: 50%; border: 1px solid #fff; padding: 1%; } .modal-bulletin .close:before, .modal-bulletin .close:after { content: ""; display: block; height: 1.4px; background: #fff; width: 100%; } .modal-bulletin .close:before { -webkit-transform: rotate(45deg); transform: rotate(45deg); } .modal-bulletin .close:after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .modal-bulletin .modal-content .modal-bulletin-img { width: 100%; height: auto; margin-top: -30px; }

$(function() { $('#modalAd').modal('show') });