목록modal (3)

개발하는 고양이 오이

4. [React] BootStrap Modal 이용 (Button 클릭 시 Modal)

안녕하세요. 오늘은 BootStrap을 이용하여 Button을 클릭했을 때 Modal 화면이 뜨게 하는 부분을 공유하고자 합니다. ※ BootStrap Button 이용 방법 참고 3. [React] BootStrap Button, Modal 이용 3. [React] BootStrap Button 이용 안녕하세요. 오늘은 React로 BootStrap을 이용하여 Button을 이용하는 부분을 공유하고자 합니다. ① React 프로젝트 생성 프로젝트 생성은 기존에 다른 프로젝트 생성과 동일합니다. ( dhdl-it.tistory.com ※ BootStrap Modal 공식 문서 https://react-bootstrap.netlify.app/components/modal/ React-Bootstrap Th..
React 2022. 9. 22. 09:06
8. [PHP] 부트스트랩 멀티모달 순서

안녕하세요. 부트스트랩을 사용하다 보면 여러 모달을 사용해야 할 때가 있습니다. 그러나 여러개다 보니 모달 화면의 우선순위를 정해줘야 할때가 있는데요. 이 때 모달의 style에 z-index를 추가해주면 됩니다. 모달이 생성되면 기본적으로 z-index는 1040 입니다. 이 값보다 높게 할당해주면 됩니다. z-index 값이 클수록 더 위에 노출됩니다. 저 같은 경우에는 위의 동영상에서 가장 먼저 보여지는 '품명 추가' 모달의 z-index는 1041, 그 다음 보여지는 '카테고리 추가' 모달의 z-index는 1050, 그 다음 보여지는 '카테고리 확인' 모달의 z-index는 1060 입니다. 처음 보여지는 모달의 값이 1040보다 높은 1041 이어야 합니다. 이유는 모달이 팝업될 때 모달 백드..
PHP 2022. 6. 20. 10:35
5. [PHP] Modal창에서 ESC 시 Modal창 닫기

안녕하세요. 저는 PHP로 웹페이지를 만들다가 Modal창을 자주 이용했습니다. Modal창은 다른화면을 클릭하면 저절로 닫히는데, ESC키는 먹히지 않는데 싫었습니다. 그래서 ESC키도 먹으면 좋을거같다고 생각하여 검색해보았고, 좋은방법을 찾아 공유해드리고자 합니다. 제가 현재 PHP에서 사용중인 Modal 창입니다. (예시) 금일 내역 닫기 모달 화면 자체에 tabindex 속성을 주게되었는데요, 이는 해당 속성을 가진 태그에 focus를 할 수 있게되고, focus가 가는 순간부터 키보드 입력이 가능해지게 하는 속성입니다. tabindex="0" 그 후에, 모달창을 눌렀을 때 'ESC'를 누르면 모달창이 꺼지도록 하는 코드를 추가해주었습니다. // ESC 키 누르면 모달창이 꺼지도록 $modal =..
PHP 2022. 4. 25. 08:37
이전 Prev 1 Next 다음