I am struggling to get a modal to show up on page load using Bootstrap 4. The code for the modal is sourced from online resources:
</body>
<div class="modal fade" id="cookieModal" style="display: block;>
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Modal title</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true"&rt;×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body content...........</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content --&rt;
</div><!-- /.modal-dialog --&rt;
</div><!-- /.modal --&rt;
<script src="/public/js/logic.js"></script>
</body>
Even though I tried giving an "id" name to the modal and setting "style="display: block"", the modal does not appear to display. In my external ("logic") file, I attempted the following pure JavaScript approach:
addEventListener("load", initialize);
function initialize() {
var _warning = document.getElementById("cookieModal"); //for cookie modal display on page load...
_warning.style.display = "block"; //show the cookie modal...
}
If anyone can offer advice without relying on JQuery, I would greatly appreciate it as I prefer to use pure JS over JQuery. Thank you in advance.