-1

I am trying to develop a subscription pop up modal box using the latest framework from Bootstrap 4. However, I do not want my clients to click the button to subscribe, I want the subscription box to pop up as soon the page load. After numerous of tutorials, each one has failed. Does anyone know how to get around this? 

   <div id="myModal" class="modal fade" role="dialog">
 <div class="modal-dialog">
   <!-- Modal content-->
   <div class="modal-content">
     <div class="modal-header">
       <button type="button" class="close" data-dismiss="modal">&times;</button>
       <h4 class="modal-title">Modal Header</h4>
     </div>
     <div class="modal-body">
       <p>Some text in the modal.</p>
     </div>
     <div class="modal-footer">
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
     </div>
   </div>

 </div>


<script>
$(window).load(function(){
 $('#myModal').modal('show');
 });
  </script>
Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
Breionna Myles
  • 31
  • 1
  • 8

2 Answers2

0

Sometimes the elements are not loaded when the function is called. Try to use it in a timeout like

setTimeout(()=>{
    $('#myModal').modal('show');
}, 5000)

If it is working -> Find a better solution to figure out if components already loaded

If not working -> Does the console say something? Try to debug and have a look if $('myModal') is in deed returning the element and if ".modal" is defined.

Andybanandy
  • 120
  • 10
  • Console checks out fine, I do not know what could be the problem. This is very frustrating. I just want a simple popup modal on a pageload, where that can display subscription information – Breionna Myles Aug 04 '17 at 14:32
0

Your modal is missing a closing </div>. Also make sure you're including jquery before bootstrap.js.

https://www.codeply.com/go/gMtlZbdyHi

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624