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

【问题标题】：pop-up screan doesn't get visible if it's activated by button click如果通过按钮单击激活弹出屏幕，则不会显示它
【发布时间】：2020-06-24 11:57:57
【问题描述】：

        {% 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:noneright，解决了它会编辑。

【问题讨论】：

标签： javascript python jquery django popup

【解决方案1】：

当您单击按钮时，附加到body 的click() 事件处理程序也会被调用，因此在设置为阻止后立即将显示设置为无。为了避免这种行为，您可以从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>

【讨论】：

是的，这也是我想出的解决方案，非常感谢！