0

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<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 to Open the Modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  Open modal
</button>

<!-- The Modal -->
<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Modal Heading</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
        Modal body..
      </div>

      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
      </div>

    </div>
  </div>
</div>

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

2 respuestas 2

4

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 :)

2
  • lo he conseguido dando al modal el style background-color: transparent que es igual que lo que tu me has puesto pero con otras palabras, por lo que mis ++++
    – KeTeMeTo
    Commented el 19 ago. 2019 a las 11:57
  • Perfecto, lo del rgba es por si querías un tono grisáceo con opacidad.
    – CobasESP
    Commented el 19 ago. 2019 a las 12:01
0

Necesitariamos el codigo css para ayudarte mejor, pero seguramente con opacity lo puedes quitar.

.modal {
  opacity: 0.2;
}
5
  • Buenas, en primer lugar muchas gracias pro contestar, en segundo lugar así cambia la opacidad de la ventana modal, no el color de la parte de atras de la modal (la pagina web)
    – KeTeMeTo
    Commented el 19 ago. 2019 a las 11:42
  • puedes compartir el css para verlo mejor?
    – Vitorsinc
    Commented el 19 ago. 2019 a las 11:43
  • no hay codigo css mas que el por defecto de bootstrap, voy a crear un snipet en la pregunta para que puedas probarlo
    – KeTeMeTo
    Commented el 19 ago. 2019 a las 11:44
  • Al inspeccionar tu modal abierto hay un div con la class="modal-backdrop show", ese es el que te esta poniendo el fondo negro.
    – Vitorsinc
    Commented el 19 ago. 2019 a las 11:55
  • muchas gracias por responder, lo he conseguido poniendo la propiedad background-color : transparent
    – KeTeMeTo
    Commented el 19 ago. 2019 a las 11:58

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.