Modal SImple

by Carlos Quintero

HTML

<h2>Ejemplos</h2>
<button data-modal="myModal" class="boton" id="myBtn">Abrir Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>Un intercomunicador es un dispositivo de intercomunicación. Puede definirse como un sistema independiente de comunicación electrónica destinado a un diálogo limitado o privado. Los intercomunicadores pueden ser portátiles, pero son generalmente instalados permanentemente en negocios, edificios y hogares. </p>
  </div>
</div>

<button data-modal="myModal2" class="boton" id="myBtn2">Abrir otro Modal</button>
<div id="myModal2" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>Detección de fugas eléctricas con meghómetro, instalaciones eléctricas en general, cableados, mediciones eléctricas, tableros thermomagnéticas, balanceos de carga, instalaciones de MT,BT. Protocolos de mediciones eléctricas.</p>
  </div>
</div>

CSS

/* The Modal (background) */
.modal {display: none;
    position: fixed;
    z-index: 1;
    padding-top: 100px; 
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0); 
    background-color: rgba(0,0,0,0.4);
     -webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;}
/* Modal Content */
.modal-content {background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;}
/* The Close Button */
.close {color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;}
.close:hover,
.close:focus {color: #000;
    text-decoration: none;
    cursor: pointer;}

JavaScript

var modal = $('#myModal, #myModal2');
var btn = $('#myBtn, #myBtn2');
var span = document.getElementsByClassName("close")[0];

$('.boton').click(function(){
		var id = $(this).attr('data-modal');
    $("#"+id).css('display','block');
});

$(".close").click(function(){
		$(this).parent().parent().css('display','none');
})

$('span').click(function() {
    modal.css('display','none');
});
$(".modal").click(function(event) {
        $(this).css('display','none')
})