¿Cómo puedo hacer una ventana modal desde un botón para mi web?

Tengo este código y no se como hacerlo desde el Bootstrap:

<input type="submit" name="Submit" value="Iniciar sesion" style="color:black; height:34px; width:100px" align="absmiddle"/>

¿Alguien me puede decir como hacerlo?, he estado intentando hacerlo varias veces pero no me funcionó...

1 respuesta

Respuesta
1

Este código de ejemplo es de la página oficial de bootstrap, tal vez te pueda servir:

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

El problema es que tengo una estructura diferente en mi web y mas el botón que tengo es un input, por eso debe haber otra forma de aplicar esa ventana:

<!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>
  <a href="https://www.facebook.com/socialplusamigosonline.es"><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" data-toggle="modal" data-target="#miventana"/>
</nav>
</header>
<section class="contenido wrapper">
<body background="juventud.jpg" width="1126px" height="930px">
<style type="text/css">
.general{
margin-top: 19px;
/*float:right;*/
width:380px;
height: auto;
min-height:100%;
}
.general:after{
/*width: 100%;
height:100px;
display:block;
clear:both;*/
}
.formulario{
padding: 10;
}
.fondo-verde{
background-color:green;
}
.footer{
width: 100%;
height: 60px;
margin: 70px auto 0;
padding-top: 30;
}
a:link{
text-decoration:none;
}
.control{
width: 300px;
height: 35px;
margin-left: 20px;
font-size: 16;
font-family: Tahoma;
}
</style>
<body>
<div align="right" style="width: 100%;">
<div class="general" align="left"><br></br>
<div class="fondo-verde formulario"><br></br>
   <font color="white" face="Tahoma" size="6">Registrate
<font color="white" face="Tahoma" size="4">en esta nueva comunidad<br></br>
</div>
<form role="form">
<div class="form-group fondo-verde formulario">
<font color="white" size="3">
   <input type="name" placeholder="Nombre" class="form-control control" id="ejemplo_name_1" size="30"><br></br>
<font color="white" size="3">
   <input type="surname" placeholder="Apellido" class="form-control control" id="ejemplo_surname_1" size="30" maxlength="30"><br></br>
<font color="white" size="3">
   <input type="email" placeholder="E-Mail" class="form-control control" id="ejemplo_email_1" size="36" maxlength="30"><br></br>
<font color="white" size="3">
   <input type="password" placeholder="Contraseña" class="form-control control" id="ejemplo_password_1" size="27"><br></br>
<font color="white" size="3">
   <input type="password" placeholder="Repetir contraseña" class="form-control control" id="ejemplo_password_1" size="27"><br></br>
<center>
<select aria-label="Día" name="Día" id="Día" title="Día"><option value="0" selected="1">Día</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></select>    <select aria-label="Mes" name="Mes" id="Mes" title="Mes"><option value="0" selected="1">Mes</option>
<option value="1">ene</option>
<option value="2">feb</option>
<option value="3">mar</option>
<option value="4">abr</option>
<option value="5">may</option>
<option value="6">jun</option>
<option value="7">jul</option>
<option value="8">ago</option>
<option value="9">sep</option>
<option value="10">oct</option>
<option value="11">nov</option>
<option value="12">dic</option></select>    <select aria-label="Año" name="Año" id="Año" title="Año"><option value="0" selected="1">Año</option>
<option value="2015">2015</option>
<option value="2014">2014</option>
<option value="2013">2013</option>
<option value="2012">2012</option>
<option value="2011">2011</option>
<option value="2010">2010</option>
<option value="2009">2009</option>
<option value="2008">2008</option>
<option value="2007">2007</option>
<option value="2006">2006</option>
<option value="2005">2005</option>
<option value="2004">2004</option>
<option value="2003">2003</option>
<option value="2002">2002</option>
<option value="2001">2001</option>
<option value="2000">2000</option>
<option value="1999">1999</option>
<option value="1998">1998</option>
<option value="1997">1997</option>
<option value="1996">1996</option>
<option value="1995">1995</option>
<option value="1994">1994</option>
<option value="1993">1993</option>
<option value="1992">1992</option>
<option value="1991">1991</option>
<option value="1990">1990</option>
<option value="1989">1989</option>
<option value="1988">1988</option>
<option value="1987">1987</option>
<option value="1986">1986</option>
<option value="1985">1985</option>
<option value="1984">1984</option>
<option value="1983">1983</option>
<option value="1982">1982</option>
<option value="1981">1981</option>
<option value="1980">1980</option>
<option value="1979">1979</option>
<option value="1978">1978</option>
<option value="1977">1977</option>
<option value="1976">1976</option>
<option value="1975">1975</option>
<option value="1974">1974</option>
<option value="1973">1973</option>
<option value="1972">1972</option>
<option value="1971">1971</option>
<option value="1970">1970</option>
<option value="1969">1969</option>
<option value="1968">1968</option>
<option value="1967">1967</option>
<option value="1966">1966</option>
<option value="1965">1965</option>
<option value="1964">1964</option>
<option value="1963">1963</option>
<option value="1962">1962</option>
<option value="1961">1961</option>
<option value="1960">1960</option>
<option value="1959">1959</option>
<option value="1958">1958</option>
<option value="1957">1957</option>
<option value="1956">1956</option>
<option value="1955">1955</option>
<option value="1954">1954</option>
<option value="1953">1953</option>
<option value="1952">1952</option>
<option value="1951">1951</option>
<option value="1950">1950</option>
<option value="1949">1949</option>
<option value="1948">1948</option>
<option value="1947">1947</option>
<option value="1946">1946</option>
<option value="1945">1945</option>
<option value="1944">1944</option>
<option value="1943">1943</option>
<option value="1942">1942</option>
<option value="1941">1941</option>
<option value="1940">1940</option>
<option value="1939">1939</option>
<option value="1938">1938</option>
<option value="1937">1937</option>
<option value="1936">1936</option>
<option value="1935">1935</option>
<option value="1934">1934</option>
<option value="1933">1933</option>
<option value="1932">1932</option>
<option value="1931">1931</option>
<option value="1930">1930</option>
<option value="1929">1929</option>
<option value="1928">1928</option>
<option value="1927">1927</option>
<option value="1926">1926</option>
<option value="1925">1925</option>
<option value="1924">1924</option>
<option value="1923">1923</option>
<option value="1922">1922</option>
<option value="1921">1921</option>
<option value="1920">1920</option>
<option value="1919">1919</option>
<option value="1918">1918</option>
<option value="1917">1917</option>
<option value="1916">1916</option>
<option value="1915">1915</option>
<option value="1914">1914</option>
<option value="1913">1913</option>
<option value="1912">1912</option>
<option value="1911">1911</option>
<option value="1910">1910</option>
<option value="1909">1909</option>
<option value="1908">1908</option>
<option value="1907">1907</option>
<option value="1906">1906</option>
<option value="1905">1905</option></select><br></br>
<input type="radio" name="transporte" value="1"> Hombre   <input type="radio" name="transporte" value="1"> Mujer<br></br>
<input type="checkbox">
<font size="2">Aceptas las condiciones de uso y la política de privacidad propuesta en nuestras cookies<br></br>
<center><input type="submit" name="Submit" value="Registrarse" style="color:black; height:60px; width:300px; font-size:28px; background-color:yellow; font-family:tahoma;"></center>
</center><br></br>
</div>
</form>
</div>
</div>
<div class="footer">
<center>
<footer>
<font color="green" size="1">¿Quiénes somos?       Condiciones de uso       Política de privacidad       Crear una pagina       Movil       Juegos       Idiomas       Ayuda          <font color="green" size="2">© Social + 2.015
</footer>
</center><br></br>
</div>
</style>
</body>
</html>

