gpt4 book ai didi

jquery - 灯箱纯CSS。单击时关闭

转载 作者:行者123 更新时间:2023-11-28 10:16:26 24 4
gpt4 key购买 nike

如果有人愿意帮助我处理这段代码,那就太好了。

我创建了一种“灯箱”,但问题是只要用户点击任何地方它就会关闭。这不是我想要的。我希望它仅在用户单击窗口(外部)而不是单击窗口时关闭。

现场演示可在 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;
}

提前致谢

最佳答案

jsFiddle .
因为 .Info div 在你的 anchor 内,所以它将保持可点击。
.Info div 之前关闭 anchor 。制作 .Info display:none 然后添加 css 规则:

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

+1 给 Joel 以获得仅 CSS 灯箱。以下是防止 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="name@example.com" />
</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;
}

关于jquery - 灯箱纯CSS。单击时关闭,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23961494/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com