Skip to main content
<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="~/assets/img/descarga.jpg" />
                    </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="~/assets/img/lear_inverse.png" alt="imagen-responsive" />
                    </div>
                </div>
            </div>
        </div>
    </div>

Este el codigo del modal.

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

<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="~/assets/img/descarga.jpg" />
                    </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="~/assets/img/lear_inverse.png" alt="imagen-responsive" />
                    </div>
                </div>
            </div>
        </div>
    </div>

Este el codigo del modal.

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

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

Origen Enlace
Reyes
  • 76
  • 2
  • 9

Oscurecer fondo al ejecutarse un modal boostrap?

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

<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="~/assets/img/descarga.jpg" />
                    </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="~/assets/img/lear_inverse.png" alt="imagen-responsive" />
                    </div>
                </div>
            </div>
        </div>
    </div>

Este el codigo del modal.

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

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