纯CSS的lightbox。点击关闭。

Question

如果有人能帮我修改这段代码就太好了。

我创建了一种类似于“lightbox”的东西，但问题是每当用户单击任何地方时它都会关闭。这不是我想要的结果。我希望只有在用户单击窗口外（而不是里面）时才关闭。

演示可用于http://jsfiddle.net/Bw3Ku/1/。

.box {

display: none;
position:fixed;
z-index: 999999;
width: 100%;
height: 100%;
text-align: center;
top: 0;
left: 0;
background: rgba(0,0,0,0.8);
}

.box img {
max-width: 90%;
max-height: 80%;
margin-top: 2%;
position:absolute;
z-index:99999;
}

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

感谢您的提前预约。

- Joel

---

你的fiddle中的HTML无效。你没有关闭第二个锚标签。 - MilkyTech

@ChrisM 很抱歉，现在已经更新了。http://jsfiddle.net/Bw3Ku/1/ - Joel

你能用我的答案解决问题了吗？ - MilkyTech

Answer 1

jsFiddle。
由于.Info div位于您的锚点内部，它将保持可点击状态。
在.Info div之前关闭锚点。使.Info显示为none，然后添加CSS规则：

.box:target + .Info {
    display: block;
}

Joel因编写了一个纯CSS的lightbox而得到+1赞誉。以下是全部代码（以防fiddle出现问题）：

HTML部分：

  <a href="#resume">    
     <div class="seg1">
        <p> Resume </p>           
     </div>
  </a>    
  <a href="#" class="box" id="resume"></a>      
  <div class="Info">
    <p>
      <label for="login">Your name</label>
        <input type="text" name="yourName" id="login" placeholder="" />
    </p>    
    <p>
      <label for="password">Email</label>
        <input type="text" name="yourEmail" id="subject" placeholder="[e-mail]" />
    </p>    
    <p class="">
      <button type="submit" class="">submit</button>
    </p>    
    <p>
      <label for="password">Message</label>
        <input type="text" size="40" style="height:100px;" name="kommentar" class="message" id="kommentar" />
    </p>
  </div>

CSS：

a:link, a:visited, a:active, a:hover{color:#88d8d8;}
a{text-decoration:none;}

.box {

    display: none;
    position:absolute;
    z-index:99;
    width: 100%;
    height: 100%;
    text-align: center;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.8);
}

.box:target {
    outline: none;
    display: block;
}
.box:target + .Info {
    display: block;
}
.Info{
    display:none;
    height:400px;
    width:400px;
    position:relative;
    background:#fff;
    z-index:99999999;
    margin-top:calc(20% - 50px);
    margin-left:calc(50% - 250px);  
    border:2px solid #88d8d8;
}


.seg1 p:first-child{font-size:36px;padding:0;margin-left:60px;margin-top:95px;color:#88d8d8;text-transform:uppercase;}




/* the circle aka .seg1 */
/* the circle aka .seg1 */
/* the circle aka .seg1 */
/* You proably don't have to worry about the code below. */



.seg1{

        -webkit-border-radius:400px;
        border:1px solid #b1ebeb;
    height:250px;
    width:250px;
    float:left;
    background-color:#f1fbfb;
}
.seg1:hover{

 animation-duration: 2s;
    animation-name: zoomin2;
    animation-fill-mode: forwards;
    -webkit-animation-duration: 2s;
    -webkit-animation-name: zoomin2;
    -webkit-animation-fill-mode: forwards;
    -webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
background-image:url(http://www.clickwallpapers.com/wp-content/uploads/2014/04/Background-1.jpg);   
    background-position: -30px center;
    background-size: cover;
}

- MilkyTech