Buenas, intento hacer una ventana modal y para ello hay un momento que en mi web han de pulsar un botón. ` <input id="prueba" type="button" value="pinchame" onclick="mostrarVentana();"> ` y entonces me redirecciona a este archivo `JS` que es el siguiente, <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-js --> function mostrarVentana() { var ventana = document.getElementById('miVentana'); // Accedemos al contenedor ventana.style.marginTop = "100px"; // Definimos su posición vertical. La ponemos fija para simplificar el código ventana.style.marginLeft = ((document.body.clientWidth - 350) / 2) + "px"; // Definimos su posición horizontal ventana.style.display = 'block'; // Y lo hacemos visible } function ocultarVentana() { var ventana = document.getElementById('miVentana'); // Accedemos al contenedor ventana.style.display = 'none'; // Y lo hacemos invisible } <!-- end snippet --> ¿Como hago para que al clicar encima del botón se ejecute? **NOTA:** Por si es necesario el archivo `JS` se encuentra en una carpeta que se llama JS y el nombre del archivo es modal.js. **EDITO: Añado todo mi código. He comprobado que al borrar el resto de elementos `html ` si que funciona, entonces el problema viene de que hay algo que lo tapa, borra, ...** **ASÍ FUNCIONA** <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-js --> function mostrarVentana() { var ventana = document.getElementById('miVentana'); // Accedemos al contenedor ventana.style.marginTop = "10px"; // Definimos su posición vertical. La ponemos fija para simplificar el código ventana.style.marginLeft = "10 px"; // Definimos su posición horizontal ventana.style.display = 'block'; // Y lo hacemos visible } function ocultarVentana() { var ventana = document.getElementById('miVentana'); // Accedemos al contenedor ventana.style.display = 'none'; // Y lo hacemos invisible } <!-- language: lang-css --> .ventana { display: none; position: fixed; width: 200px; height: 200px; border: 1px solid #333; background-color: red; padding: 5px; box-shadow: 2px 2px 5px; } <!-- language: lang-html --> <!DOCTYPE HTML> <HTML lang="es"> <HEAD> <title>Práctica - Portfolio</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <link rel="stylesheet" type="text/css" href="CSS/Estilos.css"> <link rel="stylesheet" type="text/css" href="CSS/style.css"> <!-- Iconos --> <link rel="stylesheet" type="text/css" href="CSS/media.css"> <script type="text/javascript" src="JS/motor.js"></script> </HEAD> <BODY> <!-- ******************************* PORTADA ************************************ --> <input id="prueba" type="button" value="pinchame" onclick="mostrarVentana();"> <div id="miVentana" class="ventana">Mi Ventana</div> </div> <!-- ********************************* FOOTER ************************************* --> <footer> <p>Portfolio de pruebas en septiembre del 2017.</p> </footer> </BODY> </HTML> <!-- end snippet --> **ASÍ NO FUNCIONA** (no añado CSS del resto de la pág. para no saturar, ya he comprado que no afecta). <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-js --> function mostrarVentana() { var ventana = document.getElementById('miVentana'); // Accedemos al contenedor ventana.style.marginTop = "10px"; // Definimos su posición vertical. La ponemos fija para simplificar el código ventana.style.marginLeft = "10 px"; // Definimos su posición horizontal ventana.style.display = 'block'; // Y lo hacemos visible } function ocultarVentana() { var ventana = document.getElementById('miVentana'); // Accedemos al contenedor ventana.style.display = 'none'; // Y lo hacemos invisible } <!-- language: lang-css --> .ventana { display: none; position: fixed; width: 200px; height: 200px; border: 1px solid #333; background-color: red; padding: 5px; box-shadow: 2px 2px 5px; } <!-- language: lang-html --> <!DOCTYPE HTML> <HTML lang="es"> <HEAD> <title>Práctica - Portfolio</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <link rel="stylesheet" type="text/css" href="CSS/Estilos.css"> <link rel="stylesheet" type="text/css" href="CSS/style.css"> <!-- Iconos --> <link rel="stylesheet" type="text/css" href="CSS/media.css"> <script type="text/javascript" src="JS/motor.js"></script> </HEAD> <BODY> <!-- ******************************* PORTADA ************************************ --> <div class="Portada"> <HEADER> <nav id="Barra-Navegacion"> <ul> <li><a href="#Portada">Portada</a></li> <li><a href="#Conoceme">Mis destrezas</a></li> <li><a href="#Mis-Proyectos">Mis proyectos</a></li> </ul> <img id="Logo" src="Img/logo200px.png" alt="Logo NEA"> <ul> <li><a href="#Contacto">¿Trabajamos juntos?</a></li> <li><a href="#Mis-Datos">¿Nos vemos?</a></li> </ul> </nav> </HEADER> <a name="Portada"></a> <img id="Fondo-Portada" src="Img/fondo.jpg" alt="Fondo"> <p id="Frase-Presentacion"> ¡Bienvenido! Soy Miguel y diseño y construyo: <br><br> Páginas web <br> Software <br> En Arduino y Raspberry <br> PLCs <br> ... </p> <input type="button" id="Btn-Ready" value="¡Trabajemos juntos!" onclick="location.href='#Contacto'"> <a href="#Conoceme"> <p id="Aprende-Mas"> Aprende más de lo que hago <br> <span class="icon-keyboard_arrow_down" id="Aprendes-Mas"></span> </p> </a> </div> <!-- ******************************* DESTREZAS ************************************ --> <div class="General General-Destrezas"> <a name="Conoceme"></a> <div class="Destrezas"> <h2>Mis destrezas</h2> <p class="Texto-Destrezas"> Tengo la titulación de <span class="Resaltar-Destreza">Técnico Superior en Regulación y Control de Sistemas Automáticos</span> y actualmente estoy cursando el <span class="Resaltar-Destreza">Grado de Ingeniería Electrónica Industrial y Automática</span>. </p> <h3>¿Que podemos abarcar? </h3> <ul class="Listado-Destrezas"> <li> Podemos desarrollar proyectos web desde sus inicios, planteando una idea, desarrollando su código y diseñando un aspecto acorde a sus necesidades.</li> <br> <li> Desarrollo de software para cualquier funcionalidad deseada, en todas sus etapas del proceso. </li> <br> <li> ¿Te atreves a robotizar tu casa? Desarrollo de placas de arduino, PLCs, para tener los mayores avances y comodidades en tu hogar, oficina o negocio. </li> </ul> <ul class="Tecnologias-Destrezas"> <li><img src="Img/Icono-HTML.png" alt="HTML"></li> <li><img src="Img/Icono-CSS.png" alt="CSS"></li> <li><img src="Img/Icono-JS.png" alt="JS"></li> <li><img src="Img/Icono-SQL.png" alt="SQL"></li> <li><img src="Img/Icono-PHP.png" alt="PHP"></li> <li><img src="Img/Icono-C.png" alt="C"></li> <li><img src="Img/Icono-PSD.png" alt="PSD"></li> </ul> </div> </div> <!-- ******************************* PROYECTOS ************************************ --> <div class="General General-Proyectos"> <div class="Proyectos"> <a name="Mis-Proyectos"></a> <h2>Mis proyectos</h2> <div class="Imagenes-Proyectos"> <a href="#"><img src="Img/Lezama.png" alt="Librería Lezama proyecto"></a> <a href="#"><img src="Img/inLaw.png" alt="inLaw proyecto"></a> <a href="#"><img src="Img/Lezama.png" alt="Librería Lezama proyecto"></a> <a href="#"><img src="Img/inLaw.png" alt="inLaw proyecto"></a> <a href="#"><img src="Img/Lezama.png" alt="Librería Lezama proyecto"></a> <a href="#"><img src="Img/inLaw.png" alt="inLaw proyecto"></a> </div> </div> </div> <!-- ******************************* CONTACTO ************************************ --> <div class="General General-Contacto"> <a name="Contacto"></a> <div class="Contacto"> <h2>¿Trabajamos juntos?</h2> <p class="Texto-Contacto"> Siempre con ganas de participar en proyectos nuevos. Siempre con ganas de escuchar nuevas ideas. ¿Hablamos? </p> <input type="button" id="Btn-Contactar" value="¡Empecemos!"> </div> <!-- ** VENTANA MODAL CONTACTO ** --> <div class="Modal-Contacto"> <img src="Img/logo70px.png" alt="Logo NEA"> <h2 class="Titulo-Modal-Contacto General">Ok, solo unas pequeñas preguntas más.</h2> <p class="Texto-Modal-Contacto">Con este formulario puedes explicar y ofrecer cualquier proyecto que tengas en mente. Una vez recibidoprocuraré estudairlo y dar una contestación lo antes posible.</p> <div class="Formulario-Contacto"> <div class="Estructura-Contacto"> <input type="text" class="Input-Formulario" placeholder="Nombre (obligatorio)"> <input type="text" class="Input-Formulario" placeholder="Apellidos (obligatorio)"> </div> <div class="Estructura-Contacto"> <input type="text" class="Input-Formulario" placeholder="e-mail (obligatorio)"> <input type="text" class="Input-Formulario" placeholder="Teléfono (obligatorio)"> </div> <div class="Estructura-Contacto"> <textarea class="Textarea-Formulario" placeholder="¡Cuéntame lo que quieras! (obligatorio)"></textarea> </div> <input type="button" id="Btn-Contacto-Enviar" class="Input_Formulario" value="Enviar"> <form action=""> <p class="Texto-Modal-Contacto"> <input type="checkbox"> He leido y acepto la política de <a href="#" id="lopd">Protección de datos</a>. </p> <br /> </form> <div id="Modal-LOPD" title="Dialogo-LOPD"> <p> PROTECCIÓN DE DATOS* <br>De conformidad con lo establecido en el Art. 5 de la Ley Orgánica 15/1999 de diciembre de Protección de Datos de Carácter Personal, por el que se regula el derecho de información en la recogida de datos le informamos de los siguientes extremos: <br>- Los datos de carácter personal que nos ha suministrado en esta y otras comunicaciones mantenidas con usted serán objeto de tratamiento en los ficheros responsabilidad de Asesoría Integral JAF & MCF. <br>- La finalidad del tratamiento es la de gestionar de forma adecuada la prestación del servicio que nos ha requerido. Asimismo estos datos no serán cedidos a terceros, salvo las cesiones legalmente permitidas. <br>- Los datos solicitados a través de esta y otras comunicaciones son de suministro obligatorio para la prestación del servicio. Estos son adecuados, pertinentes y no excesivos. <br>- Su negativa a suministrar los datos solicitados implica la imposibilidad prestarle el servicio. <br><br>Asimismo, le informamos de la posibilidad de ejercitar los correspondiente derechos de acceso, rectificación, cancelación y oposición de conformidad con lo establecido en la Ley 15/1999 ante nombre empresa como responsables del fichero. Los derechos mencionados los puede ejercitar a través de los siguientes medios: [email protected], empresa C/ Carretera N 37 18412 Bubion. 958 76 34 72 – 958 76 32 12. </p> </div> <p id="Cerrar-Modal">X</p> </div> </div> </div> <!-- ******************************* MIS DATOS ************************************ --> <div class="General General-MisDatos"> <div class="MisDatos"> <a name="Mis-Datos"></a> <h2>¿Nos vemos?</h2> <p class="Texto-MisDatos"> A continuación tienes nuestros datos para localizarnos. </p> <div class="Estructura-MisDatos"> <img src="Img/Mapa.PNG" class="Mapa-MisDatos" alt="Mapa localización empresa"> <p class="Datos-MisDatos"> C/ Archiduque Luís Salvador, Nº 27, Piso 2, Puerta B <br> Palma de Mallorca, Islas Baleares, España <br><br> Tlf: +034 698 256 527 <br> eMail consultas: [email protected] <br> eMail trabajo: <a href="#Contacto"> Pincha aquí </a> <br><br> Horario de oficina: 10:00 - 18:00 </p> </div> </div> <input id="prueba" type="button" value="pinchame" onclick="mostrarVentana();"> <div id="miVentana" class="ventana">Mi Ventana</div> </div> <!-- ********************************* FOOTER ************************************* --> <footer> <p>Portfolio de pruebas en septiembre del 2017.</p> </footer> </BODY> </HTML> <!-- end snippet -->