본문 바로가기

Data-attribute to Modal in Bootstrap4 (모달에 데이터 전달하기) Data-attribute to Modal in Bootstrap4 부트스트랩4에서 모달을 보여지게 하는 방법은 몇 가지가 있죠. 그중에서 Button을 누르면 모달이 띄워지는 방법이 있죠. 아래와 같은 코드로 가능합니다. 검색 ... 코드를 잠깐 살펴보면 button을 누르면 data-toggle="modal" data-target="#test_modal"을 통해서 modal이 보여지게 되죠. data-target은 modal div의 id와 일치해야 하고요. 이번 포스팅에서 정리하려는 것은 button에 있는 data-test='aaa' 를 modal로 전달하자 라는 것입니다. 아래와 같은 코드로 가능한데요. show.bs.modal은 https://getbootstrap.com/docs/4.3/co.. 더보기
atom - treeview hide / show Ignored Files atom 에디터를 주로 사용하는데 갑자기 ignored 해둔 파일들이 사라졌더라고요. 실제 폴더에는 있는데 말이죠. 아래 이미지를 참고하시면 tree-view에서 ignored file들을 숨기거나 보여지게 할 수 있습니다. 1. settings - packages로 이동합니다. 2. tree view를 검색하면 core packages 쪽에 나옵니다. tree-view의 settigns에 들어갑니다. 조금 내려보면 Hide VCS Ignored Files 체크박스가 보입니다. 체크하시면 ignored files가 tree-view에서 사라지고 체크를 해제하시면 반대가 되겠죠? 저는 파일 사라진줄 알고 ㅠㅠㅠㅠㅠ 더보기
Bootstrap Modal 띄우기(생성/열기/보여주기) Bootstrap Modal을 띄우는 방법은 Javascript를 사용하는 것과 HTML element의 data attribute를 사용하는 것이 있습니다. 일단 modal은 아래와 같은 코드로 구성되어 있다고 가정하죠. {% block start-footer %}{% endblock %} {% block modal-header %} {% endblock %} {% block modal-body %} modal test {% endblock %} {% block modal-footer %}닫기{% endblock %} {% block end-footer %}{% endblock %} 1. 먼저 Javascript를 활용하는 예는 아래와 같아요. $("#testModal").modal(); 위 그림에서 .. 더보기
Bootstrap alert + collapse Bootstrap의 alert + collapse를 활용하면 alert를 보여주거나 숨겨서 사용자에게 적절한 안내를 하는데 도움이 됩니다. 1. 다음 코드는 아래 그림과 같이 alert를 보여줍니다. 좋습니다. 하지만 danger alert div 오른쪽의 x를 누르면 div가 사라지고 show 버튼을 눌러도 다시 div가 나오지는 않습니다. 일반적으로 alert는 반복적으로 활용하는 경우가 더 많은 것 같지 않나요? 예로 이메일 형식을 검사해서 alert를 띄워준다고 하면 반복해서 틀리는 경우가 존재할 것 같아요. 2. 그래서 아래와 같이 alert 코드를 변경합니다. 주석으로 처리한 소스가 기존 소스이고 아래 추가된 소스는 클릭하면 id를 활용해서 해당 div를 숨기는 처리를 합니다. 물론 위에 소스.. 더보기