как закрыть модальное окно без обновления страницы

Question

У меня есть страница, на которой появляется модальное окно, но когда я нажимаю, чтобы закрыть его, страница обновляется, и я не хочу, чтобы это произошло.

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

Если вы зайдете на страницу магазина, а затем нажмите на оружие справа, вы увидите один предмет.Нажмите на него, и появится модальное окно.Однако, когда вы нажимаете кнопку «Просмотреть другое оружие» вверху, страница обновляется, и я не могу понять, почему он это делает, поскольку ссылка не предназначена для перехода куда-либо, а просто для закрытия модального окна.

Кто-нибудь может помочь?

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

и вот код для 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

Похоже, что ваше модальное окно работает за счет использования # фрагмент.Итак, когда URL-адрес страницы #ags, модальное окно настроено на отображение.

Вместо того, чтобы связать кнопку закрытия со страницей (которая на самом деле представляет собой загрузку новой страницы), вы хотите связать ее с разделом страницы, который не модальная привязка фрагмента хэша.

Самый простой способ сделать это — дать ссылку на вообще нет раздела:сделайте свою якорную ссылку примерно такой:

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

Пустой контент после # Символ означает, что браузер должен перейти к началу страницы без ее перезагрузки.По сути, это закрывает модальное окно и оставляет текущую страницу открытой.

Answer 2

Кнопка "Просмотреть другое оружие" является элементом привязки (<a>) с пустой ссылкой.Тот Самый спецификация (RFC 2396) гласит: "ссылка на URI, которая не содержит URI, является ссылкой на текущий документ".

Другими словами, поскольку у него есть атрибут href, но ему ничего не назначено, браузер устанавливает href в http://dev.ikov.org/store/index.php, что вызывает обновление.

Что вам нужно будет сделать, так это обновить ваш обработчик onclick, чтобы предотвратить действие по умолчанию (вызов e.preventDefault()).Это остановит повторный переход браузера на страницу (или ее обновление).