버튼에 따라 다른 컨텐츠가 보이게.

버튼에 따라 다른 컨텐츠가 보이게.

QA

버튼에 따라 다른 컨텐츠가 보이게.

본문

openPopupBtn1, openPopupBtn2 의 버튼을 클릭시  레이어 팝업이 열리도록 만들었습니다.
layerPopup1 -> layerPopup2 ->layerPopup3
이렇게 3단계 순서입니다.


제가 만들고 싶은것은

<button id="openPopupBtn1">첫번째 버튼</button>을 클릭했을때는

마지막 단계인 layerPopup3에서 
<div class="down1">첫번째 버튼의 소스</div>
해당 컨텐츠가 보이고

 

<button id="openPopupBtn2">두번째 버튼</button>을 클릭했을때는

마지막 단계인 layerPopup3에서 
<div class="down2">두번째 버튼의 소스</div>
해당 컨텐츠가 보이게 하고 싶습니다.

어떻게 하는게 좋을까요?

 


<button id="openPopupBtn1">첫번째 버튼</button>
<button id="openPopupBtn2">두번째 버튼</button>
 
<div id="layerPopup1" class="popup" style="display:none;">
<div class="popup-content">
<span class="close-btn">×</span>
<h2>step 1</h2>
<p>내용.111111</p>
<button id="confirmBtn">확인</button>
</div>
</div>
 
<div id="layerPopup2" class="popup" style="display:none;">
<div class="popup-content">
<span class="close-btn">×</span>
<h2>step 2</h2>
<div>
<input type="text" name="wr_2" id="wr_2" class="frm_input w100 required" required value="<?=$write["wr_2"]?>">
</div>
<button type="submit" id="btn_submit1" accesskey="s" class="btn-base-1">완료</button>
</div>
</div>
 
<div id="layerPopup3" class="popup" style="display:none;">
<div class="popup-content">
<span class="close-btn">×</span>
<h2>step 3</h2>
<div class="down1">첫번째 버튼 클릭했을때는 down1 소스만 보이게</div>
<div class="down2">두번째 버튼 클릭했을때는 down2 소스만 보이게</div>
</div>
</div>

 

스크립트 소스


<script>
document.addEventListener('DOMContentLoaded', function () {
var layerPopup1 = document.getElementById('layerPopup1');
var layerPopup2 = document.getElementById('layerPopup2');
var openPopupBtn1 = document.getElementById('openPopupBtn1');
var openPopupBtn2 = document.getElementById('openPopupBtn2');
var closeBtns = document.querySelectorAll('.close-btn');
var confirmBtn = document.getElementById('confirmBtn');
 
 
// URL 쿼리 파라미터 확인
var urlParams = new URLSearchParams(window.location.search);
if (urlParams.get('popup') === 'layerPopup3') {
layerPopup3.style.display = 'block';
}
 
// 첫번째 버튼 클릭 시 팝업1 열기
openPopupBtn1.addEventListener('click', function () {
layerPopup1.style.display = 'block';
});
 
// 두번째 버튼 클릭 시 팝업1 열기
openPopupBtn2.addEventListener('click', function () {
layerPopup1.style.display = 'block';
});

 
// 닫기 버튼 클릭 시 팝업 닫기
closeBtns.forEach(function (btn) {
btn.addEventListener('click', function () {
btn.closest('.popup').style.display = 'none';
});
});
 
// 팝업1의 확인 버튼 클릭 시 팝업2로 전환
confirmBtn.addEventListener('click', function () {
layerPopup1.style.display = 'none'; // 팝업1 닫기
layerPopup2.style.display = 'block'; // 팝업2 열기
});
});
 
</script>

이 질문에 댓글 쓰기 :

답변 1


<button id="openPopupBtn1">첫번째 버튼</button>
<button id="openPopupBtn2">두번째 버튼</button>
------------------------------------------------
// 버튼 체크
var checkValue;

// 첫번째 버튼 클릭 시 팝업1 열기
openPopupBtn1.addEventListener('click', function () {
layerPopup1.style.display = 'block';
checkValue = 1;
});
 
// 두번째 버튼 클릭 시 팝업1 열기
openPopupBtn2.addEventListener('click', function () {
layerPopup1.style.display = 'block';
checkValue = 2;
});

// 레이어 3번
if(checkValue === 1){

}else{

};

 

어떤 식으로든 클릭한 버튼이 1번인지 2번인지만 확인하면 됩니다, 어렵게 생각하지 마세요.

​​​​​​​도움이 되셨다면 채택 한번 부탁드립니다^^

답변을 작성하시기 전에 로그인 해주세요.
전체 208
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT