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