페이지를 새로 고치지 않고 모달을 닫는 방법

Question

모달이 팝업되는 페이지가 있는데 클릭하여 닫으면 페이지가 새로 고쳐지는데 그런 일이 발생하는 것을 원하지 않습니다.

http://dev.ikov.org/store/index.php

상점 페이지에 접속한 후 오른쪽에 있는 무기를 클릭하면 아이템이 하나 표시됩니다.그것을 클릭하면 모달이 나타납니다.그러나 상단의 "다른 무기 찾아보기"를 클릭하면 페이지가 강제로 새로 고쳐지고, 링크가 아무데나 이동하도록 설정되어 있지 않고 모달을 닫도록 설정되어 있지 않기 때문에 왜 그렇게 하는지 알 수 없습니다.

누구든지 도와주실 수 있나요?

   .modalDialog2 {
    position: fixed!important;
    font-family: Arial, Helvetica, sans-serif;
    top: 0!important;
    right: 0!important;
    bottom: 0!important;
    left: 0!important;
    background: #000!important;
    z-index: 999!important;
    opacity:0!important;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
}

.modalDialog2:target {
    opacity: 1!important;
    display: block!important;
}

.modalDialog2 > div {
    width: 672px;
    position: fixed;
    margin: 5% auto!important;
    background: #fff;
    z-index: 9999!important;
}

그리고 여기 html에 대한 코드가 있습니다

                                <div id="ags" class="modalDialog2">
                                <div id="storeboxitem">
                                <div id="storeboxlight">
                                    <a href="" title="Close" class="close" onclick="returnIndex()">Browse Other Weapons</a>
                                <div id="storeboxheader">
                                    Armadyl GodSword
                                </div>
                                <div id="storeboxtext">
                                    Purchase this very powerful godsword for maximum destruction<br/>
                                    when killing other players in our minigames or PvP Areas. <br/>
                                    The recorded max hit of this sword is 84 (840).<br/>
                                    <img class="storeitemimg" src="storeimgs/playerags.png" width="100px" height="310x" />
                                    <img class="storeitemimg" src="storeimgs/agstable.png" width="150px" height="310x" />
                                    <input class="itemstextbox" type="text" name="username" value="Choose an amount" onfocus="blank(this)" onblur="unblank(this)"><button class="itemsbutton" type="button" onclick="">Buy This Item for 75 Tokens Each</button><br />
                                </div>
                            </div>
                            </div>
                            </div>

Answer 1

귀하의 모달은 # 파편.따라서 페이지의 URL이 다음과 같을 때 #ags, 모달이 표시되도록 설정되었습니다.

당신이 원하는 것은 닫기 버튼을 페이지에 연결하는 것(실제로는 새 페이지 로드)이 아니라 페이지의 섹션에 연결하는 것입니다. 그렇지 않다 모달 해시 조각 앵커.

이를 수행하는 가장 쉬운 방법은 섹션이 전혀 없음:앵커 링크를 다음과 같이 만드세요.

http://dev.ikov.org/store/index.php#

이후의 빈 콘텐츠 # 기호는 브라우저가 페이지를 다시 로드하지 않고 페이지 상단으로 이동해야 함을 의미합니다.효과적으로 모달을 닫고 현재 페이지를 열어 둡니다.

Answer 2

"다른 무기 찾아보기"는 앵커 요소(<a>) 빈 HREF가 있습니다.그만큼 투기 (RFC 2396)에는 "URI를 포함하지 않는 URI 참조는 현재 문서에 대한 참조입니다."라고 명시되어 있습니다.

즉, href 속성이 있지만 할당된 것이 없기 때문에 브라우저는 href를 http://dev.ikov.org/store/index.php, 이로 인해 새로 고침이 발생합니다.

당신이 원하는 것은 기본 액션(호출)을 방지하기 위해 onclick 핸들러를 업데이트하는 것입니다. e.preventDefault()).이렇게 하면 브라우저가 실제로 페이지를 다시 탐색하는 것(또는 새로 고침)이 중지됩니다.