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