클릭시 팝업창 띄우기 (2) 썸네일형 리스트형 [css/jquery] 간단한 팝업창(모달창) 만들기 2 오랜만에 다시 만들어 보는 모달 팝업!! 제 블로그에 모달 팝업창을 보러 들어오시는 분들이 많이 있어서 새롭게 뉴 버전으로 다시 만들어봤어요! 사실 만들때마다 살짝살짝 달라지기도 하고, 새로운 마음으로 다시 만들어 봤어요. 이 모달 팝업창의 특징은 01. 기존 만들어진 사이트에 붙이기 더 유용하도록 만들 것 예전에서는 아무것도 없는 상태에서 새로 만들었다면, 이미 있는 사이트에 붙여놓기 조금 더 간편 하도록 만들어봤어요. 02. close버튼의 범위 확장 close버튼의 누를때 뿐 아니라, 반투명 뒷배경을 누를 때도 팝업이 없어지도록 했어요. 03. 제이쿼리로 작성 지난번과 다르게 제이쿼리를 섞어 썼어요. HTML 1 2 3 4 5 6 7 8 클릭하면 팝업이 나와요 close 팝업 내용 Colored b.. [CSS/JAVASCRIPT]간단한 팝업창(모달창) 만들기 간단한 팝업창(모달창)을 만들어 보려고 합니다. 먼저 완성 된 모습! 아래의 '모달창아 나와랏'버튼을 눌려봐주세용! 모달창아 나와랏 close 모달창 내용 버튼을 누르면 팝업창을 띄고 뒷배경을 전체 깔아줘서 다른부분이 클릭 되지 않게 하고, 팝업창을 더 잘보이게 합니다. HTML12345678모달창아 나와랏 close 모달창 내용 Colored by Color Scriptercs 1. 버튼을 하나 만들어줍니다. (팝업창을 띄워줄) (id="modal_btn") 2. 팝업창이 띄워졌을때 전체 배경으로 들어갈 DIV를 만들어 줍니다. ( class= "back_bg") 3. 내용이 들어갈 팝업창 박스를 만들어주고 close버튼도 만들어 줍니다. ( class = "modal_wrap") CSS12345678.. 이전 1 다음