如何在不刷新页面的情况下关闭模态
-
21-12-2019 - |
题
我有一个模态弹出的页面,但是当我点击关闭它时,页面会刷新,我不希望发生这种情况。
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>
解决方案
你的模式似乎是通过利用 #
片段。所以当页面的url是 #ags
, ,模态设置为显示。
你想要做的是,而不是将关闭按钮链接到页面(这实际上是一个新的页面加载),你想要链接到页面的一个部分, 不是 的模态哈希片段锚点。
最简单的方法是链接到 完全没有部分:让你的锚点链接到这样的东西:
http://dev.ikov.org/store/index.php#
后的空内容 #
符号表示浏览器应该跳转到页面顶部而不重新加载它。实际上,这会关闭模式并保持当前页面打开。
其他提示
“浏览其他武器”是一个锚元素(<a>
)与空的 HREF。这 规格 (RFC 2396) 指出“不包含 URI 的 URI 引用是对当前文档的引用”。
换句话说,因为它有一个 href 属性,但没有分配任何内容,所以浏览器将 href 设置为 http://dev.ikov.org/store/index.php
, ,这导致刷新。
您需要做的是更新您的 onclick 处理程序以防止默认操作(调用 e.preventDefault()
)。这将阻止浏览器再次实际导航到该页面(或刷新)。
不隶属于 StackOverflow