버튼에 따라 다른 컨텐츠가 보이게. 채택완료
openPopupBtn1, openPopupBtn2 의 버튼을 클릭시 레이어 팝업이 열리도록 만들었습니다. layerPopup1 -> layerPopup2 ->layerPopup3 이렇게 3단계 순서입니다.
제가 만들고 싶은것은
을 클릭했을때는
마지막 단계인 layerPopup3에서
첫번째 버튼의 소스
해당 컨텐츠가 보이고
을 클릭했을때는
마지막 단계인 layerPopup3에서
두번째 버튼의 소스
해당 컨텐츠가 보이게 하고 싶습니다.
어떻게 하는게 좋을까요?
</p>
<p><button id="openPopupBtn1">첫번째 버튼</button></p>
<p><button id="openPopupBtn2">두번째 버튼</button></p>
<p> </p>
<p><div id="layerPopup1" class="popup" style="display:none;"></p>
<p><div class="popup-content"></p>
<p><span class="close-btn">×</span></p>
<p><h2>step 1</h2></p>
<p><p>내용.111111</p></p>
<p><button id="confirmBtn">확인</button></p>
<p></div></p>
<p></div></p>
<p> </p>
<p><div id="layerPopup2" class="popup" style="display:none;"></p>
<p><div class="popup-content"></p>
<p><span class="close-btn">×</span></p>
<p><h2>step 2</h2></p>
<p><div></p>
<p><input type="text" name="wr_2" id="wr_2" class="frm_input w100 required" required value="<?=$write["wr_2"]?>"></p>
<p></div></p>
<p><button type="submit" id="btn_submit1" accesskey="s" class="btn-base-1">완료</button></p>
<p></div></p>
<p></div></p>
<p> </p>
<p><div id="layerPopup3" class="popup" style="display:none;"></p>
<p><div class="popup-content"></p>
<p><span class="close-btn">×</span></p>
<p><h2>step 3</h2></p>
<p><div class="down1">첫번째 버튼 클릭했을때는 down1 소스만 보이게</div></p>
<p><div class="down2">두번째 버튼 클릭했을때는 down2 소스만 보이게</div></p>
<p></div></p>
<p></div></p>
<p>
스크립트 소스
</p>
<p><script></p>
<p>document.addEventListener('DOMContentLoaded', function () {</p>
<p>var layerPopup1 = document.getElementById('layerPopup1');</p>
<p>var layerPopup2 = document.getElementById('layerPopup2');</p>
<p>var openPopupBtn1 = document.getElementById('openPopupBtn1');</p>
<p>var openPopupBtn2 = document.getElementById('openPopupBtn2');</p>
<p>var closeBtns = document.querySelectorAll('.close-btn');</p>
<p>var confirmBtn = document.getElementById('confirmBtn');</p>
<p> </p>
<p> </p>
<p>// URL 쿼리 파라미터 확인</p>
<p>var urlParams = new URLSearchParams(window.location.search);</p>
<p>if (urlParams.get('popup') === 'layerPopup3') {</p>
<p>layerPopup3.style.display = 'block';</p>
<p>}</p>
<p> </p>
<p>// 첫번째 버튼 클릭 시 팝업1 열기</p>
<p>openPopupBtn1.addEventListener('click', function () {</p>
<p>layerPopup1.style.display = 'block';</p>
<p>});</p>
<p> </p>
<p>// 두번째 버튼 클릭 시 팝업1 열기</p>
<p>openPopupBtn2.addEventListener('click', function () {</p>
<p>layerPopup1.style.display = 'block';</p>
<p>});</p>
<p>
</p>
<p>// 닫기 버튼 클릭 시 팝업 닫기</p>
<p>closeBtns.forEach(function (btn) {</p>
<p>btn.addEventListener('click', function () {</p>
<p>btn.closest('.popup').style.display = 'none';</p>
<p>});</p>
<p>});</p>
<p> </p>
<p>// 팝업1의 확인 버튼 클릭 시 팝업2로 전환</p>
<p>confirmBtn.addEventListener('click', function () {</p>
<p>layerPopup1.style.display = 'none'; // 팝업1 닫기</p>
<p>layerPopup2.style.display = 'block'; // 팝업2 열기</p>
<p>});</p>
<p>});</p>
<p> </p>
<p></script></p>
<p>
댓글을 작성하려면 로그인이 필요합니다.
답변 1개
채택된 답변
+20 포인트
테트라포드1년 전
</p>
<p><code><button id="openPopupBtn1">첫번째 버튼</button></code></p>
<p><code><button id="openPopupBtn2">두번째 버튼</button></code>
------------------------------------------------
// 버튼 체크
var checkValue;</p>
<pre>
<code>// 첫번째 버튼 클릭 시 팝업1 열기
openPopupBtn1.addEventListener('click', function () {
layerPopup1.style.display = 'block';
</code>checkValue = 1;<code>
});
// 두번째 버튼 클릭 시 팝업1 열기
openPopupBtn2.addEventListener('click', function () {
layerPopup1.style.display = 'block';
</code>checkValue = 2;<code>
});
// 레이어 3번
if(</code>checkValue === 1){
}else{
};
어떤 식으로든 클릭한 버튼이 1번인지 2번인지만 확인하면 됩니다, 어렵게 생각하지 마세요. 도움이 되셨다면 채택 한번 부탁드립니다^^
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
�
1년 전
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인전체 질문 목록
답변대기
답변대기
답변대기
답변대기
답변대기
답변대기
답변대기
답변대기
채택
답변대기
답변대기
답변대기
답변대기
채택
채택
답변대기
답변대기
답변대기
채택
너무 고마워요.