mi modal ok

boton modal solo css y javascript

by femfoyou

HTML

<a href="#" id="botonmodal" class="zmdi zmdi-search material-icons">boton modal</a>


<!-- The Modal -->
<div id="miModal" class="modalok">
  <div class="modal-full modal-medio">
    <!-- <span class="closeok closeok2 pure-button pure-button-primary">cerrar</span> -->
<h2>Buscar : </h2>
  <form class="pure-form">
    <input class="pure-input-1" type="search" placeholder="..." id="inputsearch">
    <br><br>
    <button type="submit" class="pure-button pure-input-1 pure-button-warning closeok">cerar</button>
  </form>
  </div>
</div>
<!-- fin modal -->

CSS

/* The Modal (background) 
_________________________*/
.modalok {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    /*padding-top: 64px;*/
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
    /* Modal Content */
.modal-full {
    background-color: #fefefe;
    margin: auto;
    /*padding: 20px;*/
    /*border: 1px solid #888;*/
    width: 100%;
}
.modal-medio{ width: 300px; padding: 20px;
  padding-top: 64px;padding-bottom: 64px;
}

JavaScript

// modal css-js
var modal2 = document.getElementById('miModal');
var btn2 = document.getElementById("botonmodal");
var span2 = document.getElementsByClassName("closeok")[0];
btn2.onclick = function() { modal2.style.display = "block";}
span2.onclick = function() { modal2.style.display = "none";}
window.onclick = function(e) {
    if (e.target == modal2) { modal2.style.display = "none"; }
}