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

Related Posts:

¿Como eliminar espacio en los bordes con bootstrap? – html css bootstrap
Pregunta: Estoy intentando hacer un login con bootstrap y me surgió un problema con los bordes, cuando intento insertar un borde en el formulario se ...
Estilar un pseudoelemento ::after con jQuery – javascript jquery html
Pregunta: ¿Cómo seleccionar desde jQuery un elemento de este estilo? .page-container .single-page:nth-of-type(2)::after { } La idea es poder modificar ciertas reglas CSS desde JavaScript. ...
Cual es la ventaja o desventaja de hacer una ventana modal de esta forma? – javascript modal
Pregunta: He visto muchos plugins que permiten integrar ventanas modales en nuestras webs, los cuales contienen mucho código javascript. En la pagina w3school tienen un tipo ...
Quitar parpadeo de animation timing function – javascript html css
Pregunta: tenia una duda. Quería conseguir que el fondo de mi web cambiara usando keyframes. Por ello usé animation-timing-function: step-start;. El problema es que sí ...
HTML/CSS renderizado de manera extraña – html css less
Pregunta: Tengo un problema con el renderizado HTML/CSS. Cómo es posible que de éste código: <div class="gal-preview"> <div class="thumbnail"> ...
No funciona JQuery en un archivo js – javascript jquery html
Pregunta: Mi problema es que no puedo usar jquery en mis archivos js, apesar que ya esta integrado en html e incluso funciona con bootstrap. Trate ...
¿Como puedo alinear verticalmente un contenido de un div con bootstrap 3? – html css bootstrap
Pregunta: Si observan el ejemplo en una resolución de 1024p podrán observar como el texto del label se extiende y el select pegado a la ...
Alineación vertical central con CSS – html css
Pregunta: Pregunta Tengo una etiqueta div que contiene text. Quireo que el contenido de este dive se alinee verticalmente al centro. ¿Cómo puedo lograrlo? Fragmento #box { height: ...
contar sabado y domingo en un rango de fechas con datapicker – javascript bootstrap
Pregunta: Como puedo saber cuandos sabados y domingos hay en un rango de fechas 01-01-2017 & 20-01-2017 (por ejemplo), sabiendo que datapicker (bootstrap) tiene un arreglo ...
¿Cómo colocar cajas del mismo tamaño? Tengo un problema – html css flexbox
Pregunta: Buenas, estoy creando una página web en html y css, pero me topé con un problema: Resulta que en la sección de trabajos quiero que ...
Abro un form modal en ASP.NET MVC y aparece como inactivo – asp.net bootstrap mvc
Pregunta: Buenas noches tengo una pequeña duda, estoy abriendo un form modal y cuando presiono el boton que lo abre sale como si el form modal ...
Poner elementos de html una debajo de otro – html5 css
Pregunta: Hola mi estructura html sería: .navbar { background-color: #62ADD6; font-size: 15px; border: 0; position: fixed; height: 80px; } #pie { ...
¿Cómo eliminar el espacio entre este header y el nav? – html html5 css
Pregunta: Buenas tardes. Estoy empezando en esto de la programación web con HTML5 y CSS3 y próximamente JS, y al hacer un intento de página web, ...
Como cargar correctamente Jquery y Bootstrap – jquery bootstrap
Pregunta: Buenos dias a todos, estoy haciendo una web que hace uso de JQuery y de Bootstrap (incluido algunos plugins como DateTimePicker). Mas o menos ...
Ocultar en bootstrap 4 – css bootstrap-4
Pregunta: Estoy intentando ocultar un texto de la siguiente manera <ul class="col-6 col-lg-4"> <li> <i class="fa fa-briefcase" ...

Add a Comment

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