https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal2
모달인데요, 아웃사이드 클릭하면 닫히는데 이걸 막고고
팝업부문을 클릭하면 닫히려면 어떻게 해야 할까요?
직접 해당코드에서 해보실 수 있습니다.
|
답변 1개 / 댓글 4개
채택된 답변
+20 포인트
2020-09-21 (월) 21:41:22
짠 원래 이코드를
Copy
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}요렇게 바꿔주면 됩니다.
Copy
modal.onclick = function() {
modal.style.display = "none";
}주석문 보면 유저가 모달 밖을 클릭하면 모달이 닫힌다라고 적혀있죠?
이거를 수정해서 모달을 한번 클릭하면 닫히게끔 만들어주는거쥬!
정확히 말하면 모달이 안보이도록 스타일로 처리하는거죠
같은방법으로 닫기버튼은 span으로 되어있으니까 span.onclick 스크립트 부분을
지워버리면 닫기 버튼을 눌러도 아무 효과가 나타나지 않겠죠
답변에 대한 댓글 4개
그누x쵸딩
2020-09-21 (월) 21:47:40
아 감사합니다. 그런데 바깥클릭은 막고 팝업 클릭시에만 닫으려고 합니다. 팝업 바깥의 중요한 데이터들이 많아서요. 라디오버튼 등요.
2020-09-21 (월) 22:21:49
제가 답변해드린대로
코드를 변경하면 모달(팝업)자체를 클릭했을때와 모달내에 닫기버튼은 클릭했을때만
닫힙니다.
코드를 변경하면 모달(팝업)자체를 클릭했을때와 모달내에 닫기버튼은 클릭했을때만
닫힙니다.
조나단입니다
2020-09-22 (화) 10:23:33
그냥
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
요부분을 지워버리시면 원하는 바이실것 같은데요
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
요부분을 지워버리시면 원하는 바이실것 같은데요
그누x쵸딩
2020-09-22 (화) 10:44:47
아 감사합니다. x와 모달 바디를 클릭하면 닫히려고 한건데...더 공부해보겠습니다.
답변을 작성하려면 로그인이 필요합니다.