如果通过单击按钮激活弹出屏幕，则它不会显示

Question

        {% 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"); 出于某种原因没有更改所选元素的显示属性，但可以通过浏览器手动更改它。

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

Edit2：模糊是由 overflow:scroll 在 <body> 中引起的。

Edit3：看起来这两个功能都有效，弹出窗口设置为display:none在它被设置为阻止之后，解决了它会编辑。

Answer 1

当您单击该按钮时，附加到 body 的 click() 事件处理程序也会被调用，因此显示在设置为 none 后立即设置为堵塞。为避免这种行为，您可以从 body 的点击事件处理程序中排除对按钮的点击，如下所示：

$("body").click(function(e) {
  if (e.target.className !== "nomnom3" && e.target.className !== "title-holder") {
    $(".overlay").each(function() {
      $(this).css("display", "none")
      $('body').css('overflow', 'scroll');
    });
  }
});

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

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <button onclick="show('1')" class=title-holder>
   <p class=nomnom3>User</p>
 </button>
 <div class="overlay" id="1">
   <div id=fullscrean2>
     <p class=content-holder>Content</p>
   </div>
 </div>

如果通过单击按钮激活弹出屏幕，则它不会显示

pop-up screan doesn't get visible if it's activated by button click

javascript

python

django

jquery

popup