Puede ser debido a que la función JS está siendo declarada o llamada antes de que el DOM haya sigo cargado completamente.
DOM W3C
DOM MDN
Funcional
<button id="btnModal">Ver</button><!--class="button"-- sacamos esto del button-->
<div id="simpleModal" class="modal" style="display: none">
<div class="modal-content">
<span id="closeBtn">×</span> <!--probe con class="closeBtn" y no anduvo en el js-->
<h2>Modal h2 header</h2>
</div>
<div class="modal-body">
<p> hola soy un modal</p>
<p>pueden ir las fotos</p>
</div>
<div class="modal-footer">
<h3>modal footer</h3>
</div>
</div>
<script>
var modal = document.getElementById('simpleModal');
var modalBtn = document.getElementById('btnModal');
console.log(modal)
console.log(modalBtn)
modalBtn.addEventListener('click', openModal);
function openModal(){
modal.style.display = 'block';
}
</script>
No funcional
<script>
var modal = document.getElementById('simpleModal');
var modalBtn = document.getElementById('btnModal');
console.log(modal)
console.log(modalBtn)
modalBtn.addEventListener('click', openModal);
function openModal(){
modal.style.display = 'block';
}
</script>
<button id="btnModal">Ver</button><!--class="button"-- sacamos esto del button-->
<div id="simpleModal" class="modal" style="display: none">
<div class="modal-content">
<span id="closeBtn">×</span> <!--probe con class="closeBtn" y no anduvo en el js-->
<h2>Modal h2 header</h2>
</div>
<div class="modal-body">
<p> hola soy un modal</p>
<p>pueden ir las fotos</p>
</div>
<div class="modal-footer">
<h3>modal footer</h3>
</div>
</div>
En este segundo ejemplo hemos definido el script por delante del elemento DOM, al ocurrir esto, los eventos no tiene acceso a elementos del DOM que todavía no han sido creados.
Esto también se puede evitar con el uso de jQuery.ready()
jQuery: $(document).ready( handler )
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(() => {
var modal = document.getElementById('simpleModal');
var modalBtn = document.getElementById('btnModal');
console.log(modal)
console.log(modalBtn)
modalBtn.addEventListener('click', openModal);
function openModal(){
modal.style.display = 'block';
}
})
</script>
<button id="btnModal">Ver</button><!--class="button"-- sacamos esto del button-->
<div id="simpleModal" class="modal" style="display: none">
<div class="modal-content">
<span id="closeBtn">×</span> <!--probe con class="closeBtn" y no anduvo en el js-->
<h2>Modal h2 header</h2>
</div>
<div class="modal-body">
<p> hola soy un modal</p>
<p>pueden ir las fotos</p>
</div>
<div class="modal-footer">
<h3>modal footer</h3>
</div>
</div>
En este caso hemos definido el script antes, pero gracias a la función ready() el script no se ha ejecutado hasta que el DOM del documento no ha sido cargado por completo.
Edito
Para hacer que la función del botón de cerrar funcione correctamente sería exactamente igual:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
// Esperamos a que el DOM se haya cargado
$(document).ready(() => {
// Declaramos las variables de todos los elementos del Dom
var modal = document.getElementById('simpleModal');
var modalBtn = document.getElementById('btnModal');
var closeBtn = document.getElementById('closeBtn')
// Comprobamos que las variables se han creado correctamente
console.log(modal)
console.log(modalBtn)
console.log(closeBtn)
// Acoplamos el evento addEventListener() a cada botón con la función que queremos que desarrollen
modalBtn.addEventListener('click', openModal);
closeBtn.addEventListener('click', closeModal);
// Definimos la función que abre el modal
function openModal(){
console.log('Mostrar modal')
modal.style.display = 'block';
}
// Definimos la función que cierra el modal
function closeModal(){
console.log('Cerrar modal')
modal.style.display = 'none';
}
})
</script>
<button id="btnModal">Ver</button>
<div id="simpleModal" class="modal" style="display: none">
<div class="modal-content">
<button id="closeBtn">×</button>
<h2>Modal h2 header</h2>
</div>
<div class="modal-body">
<p> hola soy un modal</p>
<p>pueden ir las fotos</p>
</div>
<div class="modal-footer">
<h3>modal footer</h3>
</div>
</div>
Espero te sea de ayuda, un saludo!!
<script>
antes de ese HTML?