Ejemplo:
<html>
<head>
<title>modales</title>
<script src="js/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<button class='boton'>Mostrar Modal</button>
<div class="mascara"></div>
<div class="modal" style="display:none">
<h2 style="text-align:center">Titulo de la Ventana</h2>
<p>Este es un <strong>párrafo</strong></p>
<input type="text"> <input type="radio"> <input type="checkbox">
<p>todo el codigo html que quieras poner</p>
<button class="boton">Cerrar</button>
</div>
</body>
<script type="text/javascript">
$('.boton').click(function () {
$('.modal, .mascara').toggle(200);
});
</script>
<style type="text/css">
.modal{
position: absolute;
height: 200px;
width: 300px;
background-color: #1f81aa;
left: 50%;
top:50%;
margin-left: -150px;
margin-top: -100px;
padding: 20px 20px;
color :white;
}
.mascara{
position: fixed;
display: none;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: rgba(0,0,0,0.5);
}
</style>
</html>
<head>
<title>modales</title>
<script src="js/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<button class='boton'>Mostrar Modal</button>
<div class="mascara"></div>
<div class="modal" style="display:none">
<h2 style="text-align:center">Titulo de la Ventana</h2>
<p>Este es un <strong>párrafo</strong></p>
<input type="text"> <input type="radio"> <input type="checkbox">
<p>todo el codigo html que quieras poner</p>
<button class="boton">Cerrar</button>
</div>
</body>
<script type="text/javascript">
$('.boton').click(function () {
$('.modal, .mascara').toggle(200);
});
</script>
<style type="text/css">
.modal{
position: absolute;
height: 200px;
width: 300px;
background-color: #1f81aa;
left: 50%;
top:50%;
margin-left: -150px;
margin-top: -100px;
padding: 20px 20px;
color :white;
}
.mascara{
position: fixed;
display: none;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: rgba(0,0,0,0.5);
}
</style>
</html>
Espero que la información sea de ayuda
