Estoy realizando mi pagina web, y en ella tengo un boton "DONAR" en donde el usuario hace una donación y lo que busco es que aparezca un mensaje tipo pop up, o modal, que sea de agradecimiento. Estoy recién iniciado en JS y estoy aprendiendo con ayuda de algunas guias de internet, pero en todas me sucede lo mismo y es que no me funciona, el modal ni siquiera se muestra cuando presiono el boton, solo se hace un refresh de pagina. Cabe destacar que en mi HTML SÍ esta linkeado la hoja de JS.
if(document.getElementById("boton_donar")){
var modal = document.getElementById("myModal-donar");
var boton = document.getElementById("boton_donar");
var span = document.getElementsByClassName("close");
var body = document.getElementById("body_ayudanos");
boton.onclick = function() {
modal.style.display = "block";
body.style.position = "static";
body.style.height = "100%";
body.style.overflow = "hidden";
}
span.onclick = function() {
modal.style.display = "none";
body.style.position = "inherit";
body.style.height = "auto";
body.style.overflow = "visible";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
body.style.position = "inherit";
body.style.height = "auto";
body.style.overflow = "visible";
}
}
}
#boton_donar{
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
cursor: pointer;
padding: 5px 10px 5px 10px;
font-size: 20px;
font-family: 'M PLUS Rounded 1c', sans-serif;
font-weight: bold;
background-color: #8E44AD;
border-radius: 6px;
margin-bottom: 45px;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
}
#boton_donar:hover{
background-color: mediumpurple; /* Green */
color: black;
}
.modalContainer-donar {
display: none;
position: fixed;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0); /*oscurece el fondo*/
background-color: rgba(0,0,0,0.4);/*oscurece el fondo*/
}
.modalContainer-donar .modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid lightgray;
border-top: 10px solid #8E44AD;
width: 60%;
}
#gracias-donar{
margin-bottom: 30px;
font-size: 30px;
}
.modalContainer-donar .close {
color: #aaaaaa;
float: right;
font-size: 35px;
font-weight: bold;
}
.modalContainer-donar .close:hover {
color: #000;
text-decoration: none;
cursor: pointer;
}
<div id="myModal-donar"class="modalContainer-donar">
<div class="modal-content">
<span class="close">×</span>
<h2 id="gracias-donar">¡Muchas Gracias!</h2>
<p>Con su contribución ayuda a Naturalia a continuar con su trabajo por un mundo mejor</p>
</div>
</div>
<button id="boton_donar" >DONAR</button>
botón <>
) que prestan la misma funcionalidad de codepen y te permiten reproducir código html, css y js desde acá. Por favor edita tu pregunta colocando el código.