Data-attribute to Modal in Bootstrap4

 

  부트스트랩4에서 모달을 보여지게 하는 방법은 몇 가지가 있죠. 그중에서 Button을 누르면 모달이 띄워지는 방법이 있죠. 아래와 같은 코드로 가능합니다. 

 

<button class='btn' data-toggle="modal" data-target="#test_modal" data-test='aaa'>검색</button>

<div class="modal fade" id="test_modal" tabindex="-1" role="dialog">
    ...
</div>

 

  코드를 잠깐 살펴보면 button을 누르면 data-toggle="modal" data-target="#test_modal"을 통해서 modal이 보여지게 되죠. data-target은 modal div의 id와 일치해야 하고요. 이번 포스팅에서 정리하려는 것은 button에 있는 data-test='aaa' 를 modal로 전달하자 라는 것입니다. 

 

 아래와 같은 코드로 가능한데요.

<script>
$('#test_modal').on('show.bs.modal', function (e) {
    var data = $(e.relatedTarget).data('test');
});
</script>

  show.bs.modal은 https://getbootstrap.com/docs/4.3/components/modal/#events에 의하면 show가 불려지는 즉시. 그러니까 위 html 코드에서 button을 눌르면 modal이 show 되기 시작하는데 그 즉시를 의미하는 것 같습니다. 그때 relatedTarget으로 modal show를 호출한 대상을 부를 수 있습니다. 그래서 위 코드에서 var data = .... 로 button에 있는 data-test 값을 가져올 수 있는 것이죠.

 

  바로 위 코드에서 show.bs.modal은 shown.bs.modal로 바꿔써도 작동하겠죠. 다만 호출되는 시점이 약간 다르다는 점에서 차이가 있겠습니다. show는 button이 눌려진 즉시, shown은 modal이 보여진 다음에. 

 

 

+ Recent posts