how to close a modal without having the page refresh

Question

I have a page in which the modal pops up, but when i click to close it the page refreshes, and i dont want that to happen.

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

If you go to the store page, then click on the weapons at the right side, you'll see one item. Click on that and the modal pops up. However, when you click the "Browse other weapons" on the top, it forces the page to refresh, and i cant see to find why it's doing that since the link isn't set to go anywhere, just to close the modal.

Can anyone please help?

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

and here is the code for the 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>

What about the javascript for the function `returnIndex();`? Instead of closing the modal, you're calling a function that returns the user to the index page (I'm assuming that's what the function does). — royhowie, Feb 26 '14 at 00:59
I dont want it to return to the index page, i just want it to close the modal without changing the page location. returnIndex(); only changes a few element styles. — msafi, Feb 26 '14 at 01:01
You shouldn't name it `returnIndex()` if it does nothing relating to returning to the index (page). Name a function based on what it does. — royhowie, Feb 26 '14 at 01:10

score 1 · Accepted Answer · answered Feb 26 '14 at 01:01

Your modal appears to work by leveraging use of the # fragment. So when the url of the page is #ags, the modal is set to show.

What you want to do is rather than link the close button to the page (which is really is a new page load), you want to link to a section of the page that isn't the modal hash fragment anchor.

The easiest way to do this is to link to no section at all: make your anchor link to something like this:

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

The empty content after the # symbol means the browser should jump to the top of the page without reloading it. Effectively, this closes the modal and keeps the current page open.

score 0 · Answer 2 · answered Feb 26 '14 at 01:06

The "Browse other weapons" is an anchor element (<a>) with an empty HREF. The spec (RFC 2396) states "a URI reference that does not contain a URI is a reference to the current document."

In other words, because it has an href attribute, but nothing assigned, the browser sets the href to the http://dev.ikov.org/store/index.php, which is causing the refresh.

What you'll want to do is update your onclick handler to prevent the default action (calling e.preventDefault()). This will stop the browser from actually navigating to the page again (or a refresh).

how to close a modal without having the page refresh

2 Answers2