2014-02-26 88 views
1

我有一個模式彈出的頁面,但是當我點擊關閉它時頁面刷新,我不希望發生這種情況。如何在沒有頁面刷新的情況下關閉模式

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

函數'returnIndex();'的javascript怎麼樣?不是關閉模式,而是調用一個將用戶返回到索引頁面的函數(我假設這是函數的作用)。 – royhowie

+0

我不希望它返回到索引頁面,我只是希望它在不更改頁面位置的情況下關閉模式。 returnIndex();只改變一些元素樣式。 – msafi

+0

如果它沒有做任何與返回索引(頁面)相關的內容,那麼不應該將其命名爲returnIndex()。根據它的功能命名一個函數。 – royhowie

回答

1

你的語氣似乎通過利用使用#片段的工作代碼。所以當頁面的網址是#ags時,模式設置爲顯示。

你想要做的不是將關閉按鈕鏈接到頁面(這實際上是一個新的頁面加載),而是要鏈接到不是頁面的一部分模態哈希片段錨。

要做到這一點,最簡單的方法是在所有鏈接到無節:讓你的錨鏈接是這樣的:

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

#符號後的內容爲空意味着瀏覽器應該跳到頁面的頂部沒有重新加載它。實際上,這將關閉模式並保持當前頁面打開。

+0

非常感謝你:)真的有幫助!你是一個拯救生命的哈哈 – msafi

0

「瀏覽其他武器」是一個具有空HREF的錨點元素(<a>)。 spec(RFC 2396)指出「不包含URI的URI引用是對當前文檔的引用」。

換句話說,因爲它具有href屬性,但沒有分配,瀏覽器會將href設置爲導致刷新的http://dev.ikov.org/store/index.php

你想要做的是更新你的onclick處理程序以防止默認操作(調用e.preventDefault())。這將停止瀏覽器實際再次導航到頁面(或刷新)。

相關問題