bootstrap modal 사용법

modal 띄우기

• modal에 트리거를 거는 방법은 두 가지가 있다.
  a 태그나 button 혹은 다른 element에 data-toggle, data-target 옵션을 걸어 띄워 모달창을 띄울 수 있다.
  modal창의 id는 "myModal"이다.

<!--button으로 띄우기 -->
  <button class="btn-modal" data-toggle="modal" data-target="#myModal">Open Modal</button>
  
<!--a 태그로 띄우기 -->
  <a data-toggle="modal" href="#myModal">Open Modal</a>
  
<!--Other Elements -->
  <p data-toggle="modal" data-target="#myModal">Open Modal</p>

이때 data-toggle 옵션은 항상 필요하다. a 태그는 data-target 대신 href를 사용할 수 있다. 배경을 클릭했을 때 모달창이 닫히지 않게 하려면 data-backdrop="static"옵션을 사용하면 된다.

modal에 데이터 전달하기

modal 버튼

<button class="btn-modal" data-toggle="modal" data-target="#myModal" data-id="전달할 값">Open Modal</button>

자바스크립트

$(".btn-modal").click(function(){
	var data = $(this).data('id');
    $("#contents.body-contents").val(data);
    $("#text-contents.body-contents").html(data);
});

modal

<div class="modal hide" id="myModal">
	<div class"modal-header">
    	<button class="close" data-dismiss="modal">x</button>
        <h3>Modal header</h3>
	</div>
    <div class="modal-body">
    	<input type="text" class="body-contents" id="contents" />
        <textarea class="body-contents" id="text-contents"></textarea>
    </div>
</div>

input태그에 값을 넣을 때는 .val을 사용해 value 값을 넣어준다.
다른 element에 값을 넣을 때는 .html을 사용해 값을 넣어준다. html 구문을 넣어서 구현하는 것도 가능하다.