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"> &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>

<!-- end snippet -->