在弹出窗口中单击退出按钮时，防止重新加载父页面

Question

I have created a popup using modal. When user clicks on a link it will show this modal popup. I have put an exit button inside popup in order to close the popup. My problem is when i click on the exit button, the popups exits but the parent page gets reloaded.

Is there any way to preventing the parent page from reloading.

Here is the code for modal popup:

<div id="box-config-modal1" class="modal hide fade in" style="display: none;">
  <div class="box" id="box-details">
    <h4 class="box-header round-top">Details</h4>

    <div class="box-container-toggle" style="padding-left:20px;padding-right:20px;">
      <div class="box-content">
        <form name="popup" id="popup">
          <fieldset>

            <button class="close" data-dismiss="modal"></button>
            <h3>User Details</h3>

            <div class="control-group">

              <div class="controls">
                <label class="control-label" for="typeahead" style="width:100px;float:left;">Name </label><label id="advname" style="padding-left:150px;"></label>
              </div>
            </div>
            <div class="control-group">

              <div class="controls">
                <label class="control-label" for="typeahead" style="width:100px;float:left;">ID </label><label id="advid" style="padding-left:150px;"></label>
              </div>
            </div>
            <div class="control-group">

              <div class="controls">
                <label class="control-label" for="typeahead" style="width:100px;float:left;">Email </label><label id="email1" style="padding-left:150px;"></label>
              </div>
            </div>
            <div class="control-group">

              <div class="controls">
                <label class="control-label" for="typeahead" style="width:100px;float:left;">Country </label><label id="country" style="padding-left:150px;"></label>
              </div>
            </div>
            <div class="control-group">

              <div class="controls">
                <label class="control-label" for="typeahead" style="width:100px;float:left;">Website </label><label id="website" style="padding-left:150px;"></label>
              </div>
            </div>
            <div class="control-group">
              <div class="controls" id="newlist">
                <label class="control-label" for="typeahead" style="width:100px;float:left;">Change
                  History </label><label id="changehistory" style="padding-left:150px;"></label></div>
            </div>
          </fieldset>
        </form>
      </div>
    </div>
  </div>
</div>

Answer 1

Since your <form> doesn't have any submit button, so browser treating that button as submit button.

So use this code

<button class="close" data-dismiss="modal" onclick="javascript:return false;"></button>

OR put this button outside <form> Tag

Answer 2

I assume, you are using bootstrap modal.

You can create custom button to close bootstrap modal. Just check the following code

<a href="#" class="my-close-btn">Close Popup</a>

$(function () {
    $(".my-close-btn").on('click', function() {
        $('#box-config-modal1').modal('hide');
        return false;
    });
});