como fechar um modal sem atualizar a página

Question

Tenho uma página em que o modal aparece, mas quando clico para fechá-lo a página é atualizada e não quero que isso aconteça.

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

Se você for até a página da loja e clicar nas armas do lado direito, você verá um item.Clique nele e o modal aparecerá.No entanto, quando você clica em "Procurar outras armas" na parte superior, ele força a atualização da página, e não consigo descobrir por que está fazendo isso, já que o link não está configurado para ir a lugar nenhum, apenas para fechar o modal.

Alguém pode ajudar?

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

e aqui está o código para o 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

Seu modal parece funcionar aproveitando o uso do # fragmento.Então, quando o URL da página for #ags, o modal está definido para mostrar.

O que você deseja fazer é, em vez de vincular o botão Fechar à página (que na verdade é um novo carregamento de página), vincular a uma seção da página que não é a âncora do fragmento de hash modal.

A maneira mais fácil de fazer isso é criar um link para nenhuma seção:faça seu link âncora para algo assim:

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

O conteúdo vazio após o # símbolo significa que o navegador deve pular para o topo da página sem recarregá-la.Efetivamente, isso fecha o modal e mantém a página atual aberta.

Answer 2

O "Navegar por outras armas" é um elemento âncora (<a>) com um HREF vazio.O especificação (RFC 2396) afirma que "uma referência de URI que não contém um URI é uma referência ao documento atual."

Em outras palavras, por ter um atributo href, mas nada atribuído, o navegador define o href para o http://dev.ikov.org/store/index.php, o que está causando a atualização.

O que você deseja fazer é atualizar seu manipulador onclick para evitar a ação padrão (chamar e.preventDefault()).Isso impedirá que o navegador navegue novamente para a página (ou atualize).