Creé un modal de arranque, estoy buscando una posible solución para hacer que mi contenido modal cambie dinámicamente ... aquí está mi modal

<div class="modal fade" id="signupmodal">
      <div class="modal-dialog">
      <div class="modal-content">
          <div class="modal-header">
              <h4>Sign up or log in</h4>
          </div>
          <div class="modal-body">
              <a class="btn btn-block btn-social btn-facebook btn-lg">
              <i class="fa fa-facebook"></i> Sign in with Facebook
              </a>
          <h4 style="text-align:center;"><b>OR</b></h4>
             <a class="btn btn-success btn-lg btn-block" data-toggle="modal" data-target="#loginmodal">LOG IN</a>
             <a type="button" class="btn btn-link btn-md" data-toggle="modal" >Create Account</a>
          </div>
          <div class="modal-footer">
              <button type="button" class="btn btn-danger btn-sm" data-dismiss="modal"><b>Close</b></button>
          </div>
          </div><!--modalcontent-->
      </div><!--modaldialog-->
  </div><!--modalfade -->`

Cuando hago clic en el botón de inicio de sesión, quiero cambiar el contenido de mi cuerpo modal a este formulario de inicio de sesión

 <form>
    <div class="form-group">
       <label for="inputEmail">Email / Username</label>
       <input class = "form-control" type="email"       id="inputEmail"placeholder="Email">
     </div>
    <div class="form-group">
       <label for="inputPassword">Password</label>
       <input class = "form-control" type="password" id="inputPassword" placeholder="Password">
       <a type="button" class="btn btn-link btn-sm">Forgot password</a>
     </div>
    <div class="form-group">
        <a type="button" class="btn btn-info btn-md">Log in</a>
      </div>
  </form>

¡MUCHAS GRACIAS!

2
Angela 8 dic. 2016 a las 22:05
Siempre puede ocultar las secciones que no desea ver al principio con una clase de ocultación y luego usar js para agregar / eliminar la clase de ocultación según sea necesario para mostrar diferentes partes del contenido. Esto también supone que todo el contenido ya está en la página en algún lugar.
 – 
justDan
8 dic. 2016 a las 22:08

3 respuestas

Basta con mirar el código y conocerá la solución.

Solo recuerde que no es necesario que las cosas que no ve en el navegador no puedan estar allí. Por ejemplo, en su caso, lo que desea hacer es hacer clic en el inicio de sesión y el código de algún otro lugar debe cargarse en su div modal-body donde en este caso no es necesario hacerlo, sino que puede hacer lo que Tengo un programa en un fragmento.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="modal-body">
  <div id="initial-content">
    <a class="btn btn-block btn-social btn-facebook btn-lg">
      <i class="fa fa-facebook"></i> Sign in with Facebook
    </a>
    <h4 style="text-align:center;"><b>OR</b></h4>
    <a class="btn btn-success btn-lg" onclick="$('#login-content').show();$('#initial-content').hide();">LOG IN</a>
    <a class="btn btn-success btn-lg" type="button" class="btn btn-link btn-md" data-toggle="modal">Create Account</a>
  </div>
  <div id="login-content" style="display :none;">
    <a class="btn btn-success btn-lg" onclick="$('#login-content').hide();$('#initial-content').show();$('#form-id').trigger('reset');"><i class="fa fa-arrow-circle-left" aria-hidden="true"></i>Back</a>
    <form id="form-id">
      <div class="form-group">
        <label for="inputEmail">Email / Username</label>
        <input class="form-control" type="email" id="inputEmail" placeholder="Email">
      </div>
      <div class="form-group">
        <label for="inputPassword">Password</label>
        <input class="form-control" type="password" id="inputPassword" placeholder="Password">
        <a type="button" class="btn btn-link btn-sm">Forgot password</a>
      </div>
      <div class="form-group">
        <a type="button" class="btn btn-info btn-md">Log in</a>
      </div>
    </form>
  </div>
</div>

Y como sugirieron otros, use el diálogo de arranque. Pero en ese caso, mirando también sus requisitos, su código también seguirá siendo el mismo hasta que, ya menos que desee mostrar el botón de inicio de sesión en algún lugar en lugar de modal-body. Sin duda, ese complemento hará que su código sea mucho más fácil de entender y editar que nunca.

3
Shalin Patel 15 dic. 2016 a las 14:54

Puedes:

  1. Coloque el formulario HTML en una variable de Javascript o en un div oculto
  2. Haga una función jQuery y al hacer clic en el botón Iniciar sesión cargue la salida del formulario HTML.
0
Johann Kratzik 8 dic. 2016 a las 22:10

Sugiero probar bootstrap-dialog, es una gran herramienta que simplifica el trabajo para mostrar diálogos.

Consulte la sección Manipulación de mensajes de diálogo para saber cómo cambiar el contenido de su diálogo de forma dinámica, hay una función setMessage:

    BootstrapDialog.show({
        title: 'Default Title',
        message: 'Click buttons below.',
        buttons: [{
            label: 'Message 1',
            action: function(dialog) {
                dialog.setMessage('Message 1');
            }
        }, {
            label: 'Message 2',
            action: function(dialog) {
                dialog.setMessage('Message 2');
            }
        }]
    });
0
Bruno 8 dic. 2016 a las 22:14