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,
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
}
¿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
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
}
.ventana {
display: none;
position: fixed;
width: 200px;
height: 200px;
border: 1px solid #333;
background-color: red;
padding: 5px;
box-shadow: 2px 2px 5px;
}
<!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>
ASÍ NO FUNCIONA (no añado CSS del resto de la pág. para no saturar, ya he comprado que no afecta).
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
}
.ventana {
display: none;
position: fixed;
width: 200px;
height: 200px;
border: 1px solid #333;
background-color: red;
padding: 5px;
box-shadow: 2px 2px 5px;
}
<!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>