[英]Jquery- Full screen popup overlay on href click
嗨,我想在单击href标签时显示全屏覆盖弹出窗口。 我尝试了很多,但是找不到特定的解决方案。 到目前为止,我能够显示/隐藏弹出窗口,但无法显示全屏弹出窗口。 到目前为止,下面将介绍工作提琴和必要的代码。
$(document).ready(function(){ $('.opop').click(function(){ $('.pops').fadeIn(); }); $('.cls-pop').click(function(){ $('.pops').fadeOut(); }); });
.pops{ display:none; height: 100%; width: 100%; background: #fff; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="items"> <ul> <li>Abc</li> <li>Abc</li> <li>Abc</li> <li>Abc</li> <li>Abc</li> <li>Abc</li> </ul> <a href="#" class="opop">Open Popup</a> <div class="pops"> Some Content <ul> <li>Bcd</li> <li>Bcd</li> <li>Bcd</li> <li>Bcd</li> <li>Bcd</li> </ul> <p> Some More Content </p> <a href="#" class="cls-pop">Close Popup</a> </div> </div>
小提琴: http : //jsfiddle.net/hTQb8/128/
提前致谢...
@Ashish工作小提琴:
http://jsfiddle.net/hTQb8/134/
html
<div class="items">
<ul>
<li>Abc</li>
<li>Abc</li>
<li>Abc</li>
<li>Abc</li>
<li>Abc</li>
<li>Abc</li>
</ul>
<a href="#" class="opop">Open Popup</a>
</div>
<div class="pops">
Some Content
<ul>
<li>Bcd</li>
<li>Bcd</li>
<li>Bcd</li>
<li>Bcd</li>
<li>Bcd</li>
</ul>
<p> Some More Content </p>
<a href="#" class="cls-pop">Close Popup</a>
</div>
的CSS
.pops{
display:none;
height: 100%;
width: 100%;
background-color: gray;
position : absolute;
z-index:1;
top:0;
}
jQuery的
$(document).ready(function(){
$('.opop').click(function(){
$('.pops').fadeIn();
});
$('.cls-pop').click(function(){
$('.pops').fadeOut();
});
});
试试这个ashash
.pops{
display:none;
height: 100%;
width: 100%;
background: #fff;
position:absolute;
z-index:1;
top:0;
}
.pops{
display:none;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:1000;
background: #fff;
}
最好将弹出html移出容器并移入正文中。
的HTML
<div class="items">...</div>
<div class="pops">....</div>
并在CSS代码中进行一些更改,以使其具有CSS主要属性覆盖窗口。
CSS(使用任何类型的html实现的关键属性):
position:absolute;
top:0;
bottom:0;
z-index:999;
看看小提琴
无需使用任何外部文件即可轻松实现模态框的最佳方法。
$(document).ready(function(){ $('#link').on('click', function () { $('#modal-overlay, #overlay-wrapper').fadeIn(500); }); $('#close').on('click', function () { $('#modal-overlay, #overlay-wrapper').fadeOut(500); }); })
html, body { width : 100%; height : 100%; } #modal-overlay { position : absolute; top : 0; left : 0; width : 100%; height : 100%; background : #000; opacity : 0.6; filter : alpha(opacity=60); z-index : 5; display : none; } #overlay-wrapper { position : absolute; top : 0; left : 0; width : 100%; height : 100%; z-index : 10; display : none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a id="link" href="#">click me</a> <div id="modal-overlay"></div> <div id="overlay-wrapper"> <a id="close" href="#">Close</a> <span>modal box value</span></div>
阿鲁
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.