Quiero agregar una funcionalidad para mi lightbox, para que también se cierre al hacer clic en el fondo.

En la actualidad se cierra al hacer clic en el botón Cerrar. Pero también debería cerrarse al hacer clic en el fondo y no al hacer clic en el contenido interno de la caja de luz.

Tengo un formulario dentro de mi caja de luz, por lo que hacer que se cierre al hacer clic en cualquier lugar de la caja de luz no funciona para mi requisito.

¿Hay alguna manera de que pueda hacer esto usando solo CSS o PHP, ya que esta funcionalidad se agregará en un sitio web de WordPress?

Este es mi ejemplo de lightbox:

    <a href="#lightboxCustom">Click here</a> 

    <div id="lightboxCustom">
            <div class="lightboxCustomDiv">
            <a class="close" href="#_"><span style="color: #fff;">X</span></a>
            <center><h2>Title</h2><br></center>
            <p>Content </p>
            <form>
            <input type="text">
            <input type= "submit>
            </form>
        </div>
        </div>

CSS:

.lightboxCustom:target {
    outline: none;
    display: block;
}

.lightboxCustom{
    display: none;
    position: fixed;
    z-index: 999;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
}
0
MJ2410 15 oct. 2019 a las 13:58

4 respuestas

La mejor respuesta

Use otro enlace de este tipo y colóquelo detrás de su caja de luz, cubriendo la pantalla completa, para que "atrape" todos los clics fuera de la caja de luz.

Moví el color de fondo desde el elemento div externo al interno - para que el enlace pueda "sentarse" entre los dos, y cubrir todo lo que no está cubierto por el div interno.

Probablemente desee agregar más formato para obtener el elemento interno bien centrado en el contenedor, etc., pero el principio básico funciona. (El enlace cercano afuera tiene un fondo rojo sólido aquí, para fines de demostración).

.lightboxCustom:target {
  outline: none;
  display: block;
}

.lightboxCustom {
  display: none;
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.lightboxCustominner {
  background: rgba(0, 0, 0, 0.8);
}

.close-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: red;
  z-index: -1;
}
<a href="#lightboxCustom">Click here</a>

<div class="lightboxCustom" id="lightboxCustom">
  <a class="close-bg" href="#_"></a>
  <div class="lightboxCustominner">
    <a class="close" href="#_"><span style="color: #fff;">X</span></a>
    <center>
      <h2>Title</h2><br></center>
    <p>Content </p>
    <form>
      <input type="text">
      <input type="submit">
    </form>
  </div>
</div>
1
04FS 15 oct. 2019 a las 12:33

Supongo que tienes un fondo oscuro alrededor de tu caja de luz, ¿verdad? Si desea que sea solo CSS, sugeriría que el fondo div sea un hermano.

<div class="lightboxCustom">
  <div class="lightboxCustominner">
  </div>
</div>
<div class="lightboxBackdrop">
</div>
.lightboxBackdrop {
  display: none;
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);

  //you need to play with z-index to make it look right
  z-index: 0;
}

.lightboxCustom {
  z-index: 1000;
}

.lightboxCustom:target {
  display: block;
}
.lightboxCustom:target + .lightboxBackdrop {
  display: block;
}

Nunca he hecho algo así y no tengo idea de qué tan bien funciona para la accesibilidad.

0
mtk 15 oct. 2019 a las 11:11

Su código funciona bien, solo necesitaba un poco de estilo CSS.

.lightboxCustom:target {
    outline: none;
    display: block;
}

.lightboxCustom{
    display: none;
    position: fixed;
    z-index: 999;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
    padding: 10px;
}
.lightboxCustominner {
  margin: auto;
  width: 500px;
  background: #fff;
  padding: 5px;
}
.close {
  color: #000;
  padding: 5px;
}
<a href="#lightboxCustom">Click here</a> 
<div class="lightboxCustom" id="lightboxCustom">
    <div class="lightboxCustominner">
        <a class="close" href="#_">X</a>
        <center><h2>Title</h2><br></center>
        <p>Content </p>
        <form>
            <input type="text">
            <input type= "submit>
        </form>
    </div>
