So schließen Sie ein Modal, ohne dass die Seite aktualisiert wird

Question

Ich habe eine Seite, auf der das Modal angezeigt wird, aber wenn ich darauf klicke, um es zu schließen, wird die Seite aktualisiert, und ich möchte nicht, dass das passiert.

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

Wenn Sie zur Store-Seite gehen und dann auf die Waffen auf der rechten Seite klicken, sehen Sie einen Artikel.Klicken Sie darauf und das Modal erscheint.Wenn Sie jedoch oben auf „Andere Waffen durchsuchen“ klicken, wird eine Aktualisierung der Seite erzwungen, und ich kann nicht erkennen, warum das so ist, da der Link nicht so eingestellt ist, dass er irgendwohin führt, sondern nur das Modal schließt.

Kann mir bitte jemand helfen?

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

und hier ist der Code für den HTML-Code

                                <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

Ihr Modal scheint zu funktionieren, indem es die Nutzung des nutzt # Fragment.Also, wenn die URL der Seite ist #ags, das Modal wird angezeigt.

Was Sie tun möchten, ist, anstatt die Schließen-Schaltfläche mit der Seite zu verknüpfen (was eigentlich das Laden einer neuen Seite ist), Sie mit einem Abschnitt der Seite zu verknüpfen, der dies tut ist nicht der modale Hash-Fragment-Anker.

Der einfachste Weg, dies zu tun, besteht darin, zu verlinken überhaupt kein Abschnitt:Erstellen Sie Ihren Ankerlink etwa so:

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

Der leere Inhalt nach dem # Das Symbol bedeutet, dass der Browser zum Seitenanfang springen soll, ohne die Seite neu zu laden.Dadurch wird das Modal effektiv geschlossen und die aktuelle Seite bleibt geöffnet.

Answer 2

Das „Andere Waffen durchsuchen“ ist ein Ankerelement (<a>) mit einem leeren HREF.Der spez (RFC 2396) besagt: „Eine URI-Referenz, die keinen URI enthält, ist eine Referenz auf das aktuelle Dokument.“

Mit anderen Worten: Da es ein href-Attribut hat, aber nichts zugewiesen ist, setzt der Browser das href auf das http://dev.ikov.org/store/index.php, was die Aktualisierung verursacht.

Sie sollten Ihren Onclick-Handler aktualisieren, um die Standardaktion (Aufruf) zu verhindern e.preventDefault()).Dadurch wird verhindert, dass der Browser tatsächlich erneut zur Seite navigiert (oder aktualisiert).