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

Question

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

这是我的弹出窗口

<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();

但未成功

它是这样显示的

Answer 1

在致电alert之前，请尝试添加$('#Model').prop('style', 'display:none;')

这应该更改样式属性（您在标记中写入的值）的属性（运行时的值）

<script
			  src="https://code.jquery.com/jquery-3.4.1.min.js"
			  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
			  crossorigin="anonymous"></script>

<div class="Model_Div" id="Model" >
    <div class="inside_Div">
        <span id="modelBox"></span>
        <div class="Model_Button">
            <span><button class="sb-btn" >Button 1</button></span>
            <span><button class="sb-btn a_Button" href="#" id="clickme" target="_self">Click ME!</button></span>
        </div>
    </div>
</div>
<script>
	$modal = $('#Model');
	$anchor = $('#clickme');
	
	$anchor.on('click', function(){
  	$modal.prop('style', 'display:none;')
		alert('hello')
		
	});
	
</script>

Answer 2

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

.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>