Modal no aparece completo – css bootstrap modal

Pregunta:


Así aparece mi Modal:

Error del modal

Necesito que me aparezca completo y se superponga por delante de todo. Este es mi código:

<div class="row">     
  <div class="modal" id="mostrarmodal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h3>Descuento Especial</h3>
          <div class="modal-body">
            <h4></h4>
            <div class="row">
              <div id="inner">    
                <img src="img/logo/imgmodal2.png" class="img-responsive pull-left" width="200" height="300"> 
                <div class="col-lg-6 col-md-6 col-sm-12">
                  <h2>Descuento de</h2>
                  <h3>S/10.00 Soles</h3>
                  <p>para tu primera compra</p>
                  @if(Auth::check() && $cantidad_ordenes == null)
                    <p>ANDA RAPIDO POR TU PRIMERA COMPRAR</p>
                    <div class="clear">
                      <button sytle="text-decoration: none;" class="btn btn-danger"><a href="{{ route('index') }}#product" >Productos</a></button>
                    </div> <!-- fin clear -->
                  @else
                    <p>Registrate y obten tu primera compra</p>
                    <div class="clear">
                      <button sytle="text-decoration: none;" class="btn btn-success"><a href="{{ route('register') }}" >Registrate</a></button>
                    </div>
                  @endif
                </div>
              </div><!-- fin inner -->
            </div> <!-- fin row -->
          </div> <!-- fin modal-body -->
        </div> <!-- fin modal-header -->  
      </div><!-- fin modal-content -->
    </div><!-- fin modal-dialog -->
  </div><!-- fin modal fade -->
</div><!-- fin row -->

Preguntado por: Luis Morales

Guz

De hecho, el problema es que el menú y la cabecera (verdes) tienen un z-index más alto que la de la modal. Es probable que le hayas dado un z-index demasiado alto si tienes la cabecera fija. Para arreglar esto solo dale un z-index mayor al modal que el que tiene la cabecera.

.header {
  z-index: 20; /* Por ejemplo, tu header tiene 20 */
}

.modal {
  z-index: 25; /* Le damos un rango más alto a las modales
}

Prueba con la propiedad z-index de CSS.

Ejemplo:

<div class="row">     
 <div class="modal" style="z-index:1000" id="mostrarmodal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
  <div class="modal-dialog">

Hago uso de BootstrapDialog y no tengo que crear ni inicializar div o contenedor para la modal, no estoy teniendo problemas; desde luego el código html correctamente (cerrando los tags); ejemplo:

BootstrapDialog.show({
   title: 'el titulo de tu ventana',
   message: 'aqui tu html',
   closeByBackdrop: false,
   closeByKeyboard: true,
   closable: true,
   size: BootstrapDialog.SIZE_LARGE, // Hay diversos valores
   type: BootstrapDialog.TYPE_INFO, // Hay diversos valores
   buttons: [
      {
         label: 'Aceptar',
         action: function (dialogRef) {
                    // lo que quieras hacer
                    dialogRef.close(); // Finalmente la cierro
                  }
      },
      {
         label: 'Cerrar',
          action: function (dialogRef) {
                      dialogRef.close();
                  }
          }
   ]
});

A mi parecer es muy completa y sin muchas comlicaciones, la estoy usando con bootstrap, jquery. DEsde luego le puedes omitir se muestren botones e icono de cerrar.

Mira en la documentación desde donde aparecer BootstrapDialog.show({....});

Fuente

Add a Comment

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *