どのように近いモーダルなしのページをリフレッシュ

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

Modalは、#フラグメントの使用を活用することで機能するようです。そのため、ページのURLが#agsの場合、モーダルは表示されます。

閉じるボタンをページにリンクするのではなく、がでないページのセクションにリンクしたいのです。モーダルハッシュフラグメントアンカー

これを行う最も簡単な方法は、の場合はのセクションにリンクすることです：あなたのアンカーリンクをこのようなものにリンクさせる：

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

.

#シンボルの後の空の内容は、ブラウザがリロードせずにページの上部にジャンプする必要があります。効果的に、これはモーダルを閉じて現在のページを開いたままにします。

Answer 2

の"閲覧その他の武器"は、アンカー要素<a>）を空にすることができる。の スペック (RFC2396)"のURI参照を含まないURIは現在のドキュメントへの参照と."

つまり、ではhref属性も指定されブラウザを設定します<a hrefの http://dev.ikov.org/store/index.php, であるが、リフレッシュ。

あなたは何をやりたいことが更新onclickハンドラの防止のためのデフォルトの行動の呼び出し e.preventDefault()).この停止のブラウザから実際に航行のページに再度リフレッシュ).