본문 바로가기

자바스크립트,부트

Bootstrap alert + collapse















Bootstrap의 alert + collapse를 활용하면 alert를 보여주거나 숨겨서 사용자에게 적절한 안내를 하는데 도움이 됩니다.



1. 다음 코드는 아래 그림과 같이 alert를 보여줍니다. 

 

 


  좋습니다. 하지만 danger alert div 오른쪽의 x를 누르면 div가 사라지고 

  show 버튼을 눌러도 다시 div가 나오지는 않습니다. 


  일반적으로 alert는 반복적으로 활용하는 경우가 더 많은 것 같지 않나요?


  예로 이메일 형식을 검사해서 alert를 띄워준다고 하면 반복해서 틀리는 경우가 존재할 것 같아요. 



2. 그래서 아래와 같이 alert 코드를 변경합니다. 

   


   주석으로 처리한 소스가 기존 소스이고 아래 추가된 소스는 클릭하면 id를 활용해서 해당 div를 숨기는 처리를 합니다.

   물론 위에 소스(1번을 포함한 .. )는 jQuery가 있어야 정상적으로 작동합니다. 


   1번에서 x를 누르면 div 자체가 사라지지만 2번에서 x를 누르면 div가 숨겨지는 것에 차이가 있습니다.



3. 추가로 collapse를 활용하면 alert div를 숨겨진 상태로 시작할 수 있습니다. 아래와 같이요.

   

 


끝이에요 :)