Modal does not appear full

Question

Modal does not appear full

Navigation

#1 by (2 votes)
#2 by (1 votes)
#3 by (0 votes)

1

This is how my Modal appears:

I need you to appear complete and overlap in front of everything. This is my code:

<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 -->

css bootstrap modal

asked by Luis Morales 07.04.2017 в 05:37

source

3 answers

1

Try the property z-index CSS.

Example:

<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">

answered by 07.04.2017 в 06:00

0

I use BootstrapDialog and I do not have to create or initialize div or container for modal, I'm not having problems ; certainly the html code correctly (closing the tags); example:

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();
                  }
          }
   ]
});

In my opinion, it is very complete and without many explanations, I am using it with bootstrap, jquery. Of course you can skip showing buttons and closing icon.

Look in the documentation where BootstrapDialog.show({....}); appears

answered by 07.04.2017 в 06:18

Define list within matrix At what time use "VAR" in javascript and why is it necessary? [duplicate]

score 2 · Accepted Answer

In fact, the problem is that the menu and header (greens) have a z-index higher than the modal one. It is likely that you gave a z-index too high if you have a fixed header. To fix this just give a z-index greater than the modal one that the header has.

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

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