1

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"> &nbsp; He leido y acepto la política de <a href="#" id="lopd">Protección de datos</a>.&nbsp;
          </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>

7
  • importaste el archivo "js/modal.js" a tu hmtl? asi <script src="js/modal.js"></script>
    – juliocpiro
    Commented el 13 sept. 2017 a las 18:48
  • @juliocpiro siii!! jajaja, he dudado un segundo, pero sí!
    – Lleims
    Commented el 13 sept. 2017 a las 18:59
  • jajaja entonces si funciona nada mas que tu ventana no se ve :), publicare la respuesta agregando div "miVentana"
    – juliocpiro
    Commented el 13 sept. 2017 a las 19:00
  • No tienes ningún error en tú código, por favor pon el ejemplo en donde sí te dá error
    – ESCM
    Commented el 13 sept. 2017 a las 19:17
  • agrega al css .ventana una propiedad top, ejem top:10px
    – juliocpiro
    Commented el 15 sept. 2017 a las 0:28

2 respuestas 2

1

Tu codigo esta funcionando, la clase .ventana debe tener una propiedad que defina la posicion en la ventanda debido a que usa position:fixed, agregale la propiedad top.

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
}
.ventana{
    display:none;
    position:fixed;
    width:200px;
    height:200px;
    border:1px solid #333;
    background:#eee
    padding:5px;
    box-shadow:2px 2px 5px;
    top:10px;
}
<input id="prueba" type="button" value="pinchame" onclick="mostrarVentana();">
<div id="miVentana" class="ventana">Mi Ventana</div>

TU CODIGO CORREGIDO

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;
  top:10px;
}
<!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"> &nbsp; He leido y acepto la política de <a href="#" id="lopd">Protección de datos</a>.&nbsp;
          </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>

6
  • Si perdona, lo había puesto el div, aquí es donde me lo he dejado. No entiendo porque a ti te va aquí y a mi no, acabo de cortar y pegar tal cual lo tuyo y sigue sin salir... Pienso que estoy llamando mal al archivo, pero no veo como...
    – Lleims
    Commented el 13 sept. 2017 a las 21:07
  • Se agrega solo asi: <head><script src="js/modal.js"></script></head> y confirma que la carpeta "js" este en la misma carpeta que tu archivo html. Publica tu codigo para ayudarte
    – juliocpiro
    Commented el 13 sept. 2017 a las 21:10
  • Ahora lo publico, estuve haciendo pruebas y si borro todo mi contenido HTML, excepto esta parte del div y botón, si que funciona, lo que no se que es lo que provoca que luego no salga. Saludos!!!!
    – Lleims
    Commented el 14 sept. 2017 a las 9:16
  • 1
    añade a tu css un valor top debido a que tiene posicion fixed esta flotando y necesita esa referencia. Ya edite mi rpta.
    – juliocpiro
    Commented el 15 sept. 2017 a las 0:27
  • No se debe comentar solo para dar las gracias, pero muchísmas gracias. Ya había tirado la toalla y pensado otras alternativas. No tenía ni idea de la necesidad de ese top sinceramente. Mil gracias!
    – Lleims
    Commented el 16 sept. 2017 a las 15:42
0

si lo que tu quieres es que al caer clic en el boton con el ID prueba, entonces, desde mi parecer, como lo haces es una manera correecta de hacerlo, a bien podrías hacer:

var mi_boton = document.getElementById('prueba');

mi_boton.addEventListener('click', mostrarVentana, false);

Debería funcionar, a menos que tengas errores en otros archivos.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.