Bootstrap Modal not loading on page load

Question

Hi I have added a bootstrap modal on my site but the problem is it is not launching on $(window).load(); I have also tried adding an alert on window load it works fine but modal isn't loading on page load but yes modal is loaded if I trigger it through a button

For Reference you can check https://theinnovativepackaging.com/

And Modal is as follows

<div id="myDiscountModal"  class="modal fade">
    <div class="modal-dialog disc-modal">
        <div class="modal-content">
            <div class="modal-header disc-modal">
        <div>
              <h5 class="modal-title">SIGNUP TILL NOV 25th and Avail 10% OFF</h5>
                </div>
            <button type="button" class="close" data-dismiss="modal"><span class="discount-modal-close"><img width="10px" src="<?php echo base_url('/images/close.jpg')?>"></span></button>
            </div>
            <div class="modal-body">
        <div class="row">
          <div class=" col-sm-6">
            <img width="100%" src="<?php echo base_url('/images/discount-voucher.jpg')?>">
          </div>
          <div class="col-sm-6">
            <p class="my-icon-title popup-content">Start Your Quotation Message with Discount Voucher and Get 10% OFF</p>
                    <form method="post" id="ajaxDiscountForm" action="javascript:void(0)">
                      <div class="form-group">
            <div class="disc-modal-form-field">
              <span class="fa fa-envelope disc-modal-form-field-icon"></span>
              <input type="email" name="email" class="form-control" placeholder="Email Address">
            </div>
                      </div>
                      <div class="form-group">
            <div class="disc-modal-form-field">
              <span class="fa fa-phone disc-modal-form-field-icon"></span>
              <input type="tel" id="" class="form-control" name="phone" placeholder="Phone Number">
            </div>
                      </div>
              <div id="discountMessage" style="display: none;"></div>
                      <button type="submit" id="send_discount_form" class="btn btn-primary">Get Discount</button>
                    </form>
          </div>
        </div>
            </div>
        </div>
    </div>
</div>

And Javascript Added is:

<script type="text/javascript">
    $(window).on('load', function() {
        $('#myDiscountModal').modal('show');
    });
</script>

Anyone who can guide me what could be the possible conflict that its not working ?

Answer 1

There are multiple errors on your website that can be seen in the developer console. I believe many of them (including the one with Bootstrap modal) related to jQuery being imported twice. Try to remove one of them.