Oscurecer fondo al ejecutarse un modal boostrap?

publicado por: Anonymous

Buenas tardes desarrolladores eh estado investigando en varios foros de programacion pero no eh encontrado una solucion satisfactoria, lo que quiero es que cuando se ejecute mi Pop-Up(modal), la pagina principal se oscuresca para que el modal resalte mas adjunto el codigo para ver que necesito cambiar o agregar para lograr dicho efecto…

_x000D_

_x000D_

.modal{_x000D_
        text-align:center;_x000D_
        padding:0!important;         _x000D_
    }_x000D_
    .modal:before{_x000D_
        content:'';_x000D_
        display:inline-block;_x000D_
        height:100%;_x000D_
        vertical-align:middle;_x000D_
        margin-right: -4px;_x000D_
    }_x000D_
    .modal-dialog{_x000D_
        display:inline-block;_x000D_
        text-align:left;_x000D_
        vertical-align:middle;_x000D_
    }

_x000D_

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">_x000D_
_x000D_
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>_x000D_
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>_x000D_
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>_x000D_
_x000D_
  _x000D_
  <button data-toggle="modal" data-target="#PopUpNoAutorizado">Abrir</button>_x000D_
 <div class="modal" id="PopUpNoAutorizado" tabindex="-1" role="dialog">_x000D_
    <div class="modal-dialog" role="document">_x000D_
        <div class="modal-content">_x000D_
            <div class="modal-header Popup">_x000D_
                <div class="col-xs-12">_x000D_
                    <h5>_x000D_
                        ENTRADA ELECTRONICA_x000D_
                        <small class="text-muted color">Almacen Planta Naco</small>_x000D_
                    </h5>_x000D_
                </div>                  _x000D_
            </div>_x000D_
            <div class="modal-body">                    _x000D_
              <div class="col-xs-4"></div>_x000D_
                <div class="col-xs-8"> _x000D_
                  <img src="" />_x000D_
                </div>                   _x000D_
              <div class="col-sx-12 centrarTexto">_x000D_
                  <h1>Acceso no autorizado</h1>_x000D_
              </div>              _x000D_
            </div> _x000D_
            <div class="modal-footer Popup">_x000D_
              <div class="col-xs-10 modal-edit">_x000D_
                  <h5>100 Años</h5>_x000D_
              </div>_x000D_
              <div class="col-xs-2">_x000D_
                  <img class="img-responsive" src="" alt="imagen-responsive" />_x000D_
              </div>_x000D_
          </div>_x000D_
        </div>_x000D_
    </div>_x000D_
  </div>

_x000D_

_x000D_

_x000D_

y aqui el codigo que tengo en css para posicionarlo al centro de la pantalla, debo cambiar algo en el codigo espero sus respuestas. Gracias

solución

ya encontre la propiedad que me faltaba en css y es la siguiente

background-color: rgba(0,0,0,0.7);

gracias por la ayuda

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *