2

Tengo un modal PopUp que no esta hecho en JavaScript solo con HTML y CSS, necesito mandarlo a llamar con JavaScipt pero no se como.

El boton con el que lo llamo desde HTML

<a class="modal-open" href="#modal">PopUp Modal</a>

Lo que aparece después de hacer clic en el botón

 <div class="modal" id="modal">
  <div class="modal-content">
    <a href="#" class="modal-close" title="Close Modal">X</a>
    <h3>Titulo</h3>
    <div class="modal-area">
      <p>Contenido</p>
    </div>
  </div>
</div>

El CSS que uso para el PopUp

* {
  padding:0;
  margin:0;
  position:relative;
  box-sizing:border-box;
  -webkit-font-smoothing: subpixel-antialiased !important; 
  -webkit-backface-visibility: hidden; 
}
body, html {
    height:100%;
    min-height:100%;
  font-size: 14px;
  overflow-x:hidden;
  background: #036AB3;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smooth:always;
  background: radial-gradient(ellipse at center, rgba(2,162,239,1) 0%,rgba(3,106,179,1) 100%);
  color:#424242;
}
p {
  margin-bottom:1em;
}

a.modal-open {
  display:block;
  padding:20px;
  color:#424242;
  font-weight:bold;
  margin:50px auto;
  width:200px;
  background:#e0e0e0;
  border-radius:2px;
  text-align:center;
  text-decoration:none;
}
.modal {
  background:rgba(0,0,0,0.7);
  position:fixed;
  width:100%;
  height:100%;
  top:0px;
  left:0px;
  bottom:0px;
  transition:all .5s ease-in-out;
  opacity:0;
  z-index:-1;
}
.modal:target {
  opacity:1;
  transition:all .5s ease-in-out;
  z-index:+1;
}
.modal-content {
  position:fixed;
  top:50%;
  left:50%;
  width:500px;
  background:#fff;
  border-radius:4px;
  transform:translate(-50%, -200%);
  transition:all .5s ease-in-out;
  perspective: 1000;
  outline:1px solid transparent;
  opacity:0;
}
.modal:target .modal-content {
  transform:translate(-50%, -50%);
  transition:all .5s ease-in-out;
  transition-delay:.5s;
  z-index:9999;
  opacity:1;
}
.modal-close {
  float:right;
  text-decoration:none;
  padding:22px 22px;
  color:#424242;
  font-weight:800;
  transition:all .5s ease-in-out;
  z-index:+1;
  background:rgba(0,0,0,0.1);
  text-align:center;
  border-radius:0 4px 0 0;
}
.modal-close:hover {
  color:#fff;
  background:rgba(0,0,0,0.5);
}
.modal-content h3 {
  padding:20px;
  display:block;
  text-align:center;
  border-bottom:1px solid #e0e0e0;
  text-transform:uppercase;
  background:rgba(2,162,239,1);
  color:#fff;
  border-radius:4px 4px 0 0;
}
.modal-area {
  padding:20px;
}

De antemano gracias por leer, cualquier recomendación sera bienvenida tambien

1
  • ¿cómo lo quieres llamar con JavaScript? ¿a partir de un click, hover, focus, etc?
    – Shaz
    Commented el 4 abr. 2018 a las 16:28

2 respuestas 2

2

Considera que la pseudo clase :target:

representa el elemento único, si existe alguno, con un id coincidente con el identificador de fragmentos de la URI del documento.

Para abrir el modal lo que necesitas indicarle al navegador es una URI con un identificador del elemento dentro del documento al que llamar.

Para esto puedes usar location.hash el cual emula exactamente lo que sucede cuando se hace clic sobre el <a href="#modal".

Ejemplo:

function openModal(target) {
  location.hash = '#' + target;
}
* {
  padding:0;
  margin:0;
  position:relative;
  box-sizing:border-box;
  -webkit-font-smoothing: subpixel-antialiased !important; 
  -webkit-backface-visibility: hidden; 
}
body, html {
    height:100%;
    min-height:100%;
  font-size: 14px;
  overflow-x:hidden;
  background: #036AB3;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smooth:always;
  background: radial-gradient(ellipse at center, rgba(2,162,239,1) 0%,rgba(3,106,179,1) 100%);
  color:#424242;
}
p {
  margin-bottom:1em;
}

a.modal-open {
  display:block;
  padding:20px;
  color:#424242;
  font-weight:bold;
  margin:50px auto;
  width:200px;
  background:#e0e0e0;
  border-radius:2px;
  text-align:center;
  text-decoration:none;
}
.modal {
  background:rgba(0,0,0,0.7);
  position:fixed;
  width:100%;
  height:100%;
  top:0px;
  left:0px;
  bottom:0px;
  transition:all .5s ease-in-out;
  opacity:0;
  z-index:-1;
}
.modal:target {
  opacity:1;
  transition:all .5s ease-in-out;
  z-index:+1;
}
.modal-content {
  position:fixed;
  top:50%;
  left:50%;
  width:500px;
  background:#fff;
  border-radius:4px;
  transform:translate(-50%, -200%);
  transition:all .5s ease-in-out;
  perspective: 1000;
  outline:1px solid transparent;
  opacity:0;
}
.modal:target .modal-content {
  transform:translate(-50%, -50%);
  transition:all .5s ease-in-out;
  transition-delay:.5s;
  z-index:9999;
  opacity:1;
}
.modal-close {
  float:right;
  text-decoration:none;
  padding:22px 22px;
  color:#424242;
  font-weight:800;
  transition:all .5s ease-in-out;
  z-index:+1;
  background:rgba(0,0,0,0.1);
  text-align:center;
  border-radius:0 4px 0 0;
}
.modal-close:hover {
  color:#fff;
  background:rgba(0,0,0,0.5);
}
.modal-content h3 {
  padding:20px;
  display:block;
  text-align:center;
  border-bottom:1px solid #e0e0e0;
  text-transform:uppercase;
  background:rgba(2,162,239,1);
  color:#fff;
  border-radius:4px 4px 0 0;
}
.modal-area {
  padding:20px;
}
<a class="modal-open" href="#modal">PopUp Modal</a>

<a class="modal-open" onclick="openModal('modal')">PopUp Modal con JS</a>

 <div class="modal" id="modal">
  <div class="modal-content">
    <a href="#" class="modal-close" title="Close Modal">X</a>
    <h3>Titulo</h3>
    <div class="modal-area">
      <p>Contenido</p>
    </div>
  </div>
</div>

0
1

Primero llama a tu modal:

var modal = document.getElementById("modal");

Para mostrar tu modal usa la siguiente función:

modal.showModal();

Colócalo en la parte que deseas que se muestre, o para llamarlo desde el html usa:

<a class="modal-open" data-toggle="modal" data-target="#modal">PopUp Modal</a>
4
  • ¿y qué tal si el OP no utiliza el JavaScript del modal de Bootstrap?
    – Shaz
    Commented el 4 abr. 2018 a las 17:44
  • Dice que lo utiliza en el titulo y el contenido de la pregunta.
    – farsSharp
    Commented el 4 abr. 2018 a las 17:45
  • 1
    No veo la palabra Bootstrap ni en el título, ni en el contenido, ni en los tags.
    – Shaz
    Commented el 4 abr. 2018 a las 17:47
  • ok ok, ya veo a lo que te refieres. Lo editaré
    – farsSharp
    Commented el 4 abr. 2018 a las 17:50

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.