I have a sample page with a Bootstrap dialog being returned from the server. I want to display it inside a DIV.
However, when clicked, I receive this error:
Uncaught TypeError: myModal.addEventListener is not a function
It points to this line of code:
myModal.addEventListener('show.bs.modal', function () {
Any ideas why? Thank you!
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="086a67667d7a7d796a41423d263a263b">[email protected]</a>/dist/css/bootstrap.min.css" type="text/css" />
</head>
<body>
<p><a href="#" onclick="showSubscriptionInfo();">Open dialog</p>
<div id="myDiv"></div>
</body>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ed8f8282999e999f8c9dadd8c3dfc3de">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
<script>
function showSubscriptionInfo(){
var data = ''+
'<div class="modal fade" id="subsModal" tabindex="-1" aria-labelledby="exampleModalLabel">'+
' <div class="modal-dialog">'+
' <div class="modal-content" style="height:450px">'+
' <div class="modal-body">'+
'<p>xxx</p>'+
' </div>'+
'<div class="modal-footer">'+
' <button type="button" class="button" data-bs-dismiss="modal">Close</button>'+
'</div> '+
' </div>'+
' </div>'+
'</div>';
document.getElementById('myDiv').innerHTML = data;
var myModal = new bootstrap.Modal(document.getElementById('subsModal'));
myModal.show();
myModal.addEventListener('show.bs.modal', function () {
alert(1);
}, { once: true });
myModal.addEventListener('hide.bs.modal', function () {
alert(2);
}, { once: true });
}
</script>