Question

我正在使用jquery创建一个div：

jQuery(window).on('load resize', function()
{
    // jQuery('.overlay').remove(); if i use remove then its not appending the div anymore.
    var html_width = jQuery('html').width();
    var html_height = jQuery('html').height();
    jQuery('html').append('<div class="overlay"></div>').fadeIn('slow');
    jQuery('.overlay').css({'width': html_width, 'height': html_height});
});

现在问题是当我调整浏览器大小时，会创建更多克隆。我想删除所有以前的div并附加当前的div。

任何帮助都将不胜感激。

图片：

Answer 1

为什么要继续添加它只需添加一次，如果你想更新高度和宽度就这样做：

<script>
    jQuery('body').append('<div id="overlay" class="overlay"></div>');
    jQuery(window).on('load resize', function()
    {
        var html_width = jQuery('html').width();
        var html_height = jQuery('html').height();
        jQuery('body #overlay').css({ 'width': html_width, 'height': html_height });
        jQuery("#overlay").css("display", "block"); 
    });
</script>

Answer 2

尝试这个怎么样？

jQuery(window).on('load resize', function()
{
    jQuery('.overlay').remove(); 
    var html_width = jQuery('html').width();
    var html_height = jQuery('html').height();
    jQuery('body').append('<div class="overlay"></div>');
    jQuery('body div.overlay').css({'width': html_width, 'height': html_height});
});

Answer 3

<html>
<head>
    <style>
        .overlay {
            background-color: rgba(0,0,0,0.5);
            width: 100%;
            height: 100%
        }
    </style>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>

<body>

    <div class="overlay">

    </div>

    <script type="text/javascript">

        $(window).on('load resize', function(){

            var w = $(this).width();
            var h = $(this).height();

            $('.overlay').remove();

            $('body').append('<div class=overlay></div>');

        })

     </script>
</body>
</html>

这不是一个好习惯..

为什么不通过css属性

来做

动态高度宽度创建div克隆 - jquery / javascript

3 个答案: