카페 24에서 모달팝업으로 눈물젖은 코딩이 되어가는 중입니다...ㅠㅠ

카페 24에서 모달팝업으로 눈물젖은 코딩이 되어가는 중입니다...ㅠㅠ

QA

카페 24에서 모달팝업으로 눈물젖은 코딩이 되어가는 중입니다...ㅠㅠ

본문

안녕하세요,

현재 카페24 솔루션 안에서

특정 영역 클릭시 오픈되는 모달팝업(여러개)을 만들고 있는 중입니다,,,,,

독학으로 코딩하며,, 며칠동안 구글링을 하고 피지컬하게 또르륵 눈물도 흘리고 지푸라기라도 잡는 심정으로 질문글을 올립니다ㅠㅠ....................

 

구현은 했지만 모달팝업을 닫기(확인) 을 눌렀을때

 

주소링크 뒤에 .../#none 이 붙어서 그런지

홈페이지내의 뒤로가기 버튼을 눌렀을때 닫았던 모달팝업창이 계속뜨면서 전에 보던 페이지로 돌아갈 수 없는 이슈때문에 골머리를 썩히고 있습니다ㅠㅠ....

 

해결 할 수 있는 방법이 있을지 여쭤봅니다ㅠㅠ도와주세요 고수님들ㅠㅠㅠㅠㅠㅠㅠ

 

<code>

    <!-- 첫 번째 모달팝업 -->

    <div class="swiper-slide">
        <a href="#premium-01">
            <div class="premium-img"><img src="/premium-01.png"></div>
            <div class="premium-title">첫 번째 모달</div>
            <div class="premium-detail">상세보기</div>
        </a>
    </div>

    <!-- 첫 번째 모달팝업 오픈 -->

    <div id="premium-01" class="premium-overlay">
        <div class="premium-popup">
            <ul class="premium-contents">
                <li class="premium_logo"><img src="/logo.svg"/></li>
                <li class="premium_h1">더 나은 선택</li>
                <li class="premium_h2">FIRST</li>
                <li class="premium_p">
                    프리미엄
                </li>
             </ul>
             <a href="#none" class="close">확인</a>
        </div>
     </div>

 

    <!-- 두 번째 모달팝업 -->

    <div class="swiper-slide">
        <a href="#premium-02">
            <div class="premium-img"><img src="/premium-01.png"></div>
            <div class="premium-title">두 번째 모달</div>
            <div class="premium-detail">상세보기</div>
        </a>
    </div>

    <!-- 두번째 모달팝업 오픈 -->

    <div id="premium-02" class="premium-overlay">
        <div class="premium-popup">
            <ul class="premium-contents">
                <li class="premium_logo"><img src="/logo.svg"/></li>
                <li class="premium_h1">더돕습니다.</li>
                <li class="premium_h2">SECOND</li>
                <li class="premium_p">
                    최다
                </li>
             </ul>
             <a href="#none" class="close">확인</a>
        </div>
     </div>

 

</code>

 

현재 이런형식으로 html 과 css로만 작용되게 코드를 짜놓은 상태입니다,,,,

이 질문에 댓글 쓰기 :

답변 1

<a href="#none" class="close">확인</a>

->

<a href="#none" class="close" onclick="return false;">확인</a>

<a href="#none" class="close">확인</a> 는 원래로 돌리고,

닫기 처리하는 함수 부분의 마지막에

return false; 를 추가해주면 됩니다. (href의 링크로 이동처리를 하지 않는다는 의미)

답변을 작성하시기 전에 로그인 해주세요.
전체 16,776
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT