버튼에 따라 다른 컨텐츠가 보이게.
본문
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번인지만 확인하면 됩니다, 어렵게 생각하지 마세요.
도움이 되셨다면 채택 한번 부탁드립니다^^
checkValue 이용해서 잘 해결되었습니다.
너무 고마워요.
답변을 작성하시기 전에 로그인 해주세요.
