0

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

.modal{
        text-align:center;
        padding:0!important;         
    }
    .modal:before{
        content:'';
        display:inline-block;
        height:100%;
        vertical-align:middle;
        margin-right: -4px;
    }
    .modal-dialog{
        display:inline-block;
        text-align:left;
        vertical-align:middle;
    }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<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>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

  
  <button data-toggle="modal" data-target="#PopUpNoAutorizado">Abrir</button>
 <div class="modal" id="PopUpNoAutorizado" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header Popup">
                <div class="col-xs-12">
                    <h5>
                        ENTRADA ELECTRONICA
                        <small class="text-muted color">Almacen Planta Naco</small>
                    </h5>
                </div>                  
            </div>
            <div class="modal-body">                    
              <div class="col-xs-4"></div>
                <div class="col-xs-8"> 
                  <img src="" />
                </div>                   
              <div class="col-sx-12 centrarTexto">
                  <h1>Acceso no autorizado</h1>
              </div>              
            </div> 
            <div class="modal-footer Popup">
              <div class="col-xs-10 modal-edit">
                  <h5>100 Años</h5>
              </div>
              <div class="col-xs-2">
                  <img class="img-responsive" src="" alt="imagen-responsive" />
              </div>
          </div>
        </div>
    </div>
  </div>

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

4
  • 1
    Yo veo el fondo oscuro en la ejecución. Bootstrap lo genera automáticamente. Commented el 26 mar. 2018 a las 20:10
  • pareciera que si pero en mi proyecto no lo hace aunque se bloquea la pantalla no eh logrado que el fondo se oscuresca un poco
    – Reyes
    Commented el 26 mar. 2018 a las 20:17
  • en mi caso si se oscurece, pero le fui agregando más modales pero me oscurece la pantalla de abajo (de todos los modales) y me mantie Commented el 3 jul. 2019 a las 16:50
  • agrega la clase fade junto a modal Commented el 3 jul. 2019 a las 16:53

2 respuestas 2

3

Agrega esto a tu CSS

.modal-backdrop
{
    opacity:0.5 !important;
}

El !important hará que no se sobrescriba el valor

1
  • ya habia probado agregarlo en css pero no me ha funcionado gracias por tu aporte
    – Reyes
    Commented el 26 mar. 2018 a las 20:18
0

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

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.