버튼에 따라 다른 컨텐츠가 보이게. 채택완료
openPopupBtn1, openPopupBtn2 의 버튼을 클릭시 레이어 팝업이 열리도록 만들었습니다.
layerPopup1 -> layerPopup2 ->layerPopup3
이렇게 3단계 순서입니다.
제가 만들고 싶은것은
<button id="openPopupBtn1">첫번째 버튼</button>을 클릭했을때는
마지막 단계인 layerPopup3에서
<div class="down1">첫번째 버튼의 소스</div>
해당 컨텐츠가 보이고
<button id="openPopupBtn2">두번째 버튼</button>을 클릭했을때는
마지막 단계인 layerPopup3에서
<div class="down2">두번째 버튼의 소스</div>
해당 컨텐츠가 보이게 하고 싶습니다.
어떻게 하는게 좋을까요?
Copy
첫번째 버튼
두번째 버튼
×
step 1
내용.111111
확인
×
step 2
스크립트 소스
Copy
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 열기
});
});
답변 1개
채택된 답변
+20 포인트
테트라포드
1년 전
Copy
첫번째 버튼
두번째 버튼
------------------------------------------------
// 버튼 체크
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번인지만 확인하면 됩니다, 어렵게 생각하지 마세요.
도움이 되셨다면 채택 한번 부탁드립니다^^
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
�
1년 전
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
너무 고마워요.