Bootstrap modal box
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalTitle" aria-hidden="true"> <div class="modal-dialog modal-lg modal-dialog-centered" role="document"> <div class="modal-content"> <button type="button" class="close " data-dismiss="modal" aria-label="Close"> <span aria-hidden="true" class="btn-dark float-right">×</span> </button> <div class="modal-body"> <div class="row"> <div class="col-lg-5 d-none d-md-none d-sm-none d-lg-block d-xl-block"><img src="https://www.tolmatol.com/uploads-images/img-1.jpg" class="img-fluid" alt=""></div> <div class="col-lg-7"> <div class="modal-inner"> <h4>JOIN OUR MAILING LIST </h4> <p><small>Sign Up for exclusive updates, new arrivals & insider-only discounts</small></p> <form action=""> <input type="text" name="" id="" class="form-control"> <button class="btn btn-danger btn-block mt-2">Submit</button> </form> </div> </div> </div> </div> </div> </div> </div>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <style> button.close span { opacity: 1; width: 30px; height: 30px; display: block; text-shadow: none; } button.close { position: absolute; right: 0; opacity: 1; border: none; z-index: 9999; outline: none; } .modal-body { padding: 0; } .modal-content { border-radius: 0px; border: none; } .modal-inner { text-align: center; padding: 65px 80px;} .modal-inner .form-control, .modal-inner .btn { border-radius: 0px; } .modal-inner .form-control { background: #f1f1f1; } </style>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <script> $(document).ready(function(){ $("#myModal").modal('show'); }); </script>