Скрыть всплывающее окно модели

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

Решение не самое лучшее (надеюсь, кто-то скажет вам что-то лучше), но это должно помочь

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

Answer 2

перед вызовом 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>