El botón envía los datos del formulario.

Entonces, ¿para qué necesitas una ventana modal?

¿Qué información va a mostrar esta ventana modal?

Y claro, ese botón es para mostrar el formulario de inicio de sesión cuando un usuario registrado se loguea...

<!-- Boton para loguearse -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Iniciar Sesion
</button>
<!-- Ventana Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <!-- el formulario de logueo -->
<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Recordarme
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Entrar</button>
    </div>
  </div>
</form>
      </div>
    </div>
  </div>
</div>

Añade tu respuesta

Haz clic para o

Más respuestas relacionadas

No se donde encerrar el div

Dentro del div tengo el formulario de registro ¿Pero dónde tengo que cerrar para que me separe y no me quede de este modo?: Los códigos del (index.php) <div id="general"><br></br><font color="white"><font face="Tahoma" size="6">Regístrate <font...
1 respuesta

¿Por que no me funciona el javascript en firefox?

Estoy haciendo una pagina web y he hecho un menu con javascript, pero no consigo que funcione en FIREFOX, en IE, en safari, chrome me funciona. Pero me tiene que funcionar en firefox ya que es uno de los que mas se usan. ¿Veis algun fallo o me falta...
1 respuesta

Fijar un div o tabla para q no se cambie el ancho

Te escribo nuevamente por lo siguiente, estoy haciendo un blog, entonces la parte de los post, es decir de los registros del blog estaran del lado izquierdo, para poner otras cosas del lado derecho, la pregunta es: cuando hago un contenido muy largo...
1 respuesta

Visualización

Hice una página para un una universidad que me pidieron tero tengo problemas con la visualización esta es la dirección http://163.10.0.155/webproyecto2006/folder10/ Tengo problemas con los <div></div> y con las imágenes degrade si a la pantalla le...
1 respuesta

Posición de un div

Mi problema es sencillo pero no logro solucionarlo es el siguiente tengo una tabla <tabla> <tr> <td> <div class=menu9" ></div> </td> <td> un formulariio extenso </td> <tr> Resulta que el menu me sale en la mitad de la primera columna yo quiero que se...
1 respuesta

Sobre el Footer

Soy Manuel, he realizado mi página web en photoshop, html5 y por último en css3, pero en ésta última parte no logro colocar los iconos de la redes sociales, sólo me aparece un hueco como si estuviera puesto, aunque en realidad no hay nada, lo he...
1 respuesta

Grabar desconexión de usuario logueado

Tengo una web en la que los usuarios pueden loguearse, y al hacerlo se graba en una base de datos mysql el usuario y la hora de conexión. Quisiera saber cómo hacer para que también quede grabada la hora de "desconexión". Si pulsan el botón de cerrar...
2 respuestas

Tablas Especiales

Quisiera crear en mi Website una tabla como la que hay en la siguiente web: - www.economist.com. La tabla con etiquetas que dicen "Most Commented", "Most Recommended"... El tipo de etiquetas en las que una ya sale pulsada y no redirigen a otras...
2 respuestas

Problemas con menu en css

Tengo un código de un menu desplegable, consta de un código html y otro css: Código html: <html> <head> <title> </title> <link rel="stylesheet" type="text/css" href="./estilos/menudesplegable3.css"> </head> <body style=" font-family: arial;...
1 respuesta

Como mostrar solo 2 decimales en este código PHP

Tengo este código php en el cual cuando introduzco un numero en el campo precio se muestra un porcentaje de ese numero en el campo monto y monto2 El problema es que para algunos numero el resultado de esta operación muestra el numero en los campos...
1 respuesta