{% if i.content %}
            <button onclick="show('{{i.id}}')" class=title-holder>
                <p class=nomnom3>{{i.user}}</p>
            </button>
            <div class="overlay" id={{i.id}}>
                <div id=fullscrean2>
                    <p class=content-holder>{{i.content}}</p>
                </div>
            </div>
            {% else %}  
            <button class=title-holder>
                <p class=nomnom3>{{i.user}}</p>
            </button>
        {% endif %} 

上面的html有两个条件，如果有一个用户评论，它创建一个隐藏的全屏幕弹出式窗口，我想通过按钮点击激活，否则它只是显示用户。

弹出窗口css:

.overlay{
    position: fixed;
    top:0;
    height: 100vh;
    width: 100%;
    z-index: 1;
    background-color: rgba(0,0,0,0.4);
    display: none;
}

我有两个功能来使它工作:

$("body").click(function () {
    $(".overlay").each(function(){
        $(this).css("display", "none")
        $('body').css('overflow', 'scroll');
    })     
});

上面的一个隐藏弹出屏幕在任何点击。

function show(id){  
    $("#"+id).css("display","block");
}

这个按钮在点击按钮时被触发，但不显示弹出窗口，只模糊了屏幕的一部分。 但是弹出式屏幕和第一个功能可以很好地工作，如果弹出式屏幕的显示在页面负载上是块。

编辑:看起来像$（“#”+id).css（“display”，“block”）；由于某种原因没有更改选定元素的显示属性，而是在浏览器中手动更改。

所有浏览器的反应都是一样的。

编辑2:模糊是由溢出引起的:在中滚动。

Edit3:看起来两个函数都能工作，弹出窗口设置为display:none，在设置为block之后，解决了它要编辑的问题。