cómo cerrar un modal sin que la página se actualice

Question

Tengo una página en la que aparece el modal, pero cuando hago clic para cerrarla, la página se actualiza y no quiero que eso suceda.

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

Si vas a la página de la tienda y haces clic en las armas en el lado derecho, verás un artículo.Haga clic en eso y aparecerá el modal.Sin embargo, cuando haces clic en "Buscar otras armas" en la parte superior, la página se actualiza y no veo por qué lo hace, ya que el enlace no está configurado para ir a ninguna parte, solo para cerrar el modal.

Alguien puede ayudarme porfavor?

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

y aquí está el código para el 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

Su modal parece funcionar aprovechando el uso del # fragmento.Entonces, cuando la URL de la página es #ags, el modal está configurado para mostrarse.

Lo que desea hacer es, en lugar de vincular el botón de cerrar a la página (que en realidad es una carga de página nueva), desea vincular a una sección de la página que no es el ancla del fragmento hash modal.

La forma más sencilla de hacerlo es vincular a ninguna sección en absoluto:haga su enlace de anclaje a algo como esto:

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

El contenido vacío después del # El símbolo significa que el navegador debe saltar a la parte superior de la página sin recargarla.Efectivamente, esto cierra el modal y mantiene abierta la página actual.

Answer 2

"Buscar otras armas" es un elemento de anclaje (<a>) con un HREF vacío.El Especificaciones (RFC 2396) establece que "una referencia de URI que no contiene un URI es una referencia al documento actual".

En otras palabras, debido a que tiene un atributo href, pero no tiene nada asignado, el navegador establece el href en el http://dev.ikov.org/store/index.php, lo que está provocando la actualización.

Lo que querrás hacer es actualizar tu controlador onclick para evitar la acción predeterminada (llamar e.preventDefault()).Esto evitará que el navegador vuelva a navegar a la página (o que se actualice).