[bootstrap] 부트스트랩 – 사용자(커스텀) 모달

커스텀 data- 속성을 이용해 입력란에 데이터를 미리 입력할 수 있습니다.

 

<button type=”button” class=”btn btn-primary” data-toggle=”modal” data-target=”#exampleModal” data-whatever=”@kmdo“>Open modal for @kmdo</button>
<button type=”button” class=”btn btn-primary” data-toggle=”modal” data-target=”#exampleModal” data-whatever=”@kfat“>Open modal for @kfat</button>
<button type=”button” class=”btn btn-primary” data-toggle=”modal” data-target=”#exampleModal” data-whatever=”@ktwbootstrap“>Open modal for @ktwbootstrap</button>

 

맨 아래에 다음 자바스크립트 소스를 추가하여 모달창이 열릴 때 값을 변경해 줄 수 있습니다.

$(document).ready(function() {
$(‘#exampleModal‘).on(‘show.bs.modal’, function (event) {
var button = $(event.relatedTarget); // Button that triggered the modal
var recipient = button.data(‘whatever‘); // Extract info from data-* attributes
var modal = $(this);
modal.find(‘.modal-title’).text(‘New message to ‘ + recipient);
modal.find(‘.modal-body input’).val(recipient);
});
});