Javascript div弹出窗口不工作_Javascript_Jquery_Html

Javascript div弹出窗口不工作

javascript jquery html

Javascript div弹出窗口不工作,javascript,jquery,html,Javascript,Jquery,Html,我做错了什么？当你点击类div时，它应该在页面中间显示一个div弹出窗口。在那个时候，后面的页面应该是不可点击的。退出或弹出窗口中的按钮将关闭它 <html lang="en" class=" en"> <head> <title>My Test Popup</title> <script src="http://code.jquery.com/jquery-1.9.1.js"></script>

我做错了什么？当你点击类div时，它应该在页面中间显示一个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>


我的测试弹出窗口
.沙发床
{
宽度：800px；
高度：300px；
边框：实心；
}
D.迪沃顿
{
顶部：400px；
}
.本地菜单{
边框：1px纯黑；
背景：#fff；
左边距：自动；
顶部：50像素；宽度：300像素；
填充顶部：25px；
边缘顶部：100px；
高度：150像素；
}
.appContent{
宽度：800px；
边框：实心；
高度：600px；
显示：块；
左边距：自动；
右边距：自动；
}
.主要内容{
宽度：100%；
}
顶部
底部
Div弹出窗口中的文本

关闭

$（文档）.ready（函数（）{
$（'.divtop'）。单击（函数（）{
$（'popup'）.show（）.css（“top”，“500px”）.animate（{top:50}，200）；
$（'.mainContent'）.css（“背景色”、“灰色”）；
});
$（'#btnHide'）。单击（函数（）{
$（'弹出'）.hide（）；
});
});

我在弹出窗口中添加了一些CSS，现在都在CSS中（而不是在html中内联）。还将jQuery动画更改为50px，而不是仅50。我认为您需要对CSS进行一些小的调整，比如在

.localmenu

中，我不确定为什么您要同时使用

padding top:25px；边缘顶部：100px
CSS
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弹出窗口中的文本


接近


试试这个：
$(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();
    });
});

要阻止背面的div标签被单击，请执行以下操作：
在HTML中添加具有以下样式的div。我将称之为“叠加”
.overlay {
    width: 100%;
    height: 100%;
    background-color: #000;
    left: 0;
    opacity: .8;
    position: absolute;
    top: 0;
    z-index: 10000;
    display: none;
}

这将基本上掩盖你的页面时，显示
要使弹出窗口居中，请执行以下操作：
我在弹出窗口中添加了一些额外的样式，并从本地菜单中删除了一些样式。您缺少位置：绝对
和z-index
，在中添加了这些。（popup
的z-index
必须是overlay
的z-index
）
然后，在你的JS中

在您的animate
方法中，我将50px
更改为30%
以中心div#popup
添加了隐藏和显示.overlay
以及#弹出窗口
的代码

变化之后,
 $(document).ready(function () {
     $('.divtop').click(function () {
         $('#popup').show().css("top", "500px").animate({
             top: "30%"
         }, 200);
         $('.overlay').show();
     });

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

 });

演示

代码
要使其正常工作，即使有垂直滚动条，也必须使用“固定”位置。将弹出窗口
作为主体
的直接子对象放置，并将其设置为位置：固定
，宽度

和高度100%。将

localmenu

也作为

body

的直接子菜单放置。工作实例

Html:

Javascript：（这基本上是一样的，尽管我删除了动画，因为我不知道它到底是如何工作的，它需要在

'top:0'

结束。由于localmenu和popup是分开的，我们也将它们分开显示。）

你能发布一个提琴吗？你有

display:none

在CSS for

.localmenu

中，所以它自然不可见。你可以简单地使用blockui插件。对于各种浏览器，它都能处理这一点，甚至更多。我如何才能使它在中心pf页的背面不可点击？谢谢塞尔吉奥。这很有帮助。需要明确的是，“位置：绝对”是主要区别。正确的？还有-我如何使其他div不可点击？@AjayBansal，刚刚编辑了我的答案，现在也有覆盖div。谢谢。添加有用的。现在也处理了逃生钥匙。唯一需要做的就是在弹出div可见时忽略单击。“我该怎么做呢？”阿贾班萨尔，不管点击在哪里？在灰色的覆盖下？

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

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

.localmenu
{
  border: 1px solid black;

}

 $(document).ready(function () {
     $('.divtop').click(function () {
         $('#popup').show().css("top", "500px").animate({
             top: "30%"
         }, 200);
         $('.overlay').show();
     });

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

 });

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

  //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;
  }

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

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

    });