Question

您好我想在点击href标签时显示全屏叠加弹出窗口。我尝试了很多，但无法找到特定的解决方案。到目前为止，我能够显示/隐藏弹出窗口，但我无法显示全屏弹出窗口。到目前为止，工作小提琴和必要的代码在下面提到。

＆＃13;

$(document).ready(function(){
    $('.opop').click(function(){
        $('.pops').fadeIn();
    });
    $('.cls-pop').click(function(){
        $('.pops').fadeOut();
    });
});

＆＃13;

.pops{
	display:none;
    height: 100%;
    width: 100%;
    background: #fff;
}

＆＃13;

<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>

＆＃13;

小提琴： http://jsfiddle.net/hTQb8/128/

提前致谢...

Answer 1

@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();
});
});

Answer 2

试试这个ashish

def func(src : Source[ByteString,Any], filePath:String) {  
  val sink: Sink[ByteString, Future[IOResult]] = FileIO.toPath(Paths.get(props.path))
  src.runWith(sink)
}

Answer 3

.pops{
    display:none;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:1000;
    background: #fff;
}

Answer 4

最好将弹出式html移出容器和体内。

<强> HTML

<div class="items">...</div>
<div class="pops">....</div>

并在您的css代码中进行一些更改，以使其覆盖具有CSS主要属性的窗口。

CSS（使用任何类型的HTML实现的关键属性）：

position:absolute;
top:0;
bottom:0;
z-index:999;

查看fiddle

Answer 5

在不使用任何外部文件的情况下实现模态框的简单且最佳方式..

$(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>

alue

Jquery-在href点击时全屏弹出叠加

5 个答案: