Darken background when running a boostrap modal?

Navigation
0

Good afternoon developers I have been researching in several programming forums but I have not found a satisfactory solution, what I want is that when my Pop-Up (modal) is executed, the main page is dark so that the modal highlights more attached the code to see what I need to change or add to achieve this effect ... 

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

and here the code that I have in css to position it in the center of the screen, I must change something in the code I wait for your answers. Thanks

    
asked by Reyes 26.03.2018 в 21:58
source

2 answers

0

I already found the property that I was missing in css and it is the following one 

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

thanks for the help

    
answered by 26.03.2018 / 22:38
source
3

Add this to your CSS 

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

The! important will not overwrite the value

    
answered by 26.03.2018 в 22:12
a group of students can not use that classroom if it is already reserved at that time [duplicated] Can you split a String by a String string with a structure?