3개의 버튼에서 modal 기능을 사용하여 각각 다른 modal 페이지가 뜨게 하고 있습니다.
문제는 버튼별로 우선순위?가 있는지 하나의 modal 창을 띄우고 다른 modal을 클릭 시
기존 modal 창을 덮어버리거나 그 밑으로 현재 창이 보입니다.
제가 하고싶은 방법은 다른 modal창을 띄울시에는 기존 창을 꺼지고 새로운 창만 보이게끔 수정하고
싶습니다. 혹시 이렇게 바꿀수 있는 modal 수정 방법 알려주시면 감사드리겠습니다.
답변 2개 / 댓글 3개
채택된 답변
+20 포인트
3년 전
어떤 모달 소스를 쓰는지 알 수가 없어서...
제이쿼리 안 쓰고 부트스트랩 안 쓰고 그냥 html 과 바닐라 js 로만 만들어 보았습니다.
css 는 따로 빼서 쓰셔도 됩니다.
Copy
<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>
<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입니다.
<br><br><br>
<span id=close_1 style=padding:5px;background-color:white;color:black;cursor:pointer>닫기</span>
</div>
<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입니다.
<br><br><br>
<span id=close_2 style=padding:5px;background-color:white;color:black;cursor:pointer>닫기</span>
</div>
<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입니다.
<br><br><br>
<span id=close_3 style=padding:5px;background-color:white;color:black;cursor:pointer>닫기</span>
</div>
<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>
http://www.mediaplayer.kr/main/bbs/html_editor.php
좌측창에 붙여넣기 하고 결과보기로 확인해 보세요.
답변에 대한 댓글 1개
3년 전
비버팩토리모달은 어떤거 쓰나요 부트스트랩? 아니면 제이쿼리 유아이에서 있는 다이얼로그요?
아님 직접 구현한건가요?
답변에 대한 댓글 2개
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";
}
};
// 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";
}
};
답변을 작성하려면 로그인이 필요합니다.
// 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";
}
};