显示警报后隐藏模式弹出窗口答案

【问题标题】：Hide Model Popup After showing alert显示警报后隐藏模式弹出窗口
【发布时间】：2020-06-05 01:46:47
【问题描述】：

当我在页面顶部显示警报消息时，我想隐藏显示在中心的模型弹出窗口。

这是我的弹出窗口

<div class="Model_Div" id="Model" style="display:none;">
    <div class="inside_Div">
        <span id="modelBox"></span>
        <div class="Model_Button">
            <span><button class="sb-btn" ng-click="reset()">Keep Working</button></span>
            <span><a ng-click="vm.setSignOut()" class="sb-btn a_Button" href="/App/LogOff" target="_self">Sign Out</a></span>
        </div>
    </div>
</div>

我尝试使用不同的方式隐藏它，例如

1. document.getElementsByClassName("Model_Div")[0].style.display = "none";
 2. $('#Model').hide();

但没有成功

它是这样显示的

【问题讨论】：

它看起来不像您的弹出窗口，而是浏览器警报。你在 js alert(Session ended due to inactivity) 的某个地方做过吗？
我说的是显示在中心的弹出窗口
在显示警报期间没有任何作用。它暂停所有进程

标签： javascript jquery html angularjs model

【解决方案1】：

解决方案不是最好的（我希望有人能告诉你更好的），但这应该会有所帮助

.modal {
  margin: 0 auto;
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 2px solid black;
}

h4 {
  margin: 0;
  padding: 10px 10px;
}

button {
  width: 50%;
  margin-bottom: 5px;
  padding: 5px 5px;
}

<div class="modal">
  <h4>Modal title</h4>
  <button class="modal__btn">Exit</button>
</div>

<script>
  const modalBtn = document.querySelector('.modal__btn')
  const modal = document.querySelector('.modal')
  
  modalBtn.addEventListener('click', (event) => {
    modal.style.display = 'none'
    setTimeout(() => {
      alert('message')
    }, 0)
    
  })
  
</script>

【讨论】：