목록으로

modal 기능 사용시 다른 modal 창 닫기 채택완료

arkk

프로필 보기 이 회원 글보기 이 회원의 댓글보기

3년 전 조회 2,544

답변 2

3개의 버튼에서 modal 기능을 사용하여 각각 다른 modal 페이지가 뜨게 하고 있습니다.

문제는 버튼별로 우선순위?가 있는지 하나의 modal 창을 띄우고 다른 modal을 클릭 시

기존 modal 창을 덮어버리거나 그 밑으로 현재 창이 보입니다.

제가 하고싶은 방법은 다른 modal창을 띄울시에는 기존 창을 꺼지고 새로운 창만 보이게끔 수정하고

싶습니다. 혹시 이렇게 바꿀수 있는 modal 수정 방법 알려주시면 감사드리겠습니다.

#modal #button #css

댓글을 작성하려면 로그인이 필요합니다.

답변 2개

정렬:

채택된 답변

+20 포인트

비타주리

프로필 보기 이 회원 글보기 이 회원의 댓글보기

3년 전

어떤 모달 소스를 쓰는지 알 수가 없어서...

제이쿼리 안 쓰고 부트스트랩 안 쓰고 그냥 html 과 바닐라 js 로만 만들어 보았습니다.

css 는 따로 빼서 쓰셔도 됩니다.

</p>

<p><button id=btn_1 style=cursor:pointer>1번열기</button>

<button id=btn_2 style=cursor:pointer>2번열기</button>

<button id=btn_3 style=cursor:pointer>3번열기</button></p>

<p><div id=modal_1 style=position:absolute;top:50px;left:50px;width:200px;height:200px;background-color:black;color:white;padding:10px;box-sizing:border-box>

모달 1입니다.






<span id=close_1 style=padding:5px;background-color:white;color:black;cursor:pointer>닫기</span>

</div></p>

<p><div id=modal_2 style=position:absolute;top:60px;left:60px;width:300px;height:300px;background-color:blue;color:white;padding:10px;box-sizing:border-box>

모달 2입니다.






<span id=close_2 style=padding:5px;background-color:white;color:black;cursor:pointer>닫기</span>

</div></p>

<p><div id=modal_3 style=position:absolute;top:70px;left:70px;width:400px;height:400px;background-color:brown;color:white;padding:10px;box-sizing:border-box>

모달 3입니다.






<span id=close_3 style=padding:5px;background-color:white;color:black;cursor:pointer>닫기</span>

</div></p>

<p><script>

for (i = 1; i <= 3; i++) {

    this["btn_" + i].i = i;

    this["btn_" + i].onclick = function() {

        for (i = 1; i <= 3; i++) window["modal_" + i].style.display = this.i == i ? "block" : "none";

    }

    this["close_" + i].onclick = function() {

        for (i = 1; i <= 3; i++) window["modal_" + i].style.display = "none";

    }

}

close_1.onclick();

</script></p>

<p>

http://www.mediaplayer.kr/main/bbs/html_editor.php

좌측창에 붙여넣기 하고 결과보기로 확인해 보세요.

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

arkk

프로필 보기 이 회원 글보기 이 회원의 댓글보기

3년 전

감사합니다.. 스크립트는 아래 소스인데 영역 밖이나 x를 클릭하면 없어지는데 모달 창이 띄어져있을 때 다른 모달을 띄울 시 겹쳐서 나오는데 이 때 기존에 떠있는 모달 창을 닫기위해서는 어떻게 수정해야될지요 ㅜㅜ

// Modal을 가져옵니다.
var modals = document.getElementsByClassName("modal");
// Modal을 띄우는 클래스 이름을 가져옵니다.
var btns = document.getElementsByClassName("btn");
// Modal을 닫는 close 클래스를 가져옵니다.
var spanes = document.getElementsByClassName("close");
var funcs = [];

// Modal을 띄우고 닫는 클릭 이벤트를 정의한 함수
function Modal(num) {
return function() {
// 해당 클래스의 내용을 클릭하면 Modal을 띄웁니다.
btns[num].onclick = function() {
modals[num].style.display = "block";
console.log(num);
};

// <span> 태그(X 버튼)를 클릭하면 Modal이 닫습니다.
spanes[num].onclick = function() {
modals[num].style.display = "none";
};
};
}

// 원하는 Modal 수만큼 Modal 함수를 호출해서 funcs 함수에 정의합니다.
for(var i = 0; i < btns.length; i++) {
funcs[i] = Modal(i);
}

// 원하는 Modal 수만큼 funcs 함수를 호출합니다.
for(var j = 0; j < btns.length; j++) {
funcs[j]();
}

// Modal 영역 밖을 클릭하면 Modal을 닫습니다.
window.onclick = function(event) {
if (event.target.className == "modal") {
event.target.style.display = "none";
}
};