Question

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

有没有办法阻止父页重新加载。

以下是模态弹出窗口的代码：

<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

我假设你使用的是bootstrap模态。

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

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

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

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

2 个答案: