Question

我做错了什么？当您单击divtop类时，它应该在页面中间显示div弹出窗口。那时后页应该变得不可点击。转义或弹出窗口中的按钮将关闭它。

<html lang="en" class=" en">
<head>
    <title>My Test Popup</title>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>

    <style type="text/css">
        .divtop
        {
            width: 800px; 
            height: 300px; 
            border:solid;
        }

        .divbottom
        {
            top: 400px; 
        }

        .localmenu {
            border: 1px solid black;
            background: #fff;
            margin-left : auto;
            top: 50px; width: 300px; 
            padding-top: 25px; 
            margin-top: 100px; 
            height: 150px;
        }

        .appContent{
            width: 800px; 
            border:solid;
            height: 600px;
            display: block;
            margin-left: auto;
            margin-right: auto;
        }

        .maincontent{
            width: 100%;
        }

    </style>

</head>
<body>
    <div class="appContent" >
        <div class="maincontent" >
            <div class="divtop" >Top</div>
            <div class="divtop divbottom"  >Bottom</div>
        </div>
        <div id="popup" style="width : 100%; height: 600px;display: none;">
            <div class='localmenu'>
                Text in Div Popup<br/>                        
                <button id="btnHide">Close</button><br/>
            </div>
        </div>
    </div>

    <script>

        $(document).ready(function() {
            $('.divtop').click(function() {
                $('#popup').show().css("top", "500px").animate({top: 50}, 200);
                $('.mainContent').css("background-color", "grey");
            });

            $('#btnHide').click(function() {
                $('#popup').hide();
            });

        });

    </script>

</body>
</html>

Answer 1

Fiddle

我在你的#popup中添加了一些CSS，它现在都在CSS中（不在html中内联）。将jQuery动画更改为50px，而不是仅50。我认为您对CSS做了一些小调整，例如.localmenu我不确定为什么同时拥有padding-top: 25px; margin-top: 100px;。

CSS

#popup {
    position:absolute;
    display: none;
    float: left;
    left:30%;
    z-index:1;
}
#popoverlay {
    position: fixed;
    display:none;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.5;
}

的jQuery

$(document).ready(function () {
    $('.divtop').click(function () {
        $('#popoverlay').show();
        $('#popup').show().css("top", "500px").animate({
            top: "50px"
        }, 200);
        $('.mainContent').css("background-color", "grey");
    });

    $('#btnHide').click(function () {
        $('#popup').hide();
        $('#popoverlay').hide();
    });

});

HTML

<div class="appContent">
    <div class="maincontent">
        <div class="divtop">Top</div>
        <div class="divtop divbottom">Bottom</div>
    </div>
    <div id="popup">
        <div class='localmenu'>Text in Div Popup
            <br/>
            <button id="btnHide">Close</button>
            <br/>
        </div>
    </div>
</div>

Answer 2

为了使其正常工作，即使有垂直滚动条，您也必须使用“固定”位置。将popup作为body的直接子项，并将其设为position: fixed，将width和height设为100％。将localmenu也作为body的直接子项。 jsbin上的工作示例。

HTML：

<div id="popup">
  <!--// This is to stop the user from interacting with the content in the back
      // and to give a visual clue about that
  -->
</div>
<div class='localmenu'>
  <div>
    Text in Div Popup<br/>                        
    <button id="btnHide">Close</button><br/>
  </div>
</div>

<div class="appContent" >
  <div class="maincontent" >
    <div class="divtop" >Top</div>
    <div class="divtop divbottom"  >Bottom</div>
  </div>
</div>

CSS：

  //Use opacity to give a visual clue. Please note that this doesn't work in -all- browsers
  #popup {
    position: fixed;
    width: 100%;
    height: 100%;
    display: none;
    background: black;
    opacity: .5;
    top: 0;
    left: 0;
  }

  //This is just to be able to center the actual menu
    .localmenu {
        top: 20%;
        left: 0;
        width: 100%;
        position: fixed;
        height: 150px;
        display: none;
    }

  .localmenu > div {
        border: 1px solid blue;
        background: #fff;
        margin-left : auto;
        margin-right: auto;
        width: 300px;
        height: 150px;
  }

Javascript :(这大致是相同的，虽然我删除了动画，因为我不确切知道它是如何工作的，它需要以'top: 0'结束。由于localmenu和popup是分开的，我们展示它们也是分开的。）

    $(document).ready(function() {
        $('.divtop').click(function() {
            $('#popup').show().animate(200);
            $('.localmenu').show();
            //$('.mainContent').css("background-color", "grey");
        });

        $('#btnHide').click(function() {
            $('#popup').hide();
            $('.localmenu').hide();
        });

    });

Answer 3

试试这个：

$(document).ready(function() {
    $('.divtop').click(function() {
        var div = $('.appContent');
        $('.localmenu').css({'margin': '200px auto'});
        $('#popup').show().css({top: "500px", position: 'absolute', width: div.width(), height: div.height()}).animate({top: 0}, 200);
        $('.mainContent').css("background-color", "grey");
    });

    $('#btnHide').click(function() {
        $('.mainContent').css("background-color", "");
        $('#popup').hide();
    });
});

Answer 4

阻止后面的div标签被点击：

在HTML中添加具有以下样式的div。我会称之为overlay。

.overlay {
    width: 100%;
    height: 100%;
    background-color: #000;
    left: 0;
    opacity: .8;
    position: absolute;
    top: 0;
    z-index: 10000;
    display: none;
}

这将在显示时基本上掩盖您的页面。

以弹出框为中心：

我向#popup添加了一些额外的样式，并从.localmenu中删除了一些样式。您遗失了position: absolute和z-index，其中包含了z-index popup z-index必须是＆overlay #popup { background: #fff; position :absolute; left : 40%; width : 300px; height: 600px; height: 150px; display: none; z-index: 10001; } .localmenu { border: 1px solid black; }}

animate

然后，在你的JS中，

在您的50px方法中，我将30%更改为div#popup以.overlay
添加了隐藏和显示#popup以及$(document).ready(function () { $('.divtop').click(function () { $('#popup').show().css("top", "500px").animate({ top: "30%" }, 200); $('.overlay').show(); }); $('#btnHide').click(function () { $('#popup,.overlay').hide(); }); });的代码。

更改后，

{{1}}

演示

http://jsbin.com/olasog/1

代码

http://jsbin.com/olasog/1/edit

div popup无法正常工作

4 个答案:

阻止后面的div标签被点击：

以弹出框为中心：

演示

代码