버튼에 따라 다른 컨텐츠가 보이게. 채택완료
인장이
1년 전
조회 9,563
openPopupBtn1, openPopupBtn2 의 버튼을 클릭시 레이어 팝업이 열리도록 만들었습니다.
layerPopup1 -> layerPopup2 ->layerPopup3
이렇게 3단계 순서입니다.
제가 만들고 싶은것은
<button id="openPopupBtn1">첫번째 버튼</button>을 클릭했을때는
마지막 단계인 layerPopup3에서
<div class="down1">첫번째 버튼의 소스</div>
해당 컨텐츠가 보이고
<button id="openPopupBtn2">두번째 버튼</button>을 클릭했을때는
마지막 단계인 layerPopup3에서
<div class="down2">두번째 버튼의 소스</div>
해당 컨텐츠가 보이게 하고 싶습니다.
어떻게 하는게 좋을까요?
</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년 전
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
너무 고마워요.