본문 바로가기

자바스크립트,부트

Bootstrap Modal 띄우기(생성/열기/보여주기)













Bootstrap Modal을 띄우는 방법은 

Javascript를 사용하는 것과 HTML element의 data attribute를 사용하는 것이 있습니다. 


일단 modal은 아래와 같은 코드로 구성되어 있다고 가정하죠.




1. 먼저 Javascript를 활용하는 예는 아래와 같아요. 


    $("#testModal").modal();


    위 그림에서 볼 수 있듯이 id가 testModal인 modal을 javascript를 통해 불러오는 것입니다. 

   

    결과화면은 아래와 같구요. 

   




2. data-attribute를 통해서도 modal을 불러올 수 있습니다. 

   주로 a 태그에 적용하는 것 같아요 :)

   


  data-toggle과 data-target을 추가하면 되고 data-target에는 시각화할 modal의 id를 입력하면 됩니다. 



끝 :) 

  • 123 2019.02.14 11:21

    혹시 모달창 띄우는 페이지 코드도 알 수 있을까요..? 다른 페이지에서 모달창을 띄우고 싶은데 어떻게 띄우는지 잘 모르겠습니다.