在彈出窗口中單擊退出按鈕時，防止重新加載父頁面

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