come chiudere una modale senza avere il refresh della pagina

Question

Ho una pagina in cui modale si apre, ma quando clicco per chiudere la pagina viene aggiornata, e io non voglio che ciò accada.

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

Se si va al negozio di pagina, quindi fare clic su armi a destra, vedrete una voce.Fare clic su questo e modale si apre.Tuttavia, quando si fare clic su "Sfoglia altre armi" in alto e costringe la pagina da aggiornare, e non posso vedere di trovare il motivo per cui si sta facendo che, dato che il collegamento non è impostato per andare da nessuna parte, solo per chiudere il modale.

Qualcuno può per favore aiutarmi?

   .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 qui è il codice 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

Il tuo modale sembra funzionare sfruttando l'uso del frammento #.Quindi, quando l'URL della pagina è #ags, il modal è impostato per mostrare.

Cosa vuoi fare è piuttosto che collegare il pulsante Chiudi alla pagina (che è davvero un nuovo carico di pagina), si desidera collegare a una sezione della pagina che non è L'ancora del frammento di hash modal.

Il modo più semplice per farlo è collegare a nessuna sezione a tutti : crea il tuo collegamento di ancoraggio a qualcosa del genere:

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

.

Il contenuto vuoto dopo il simbolo di # significa che il browser deve passare alla parte superiore della pagina senza ricaricarla.In effetti, questo chiude il modal e mantiene aperta la pagina corrente.

Answer 2

La "Sfoglia altre armi" è un elemento di ancoraggio (<a>) con un HREF vuoto.Il spec (RFC 2396) recita: "un riferimento URI che non contiene un URI è un punto di riferimento per il documento corrente."

In altre parole, perché è un attributo href, ma nulla assegnato, il browser imposta href alla http://dev.ikov.org/store/index.php, che sta causando l'aggiornamento.

Ciò che dovrai fare è aggiornare il vostro gestore onclick per evitare che l'azione di default (chiamata e.preventDefault()).Questo fermerà il browser effettivamente navigando alla pagina (o un aggiornamento).