</div>
0
Aakash Tushar 15 oct. 2019 a las 12:32

Puedes usar este código

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <title>Hello, world!</title>
    <style type="text/css">
        body, html {
            padding: 0;
            margin: 0;
            text-align: center;
        }
        a.lightbox img {
            height: 150px;
            border: 3px solid white;
            box-shadow: 0px 0px 8px rgba(0,0,0,.3);
            margin: 94px 20px 20px 20px;
        }
        .lightbox-target {
            position: fixed;
            top: -100%;
            width: 100%;
            background: rgba(0,0,0,.7);
            width: 100%;
            opacity: 0;
            -webkit-transition: opacity .5s ease-in-out;
            -moz-transition: opacity .5s ease-in-out;
            -o-transition: opacity .5s ease-in-out;
            transition: opacity .5s ease-in-out;
            overflow: hidden;
        }
        .lightbox-target img {
            margin: auto;
            position: absolute;
            top: 0;
            left:0;
            right:0;
            bottom: 0;
            max-height: 0%;
            max-width: 0%;
            border: 3px solid white;
            box-shadow: 0px 0px 8px rgba(0,0,0,.3);
            box-sizing: border-box;
            -webkit-transition: .5s ease-in-out;
            -moz-transition: .5s ease-in-out;
            -o-transition: .5s ease-in-out;
            transition: .5s ease-in-out;
        }
        a.lightbox-close {
            display: block;
            width:50px;
            height:50px;
            box-sizing: border-box;
            background: white;
            color: black;
            text-decoration: none;
            position: absolute;
            top: -80px;
            right: 0;
            -webkit-transition: .5s ease-in-out;
            -moz-transition: .5s ease-in-out;
            -o-transition: .5s ease-in-out;
            transition: .5s ease-in-out;
        }
        a.lightbox-close:before {
            content: "";
            display: block;
            height: 30px;
            width: 1px;
            background: black;
            position: absolute;
            left: 26px;
            top:10px;
            -webkit-transform:rotate(45deg);
            -moz-transform:rotate(45deg);
            -o-transform:rotate(45deg);
            transform:rotate(45deg);
        }
        a.lightbox-close:after {
            content: "";
            display: block;
            height: 30px;
            width: 1px;
            background: black;
            position: absolute;
            left: 26px;
            top:10px;
            -webkit-transform:rotate(-45deg);
            -moz-transform:rotate(-45deg);
            -o-transform:rotate(-45deg);
            transform:rotate(-45deg);
        }
        .lightbox-target:target {
            opacity: 1;
            top: 0;
            bottom: 0;
        }
        .lightbox-target:target img {
            max-height: 100%;
            max-width: 100%;
        }
        .lightbox-target:target a.lightbox-close {
            top: 0px;
        }
        .lightboxCustom {
            margin-top: 60px;
        }
    </style>
</head>
<body>
    <a class="lightbox" href="#goofy">
        Click here
    </a> 
    <div class="lightbox-target" id="goofy">
        <div class="lightboxCustom" id="lightboxCustom">
            <div class="lightboxCustominner">
                <center>
                    <h2>Title</h2>
                    <br>
                </center>
                <p>Content </p>
                <form>
                    <input type="text">
                    <input type="submit">
                </form>
            </div>
        </div>
        <a class="lightbox-close" href="#"></a>
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <script type="text/javascript">
        $('.lightbox-target .lightboxCustom').click(function(){
            $('.lightbox-target').css({
                opacity: 0,
                zIndex: 1
            });   
        });

        $('a').click(function(){
            $('.lightbox-target#goofy').css({
                opacity: 1,
                zIndex: 3
            });
        });
    </script>
</body>
</html>
0
Piyush Teraiya 15 oct. 2019 a las 11:46