¿Como puedo crear una ventana modal desde un boton en html?
Quiero aplicarle esa función para un formulario de registro que se deslize pero nose como hacerlo, este es el código que tengo (<input type="submit" name="Submit" value="Iniciar sesion" style="color:black; height:34px; width:100px" align="absmiddle"/>), osea tengo armado así mi pagina:
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Social+</title>
<meta http-equiv="Content-Type" content="text/html; charset="UTF-8">
<script type="text/javascript src="js/jquery.js"></script>
<link rel="stylesheet" type="text/css" link href="estilos.css">
<body>
<header class="header2">
<div class="wrapper">
<div class="logo"><a href="index.php"><img src="logotipo de social +.png" width="180px" height="80px" align="absmiddle"></div>
<nav>
<font face="Tahoma">
<a href="Buscar gente.php">Buscar gente</a>
<a href="Musica.php">Musica</a>
<a href="Videos.php">Videos</a>
<a href="Foros.php">Foros</a>
<a href="Blogs.php">Blogs</a>
<img src="logotipo de facebook.png" width=28px" height="28px" align="absmiddle"> <input type="submit" name="Submit" value="Iniciar sesion" style="color:black; height:34px; width:100px" align="absmiddle"/>
</nav>
</header>
<section class="contenido wrapper">
<body background="amistades en la playa.jpg" width="1024px" height="768px">
<br></br>
<br></br>
<font color="yellow"><font face="Arial Black"><font size=16>UNITE</font>
<font face="Arial"><h3>y forma parte de esta nueva comunidad</h3></font>
<br></br>
<form method="POST" action="registro.php">
<font face="Arial"><font color="white"><label for"nombre">Nombre</label>
<input type="text" name="nombre" id="nombre" size="40"/>
<br></br>
<label for="apellido">Apellido</label>
<input type="text" name="apellido" id="apellido"/>
<br></br>
<label for="pwd">Contraseña</label>
<input type="password" name="pwd" id="pwd"/>
<br></br>
<label for="pwd"> Repetir contraseña</label>
<input type="password" name="pwd" id="pwd"/>
<br></br>
<select arial-label="Día" name="Dia" id="Dia" title="Dia"><option value="0" selected="1">Dia</option>
<option value="1">1</option><option value="2">2</option><option value="3">3</option>
<option value="4">4</option><option value="5">5</option><option value="6">6</option>
<option value="7">7</option><option value="8">8</option><option value="9">9</option>
<option value="10">10</option><option value="11">11</option><option value="12">12</option>
<option value="13">13</option><option value="14">14</option><option value="15">15</option>
<option value="16">16</option><option value="17">17</option><option value="18">18</option>
<option value="19">19</option><option value="20">20</option><option value="21">21</option>
<option value="22">22</option><option value="23">23</option><option value="24">24</option>
<option value="25">25</option><option value="26">26</option><option value="27">27</option>
<option value="28">28</option><option value="29">29</option><option value="30">30</option>
<option value="31">31</option>
<style type="text/css">
a:link
{
text-decoration:none;
}
</style>
<head>
</head>
</body>
</html>
ESTILOS.CSS
*{margin:0; padding:0;}
body {
background:"juventud.png";
}
header {
width:100%;
overflow:hidden;
background:#ffffff;
margin-bottom:20px;
}
.wrapper {
width:90%;
max-width:1000px;
margin:auto;
overflow:hidden;
}
header .logo {
color:#f2f2f2;
font-size:50px;
line-height:200px;
float:left;
}
header nav {
float:right;
line-height:200px;
}
header nav a {
display:inline-block;
color:#008000;
text-decoration:none;
padding:10px 20px;
line-height:normal;
font-size:12px;
font-weight:Tahoma;
}
.header2{
position:fixed;
height:100px;
}
.header2 .logo {
line-height:100px;
font-size:30px;
}
.contenido {
padding-top:100px;
}
.header2 nav {
line-height:100px;
}
.contenido p {
margin-bottom:1em;
}
Mire un ejemplo de esta pagina: http://www.nosolocss.com/blog/css/crear-ventanas-modales-usando-solo-css-y-su-selector-target pero nose entre cual y cual tengo que aplicarlo como según explica y esta vendría ser la demo (http://www.nosolocss.com/files/ventanasmodalescss/ventanas_modales_css.html ) osea del botón deslizar.
Espero que alguien por favoor me responda porque ya hice dos preguntas y nadie me contesto.
1 respuesta
Yo no "inventaría la rueda" y usaría un framework que ya disponga de dicha funcionalidad y sea usado mayoritariamente como Bootstrap:
http://getbootstrap.com/javascript/#modals
Hacer un modal con bootstrap no tiene más complicación que disponer de un <div> con la class "modal" y un id específico:
<div class="modal" id="mi-modal"> CONTENIDO DEL MODAL </div>
Y, para mostrarlo, un button o link con data-toggle="modal" y un data-target indicando el id del modal:
<button type="button" data-toggle="modal" data-target="#mi-modal" >Abrirl modal</button>
PD: Para próximas preguntas intenta ser más concreto y no pegar todo el código de tu web. Si no haces buenas preguntas es mucho más difícil que lleguen a responderte o bien porque no entenderán tu problema o bien porque requiere demasiado análisis para encontrarlo.
