In my single page application, I am using ng-switch to switch between different 'pages'. One of these pages contains a modal that is opened using the following function:
var modal = document.getElementById('myModal');
vm.openModal = function(src) {
modal.style.display = 'block';
modalImg.src = src;
};
modal.onclick = function() {
modal.style.display = 'none';
};
Here is the corresponding HTML code:
<div ng-switch="vm.step.name">
<div ng-switch-when="prepare">
Content for the first page
</div>
<div ng-switch-when="action">
Content for the second page
<button ng-click="vm.openModal('bootHP.jpg')">Open modal</button>
<!-- The Modal -->
<div id="myModal" class="modal-instruction absolute block">
<img class="modal-content-guide centered" id="img01">
</div>
</div>
</div>
The issue I'm facing is that the variable modal is being set to null, indicating that it cannot find the element with the id 'myModal' when switching pages. Can someone help me understand why this is happening and suggest a solution?
Thank you for any assistance!