크롬의 alert창 스타일과 같은 심플한 팝업창이 필요해서 구글링 하던중
dialog element demo
라는 방법을 알았다.
https://demo.agektmr.com/dialog/
dialog element demo
The HTML dialog element provides in-page dialog box functionality. A dialog exists in the DOM tree and can be styled using ordinary CSS.
demo.agektmr.com
내가 자주 사용하는 dialog [style]
|
1
2
|
dialog { border: 1px solid rgba(0, 0, 0, 0.3); border-radius: 6px; box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); }
dialog::backdrop { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); }
|
주의 할 점
Internet explorer, edge 에서는 작동 안함 => 아래의 bluebird.js 를 사용하면 Internet explorer 에서 작동됨
'웹 프로그래밍 > HTML,CSS,JS' 카테고리의 다른 글
| [bootstrap] Multiple Modal Open & Modal draggable & Priority when clicking modal // 여러개의 모달 열기 & 모달 드래그 & 모달 클릭시 우선순위 (0) | 2020.09.28 |
|---|---|
| javascript 자주쓰는 정규식 표현 모음 (0) | 2020.08.24 |
| openlayers 5 기본기(지도 생성, 마커/팝업 생성) (1) | 2019.07.23 |
| 브이월드(opanlayers 3) 지도 + WMS(상권 지도) + 다음 로드뷰 (0) | 2019.07.12 |
| 동적으로 생성된 파일첨부 데이터 ajax로 보내기 + php (0) | 2019.07.08 |