======HOW TO - CSS/JS Modal====== * description : How TO - %%CSS/JS%% Modal * author : 오션 * email : shlim@repia.com * lastupdate : 2021-04-09 \\ ====Ref==== [[https://www.w3schools.com/howto/howto_css_modals.asp|How TO - CSS/JS Modal]]\\ \\ %%CSS%% 및 %%JavaScript%%로 모달 박스를 만드는 방법을 학습합니다.\\ =====How to Create a Modal Box===== 모달은 현재 페이지의 맨 위에 표시되는 대화 상자 / 팝업 창입니다.\\ \\ Step 1) Add %%HTML%%:\\ ====HTML 예제====


Modal Example
    
    
    
    
        
        
            ×
            Strike while the iron is hot!

\\ Step 2) Add %%CSS%%:\\ ====CSS 예제====

\\ Step 3) Add %%JavaScript%%:\\ ====JavaScript 예제====

=====Add Header and Footer===== modal-header, modal-body, modal-footer를 위한 클래스를 추가합니다.\\ ====HTML 예제====


    Animated Modal with Header and Footer
    
    
    
    
        
        
            
                ×
                Modal Header
            
            
                Don't judge a book by its cover.
                Don't cross the bridge until you come to it.
            
            
                Modal Footer

\\ modal 헤더, 바디 그리고 풋터에 스타일을 지정하고 modal에 애니메이션 슬라이드를 추가합니다.\\






    
    


    Animated Modal with Header and Footer
    
    
    
    
        
        
            
                ×
                Modal Header
            
            
                Don't judge a book by its cover.
                Don't cross the bridge until you come to it.
            
            
                Modal Footer

=====Bottom Modal ("Bottom sheets")===== 하단에서 슬라이드 되는 화면 전체 너비의 모달을 생성하는 방법에 관한 예제










Bottom Modal







  
  
    
      ×
      Modal Header
    
    
      Some text in the Modal Body
      Some other text...
    
    
      Modal Footer