modal 기능 사용시 다른 modal 창 닫기

modal 기능 사용시 다른 modal 창 닫기

QA

modal 기능 사용시 다른 modal 창 닫기

답변 2

본문

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

 

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

 

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

 

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

 

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

이 질문에 댓글 쓰기 :

답변 2

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

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

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

 


<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

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

감사합니다.. 스크립트는 아래 소스인데 영역 밖이나 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";
  }
};

모달은 어떤거 쓰나요 부트스트랩? 아니면 제이쿼리 유아이에서 있는 다이얼로그요? 

아님 직접 구현한건가요?

감사합니다.. 스크립트는 아래 소스인데 영역 밖이나 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";
  }
};

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 14
© SIRSOFT
현재 페이지 제일 처음으로