html코드 관련 질문드립니다.

Question

안녕하세요 코딩이 초보인지라...코드 관련 질문드립니다.

특정버튼을 눌렀을때 뜨는 팝업안내창을 따라하고 싶은데요

참고 페이지는 아래이며

최하단 [비회원으로 구매하기]을 누르면

빨간 체크박스와 같은 안내멘트가 뜨게 하고 싶습니다.

연관이 있어보이는 코드까진 찾았는데...

아래코드에서 어느 부분들을 고쳐야 사용을 할 수 있을지 여쭙습니다.

<script>

window.onload = function(){ document.form.m_id.focus(); }

$(function() {

$(".guest_order").on("click", function() {

var result = confirm("회원가입 시 총 35,000원의 쿠폰 혜택을 받으실 수 있습니다. 비회원으로 주문하시겠습니까?");

if(result) {

location.replace("../order/order.php?guest=1");

} else {

location.replace("../member/join.php?&");

}

})

})

</script>

[중략]

<div class="guest_order btn btn-login btn-mem-bd mt12">비회원으로 구매하기</div>

▼참고페이지▼

https://www.hansamin.com/shop/member/login.php?guest=1&returnUrl=/shop/order/order.php?cart_type=&storecode=

Answer 1

스크립트를 설명 드리겠습니다.

설명내용을 확인하고 원하시는데로 활용하시가 바랍니다.
부족한 부분이 있다면 추가 질문 하셔도 됩니다.

<script> window.onload = function(){ // 페이지 로딩이 끝나면 document.form.m_id.focus(); // form.m_id에 포커스를 둔다. 아이디 input 박스에 커서를 실행 } $(function() { $(".guest_order").on("click", function() { // 클래스가 guest_order(.guest_order)를 클릭하면 // confirm을 실행한다. - confirm은 확인(true)/취소(false)의 값을 리턴받을 수 있는 javascript명령어입니다. // 사용자가 confirm의 이벤트를 발생시키면 그 값을 result에 저장한다. - 확인(true)/취소(false) var result = confirm("회원가입 시 총 35,000원의 쿠폰 혜택을 받으실 수 있습니다. 비회원으로 주문하시겠습니까?"); if(result) { // 확인을 눌렀을 경우 (result = true) location.replace("../order/order.php?guest=1"); // 해당 url로 이동한다. - 주문페이지 } else { // 취소를 눌렀을 경우 (result = false) location.replace("../member/join.php?&"); // 해당 url로 이동한다. - 로그인페이지 } }) }) </script> [중략] <div class="guest_order btn btn-login btn-mem-bd mt12">비회원으로 구매하기</div>

Answer 2

안녕하세요 프로그래밍 지식 답변자 입니다.

해당 화면은 [ 비회원으로 구매하기 ] 버튼을 클릭 했을 때 다른 레이어를 화면에 뿌려주는 방법으로 만듭니다. 이해를 더 쉽게 돕기 위해 간단한 코드로 보여드리겠습니다.

// 클릭 버튼 만들기 <div id="clickHere">비회원으로 주문하기</div> <script> function showAlert() { alert("회원가입 시 총 35,000원의 쿠폰 혜택을 받으실 수 있습니다. 비회원으로 주문하시겠습니까?"); } // id가 clickHere 인 엘리먼트를 클릭했을 시 알림이 뜨도록 설정 let el2 = document.getElementById("clickHere"); el2.addEventListener("click", showAlert, false); </script>

농협 홍삼 페이지의 같은 경우 일반적인 alert() 함수를 사용한 박스가 아닌 디자인한 레이어를 별도로 띄운 방식 입니다. click 이벤트가 발생했을 때 디자인한 박스를 보여줄지 안 보여줄지로 고치면 되겠습니다.