comment fermer un modal sans avoir l'actualisation de la page

Question

J'ai une page dans laquelle le modal affiche, mais lorsque je clique pour fermer l'actualisation de la page, et je ne veux pas que cela se produise.

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

Si vous allez à la page de la boutique, puis cliquez sur les armes à la droite, vous verrez un élément.Cliquez sur cela et le modal affiche.Toutefois, lorsque vous cliquez sur le bouton "Parcourir d'autres armes" sur le dessus, il force la page pour actualiser, et je ne peux pas le voir afin de savoir pourquoi il le fait depuis le lien n'est pas aller n'importe où, juste pour fermer la modale.

Quelqu'un peut-il aider s'il vous plaît?

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

et voici le code 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

Votre modale semble fonctionner en tirant parti de l'utilisation de la # le fragment.Ainsi, lorsque l'url de la page est #ags, le modal est configuré pour afficher.

Ce que vous voulez faire, c'est plutôt que le bouton de fermeture de la page (qui est vraiment, c'est un nouveau chargement de la page), vous souhaitez mettre un lien vers une section de la page n'est-ce pas le modal fragment de hachage d'ancrage.

La façon la plus simple de le faire est de lier à pas d'article à tous:faites votre ancre de lien à quelque chose comme ceci:

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

Le contenu vide après l' # symbole signifie que le navigateur doit sauter vers le haut de la page sans la recharger.Effectivement, cela ferme le modal et garde la page en cours ouverte.

Answer 2

La "Parcourir d'autres armes" est un élément d'ancrage (<a>) avec un vide HREF.L' spec (RFC 2396), "une référence URI qui ne contient pas un URI est une référence au document courant."

En d'autres termes, parce qu'il a un attribut href, mais rien d'affecté, le navigateur définit le href de l' http://dev.ikov.org/store/index.php, qui est à l'origine de l'actualisation.

Ce que vous voulez faire est de mettre à jour votre gestionnaire onclick pour empêcher l'action par défaut (appel e.preventDefault()).Cela va arrêter le navigateur de naviguer à nouveau la page (ou d'une actualisation).