Modal on load

[webchambers]

Hi i have a script that opens up a modal on button.

How do i alter this to load on page load and center horizontally on the screen.

Show Default Modal

<!-- Default Modal HTML -->
<div id="defaultModal" class="modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
              	<h5 class="modal-title">Default Modal</h5>
            	<button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                <p>The default modal size has been changed to 600px. Now it is 100px wider than the previous 500px wide modal.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">Ok, I Understand</button>
            </div>
        </div>
    </div>
</div>

[exeq]

Hi, one way could be making a click as soon as your web loads.

something like

window.onload=function(){
  document.getElementById("myModalButton").click();
};

If your using jquery click() on document ready.

$( "#myModalButton" ).click();

I’ve noticed your using bootstrap, there’s lots of ways of centering anything including modals, its all covered in their documentation.

https://getbootstrap.com/docs/5.0/components/modal/