Cambiar visibilidad fondo Ventana modal

publicado por: Anonymous

estoy intentando hacer una newsletter, para hacerla me he bajado código de ejemplo ya hecho y lo he introducido en una ventana modal, el caso es que cuando abro la ventana modal la web se queda prácticamente en negro, y lo que quiero es que se vea totalmente la pagina web o bien tengo muy poca opacidad
El codigo de la modal

_x000D_

_x000D_

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">_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_
<!-- Button to Open the Modal -->_x000D_
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">_x000D_
  Open modal_x000D_
</button>_x000D_
_x000D_
<!-- The Modal -->_x000D_
<div class="modal" id="myModal">_x000D_
  <div class="modal-dialog">_x000D_
    <div class="modal-content">_x000D_
_x000D_
      <!-- Modal Header -->_x000D_
      <div class="modal-header">_x000D_
        <h4 class="modal-title">Modal Heading</h4>_x000D_
        <button type="button" class="close" data-dismiss="modal">&times;</button>_x000D_
      </div>_x000D_
_x000D_
      <!-- Modal body -->_x000D_
      <div class="modal-body">_x000D_
        Modal body.._x000D_
      </div>_x000D_
_x000D_
      <!-- Modal footer -->_x000D_
      <div class="modal-footer">_x000D_
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>_x000D_
      </div>_x000D_
_x000D_
    </div>_x000D_
  </div>_x000D_
</div>

_x000D_

_x000D_

_x000D_

Ejemplo de como se ve introducir la descripción de la imagen aquí

solución

Tienes que cambiarle el color de fondo al div que crea para introducir todo el contenido del modal.

“#myModal” es el div que contiene todo, y .modal-dialog, es el div que contiene lo que es el cuadro blanco en si, si cambias el color de fondo a #myModal usando rgba, conseguirias el efecto que quieres.

#myModal{
    background-color: rgba(0,0,0, 0.5) !important;
}

en el 0.5 pon la opacidad que te guste, el !important es para sobrescribir alguna clase que viene por defecto en bootstrap.

Si #myModal no es el div que contiene todo, búscalo con el inspector y aplica esa regla CSS a dicho div.

Espero que te sirva 🙂

Respondido por: Anonymous

Leave a Reply

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