October 17, 2021

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">&times;</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>

 

Leave a Reply

Your email address will not be published. Required fields are marked *