如何在不刷新页面的情况下关闭模式答案

【问题标题】：how to close a modal without having the page refresh如何在不刷新页面的情况下关闭模式
【发布时间】：2014-02-26 00:56:21
【问题描述】：

我有一个弹出模式的页面，但是当我点击关闭它时，页面会刷新，我不希望这种情况发生。

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>

【问题讨论】：

函数returnIndex();的javascript怎么样？您调用的不是关闭模式，而是调用一个将用户返回到索引页面的函数（我假设这就是该函数的作用）。
我不希望它返回到索引页面，我只是希望它在不更改页面位置的情况下关闭模式。返回索引（）；只改变了一些元素样式。
如果它与返回索引（页面）无关，则不应将其命名为 returnIndex()。根据函数的作用命名函数。

标签： javascript html css z-index modal-window

【解决方案1】：

您的模态似乎可以通过使用# 片段来工作。所以当页面的url为#ags时，modal设置为显示。

您想要做的不是将关闭按钮链接到页面（这实际上是一个新的页面加载），而是要链接到页面中不是的部分模态哈希片段锚。

最简单的方法是链接到根本没有部分：让你的锚链接到这样的东西：

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

# 符号后面的空内容表示浏览器应该跳转到页面顶部而不重新加载它。实际上，这会关闭模式并保持当前页面打开。

【讨论】：

非常感谢 :) 真的很有帮助！你是救生员哈哈

【解决方案2】：

“浏览其他武器”是一个带有空 HREF 的锚元素 (<a>)。 spec (RFC 2396) 声明“不包含 URI 的 URI 引用是对当前文档的引用。”

换句话说，因为它有一个 href 属性，但没有分配任何内容，所以浏览器将 href 设置为 http://dev.ikov.org/store/index.php，这会导致刷新。

您要做的是更新您的 onclick 处理程序以阻止默认操作（调用 e.preventDefault()）。这将阻止浏览器再次实际导航到页面（或刷新）。

【讨论】：