부트 스트랩 4 숨기기 닫기 경고가 표시되지 않음

Question

제목에 알리미를 숨겨서 페이지를 다시로드하지 않고도 다른 경고를 표시 할 수있는 가장 좋은 방법을 알고 싶습니다. BS3에 대한 여러 답변이 있지만 BS4에 대한 더 나은 솔루션이 있기를 바랍니다.
여기 내 HTML입니다 :

<div style="display: none;" class="alert alert-danger alert-with-icon" data-notify="container"> 
      <div class="container"> 
       <div class="alert-wrapper"> 
        <button type="button" class="close" data-dismiss="alert" aria-label="Close"> 
         <i class="nc-icon nc-simple-remove"></i> 
        </button> 
        <div class="message"><i class="nc-icon nc-bell-55"></i> 
         My alert message. 
        </div> 
       </div> 
      </div> 
     </div> 

그리고 열려있는에 경고를 트리거하려면이 옵션을 사용하고 있습니다 : 바로 사용

$('.alert').show(); 

Answer 1

을 숨기려면이

$(".alert").alert('close'); 

Answer 2

을 시도 $('.alert').hide();

아래의 예를 확인하십시오.

$('.alert').show(); 
 
setTimeout(function(){ $('.alert').hide(); }, 3000);

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div style="display: none;" class="alert alert-danger alert-with-icon" data-notify="container"> 
 
      <div class="container"> 
 
       <div class="alert-wrapper"> 
 
        <button type="button" class="close" data-dismiss="alert" aria-label="Close"> 
 
         <i class="nc-icon nc-simple-remove"></i> 
 
        </button> 
 
        <div class="message"><i class="nc-icon nc-bell-55"></i> 
 
         My alert message. 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div>

Answer 3

쉬운 방법은 경고 인라인을 해고하는 것입니다. 그것에 대한 .alert-dismissible 클래스를 귀하의 알림 상자에 추가하십시오.

<div style="display: none;" class="alert alert-danger alert-with-icon alert-dismissible fade show" data-notify="container" role="alert"> 
     <div class="container"> 
      <div class="alert-wrapper"> 
       <button type="button" class="close" data-dismiss="alert" aria-label="Close"> 
        <i class="nc-icon nc-simple-remove"></i> 
       </button> 
       <div class="message"><i class="nc-icon nc-bell-55"></i> 
        My alert message. 
       </div> 
      </div> 
     </div> 
    </div> 

나는 코드를 수정했습니다. 버튼의 data-dismiss="alert" 속성이 javaScript 기능을 트리거합니다. 나는 부드러운 애니메이션을 제공하는 fade show 클래스도 추가했습니다.

난 당신이

무슨 뜻인지 이해하지 못하는 우리가 페이지를 다시로드하지 않고 다른 경보를 가질 수 있도록 경고를 숨기기?