1

我做错了什么？当您单击类 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>
4

4 回答 4

2

小提琴

我在你的#popup 中添加了一些 CSS，现在它们都在 CSS 中（不是在 html 中内联）。还将您的 jQuery 动画更改为 50 像素，而不是仅 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>
于 2013-07-06T14:32:51.033 回答
1

为了让它正常工作，即使有垂直滚动条，你也必须使用“固定”位置。放置popup为的直接子代body并使其成为position: fixed,width和height100%。也可以将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();
        });

    });
于 2013-07-06T14:47:46.703 回答
0

尝试这个：

$(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();
    });
});
于 2013-07-06T14:37:12.600 回答
0

要阻止后面的 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-indexofpopup必须是 > z-indexof overlay）

#popup {    
    background: #fff;
    position :absolute;
    left : 40%;
    width : 300px;
    height: 600px;    
    height: 150px;
    display: none;
    z-index: 10001;
}

.localmenu
{
  border: 1px solid black;

}

然后，在你的 JS 中，

  • 在你的animate方法中，我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();
     });

 });

演示

http://jsbin.com/olaso​​g/1

代码

http://jsbin.com/olaso​​g/1/edit

于 2013-07-06T14:44:25.690 回答