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

모달이 튀어 나오는 페이지가 있습니다.하지만 닫을 때 클릭하면 페이지가 새로 고침되고 그 일이 발생하지 않습니다. 당신이 상점 페이지로 이동하면페이지를 새로 고침하지 않고 모달을 닫는 방법

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; 
}

및

는

       <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>

출처

2014-02-26 msafi

returnIndex(); 함수의 자바 스크립트는 어떻게됩니까? 모달을 닫는 대신 인덱스 페이지로 사용자를 반환하는 함수를 호출합니다. 함수가 수행하는 것으로 가정합니다. – royhowie

인덱스 페이지로 돌아가고 싶지는 않지만 페이지 위치를 변경하지 않고 모달을 닫으려고합니다. returnIndex(); 몇 가지 요소 스타일 만 변경합니다. – msafi

인덱스 (페이지)로 돌아가는 것과 관련이 없다면 이름을'returnIndex()'로 지정하면 안됩니다. 기능에 따라 기능의 이름을 지정하십시오. – royhowie

모달이 # 조각의 사용을 활용하여 작업 표시되는 HTML 코드입니다. 따라서 페이지의 URL이 #ags 일 때 모달은 표시로 설정됩니다.

닫기 버튼을 페이지에 연결하는 대신 (실제로는 새로운 페이지로드 임), 이 아닌 페이지 섹션에 연결하려는 경우 모달 해시 조각 닻. 이런 식으로 앵커 링크를 확인하십시오 :

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

# 기호 다음 빈 내용이 브라우저로 이동한다는 뜻

이 작업을 수행하는 가장 쉬운 방법은 모든에 어떤 부분을 연결하는 것입니다 페이지를 다시로드하지 않고 맨 위. 효과적으로 모달을 닫고 현재 페이지를 열어 둡니다.

출처

2014-02-26 01:01:52 Bryce

정말 고마워요. 정말 도움이 되었어요! 너는 생명의 은인이야. 하하. – msafi

"다른 무기 검색"은 빈 HREF가있는 앵커 요소 (<a>)입니다. spec (RFC 2396)은 "URI를 포함하지 않는 URI 참조는 현재 문서에 대한 참조입니다."

즉, href 속성이 있지만 아무것도 할당되지 않았기 때문에 브라우저는 href를 http://dev.ikov.org/store/index.php으로 설정하여 새로 고침을 유발합니다.

기본 작업 (전화 e.preventDefault())을 방지하려면 onclick 처리기를 업데이트하십시오. 그러면 브라우저가 실제로 페이지로 다시 이동하지 못하게됩니다 (새로 고침).

출처

2014-02-26 01:06:27 Jack

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

답변

관련 문제