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

Posted 2023-05-09

【中文标题】显示警报后隐藏模式弹出窗口

【英文标题】：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) 的某个地方做过吗？

我说的是显示在中心的弹出窗口

在显示警报期间没有任何作用。它暂停所有进程

【参考方案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>