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

Question

我已经使用模式创建了一个弹出窗口。 当用户单击链接时，它将显示此模式弹出窗口。 我已经在弹出窗口中放置了退出按钮以关闭弹出窗口。 我的问题是，当我单击退出按钮时，弹出窗口退出，但父页面被重新加载。

有什么方法可以防止父页面重新加载。

这是模式弹出窗口的代码：

<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

由于您的<form>没有任何提交按钮，因此浏览器将该按钮视为提交按钮。

所以用这个代码

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

或将此按钮放在<form>标签之外

Answer 2

我认为，您正在使用引导程序模式。

您可以创建自定义按钮以关闭引导程序模式。 只需检查以下代码

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

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