0

Hola buenas tengo un problema, y es que cuando abro una ventana modal con javascript, se me pone un fondo negro. El problema es que clickeo en el ese fondo negro y puedo operar como si no lo estuviese. Como puedo hacer para que esa parte de la zona negra alrededor de la modal, no se pueda hacer click? un saludo

 .filaRondasDesc, .filaAgrDesc {
  white-space: nowrap;
  width: 20em;
  font-size: 1.1em;
  margin-bottom: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.modalOverlay, .modalOverlay_update {
  width: 100%;
  height: 100%;
  z-index: 1111;
  backgroundcolor: #000;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  opacity: 0.7;
  position: fixed;
  top: 0;
  left: 0;
  display: none;
  margin: 0;
  padding: 0;
}

.modal {
  margin-left: auto;
  margin-right: auto;
  position: fixed;
  z-index: 1112;
  top: 47%;
  display: none;
}
5
  • Hola Ruben. puedes mostrar tu codigo para contextualizarnos y sobre èl poder ayudarte? Si no, es muy amplio. Recuerda leer Cómo preguntar. Un saludo
    – lois6b
    Commented el 3 oct. 2017 a las 7:27
  • No se que hacer ya, he jugado con el z-index pero nada.
    – Ruben
    Commented el 3 oct. 2017 a las 7:40
  • Hace falta más código, el HTML y el css del div ese negro a ver como está hecho
    – user7176
    Commented el 3 oct. 2017 a las 7:42
  • Cuelga el html para poder ejecutarlo
    – GDP
    Commented el 3 oct. 2017 a las 8:03
  • tienes un error aqui: backgroundcolor. Debería ser background-color con guion, es posible que a partir de ahí el CSS falle.
    – user7176
    Commented el 3 oct. 2017 a las 8:14

1 respuesta 1

0

Tienes que usar backdrop: 'static' para bloquear el fondo.

$(function() {
  $('#uploadedImagePopup').modal({
    show: true,
    keyboard: false,
    backdrop: 'static'
  });
});
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">

    <div class="modal fade modal-popup confirm-uploaded-image-popup" id="uploadedImagePopup" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-content modal-dialog modal-popup-content" role="document">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <div class="confirm-uploaded-image-popup-img"></div>
          <div class="modal-popup-desc">You have uploaded a picture. Are you sure you want to add it to your gallery?</div>
        </div>
        <div class="modal-footer">
          <button data-dismiss="modal" class="btn btn-very-light-gray confirm-uploaded-image-popup-cancel">Cancel</button>
          <button class="btn btn-green confirm-uploaded-image-popup-ok">OK</button>
        </div>
        <div>
        </div>
      </div>
    </div>
  </div>

</body>

</html>

4
  • @Ruben de todas formas, al llamar a la modal, prueba backdrop: 'static'.
    – GDP
    Commented el 3 oct. 2017 a las 7:42
  • esta hecha con javascript, como llamo a eso?
    – Ruben
    Commented el 3 oct. 2017 a las 7:44
  • jQuery. ¿Como llamas a tu modal? Pon el código entero, HTML+javascript, para que sea ejecutable.
    – GDP
    Commented el 3 oct. 2017 a las 7:45
  • Esto es lo que hago para sacar el fondo de atras var overlay_update = $(".modalOverlay_update"); overlay_update.show();
    – Ruben
    Commented el 3 oct. 2017 a las 7:50

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.