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

【问题标题】：Prevent Parent page from reloading when exit button is clicked in popup在弹出窗口中单击退出按钮时防止父页面重新加载
【发布时间】：2023-03-05 19:06:02
【问题描述】：

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

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

这里是模态弹窗的代码：

<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>

【问题讨论】：

尝试在你的onClick中返回false，它会阻止重新加载页面，因为表单中按钮的默认类型是'提交'

标签： javascript jquery

【解决方案1】：

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

所以使用这个代码

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

或者把这个按钮放在<form>标签之外

【讨论】：

【解决方案2】：

我假设，您正在使用引导模式。

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

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

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

【讨论】：

我按照你说的试过了。创建自定义按钮以关闭引导模式。但它不工作。它甚至没有关闭模态..
@Aishwaryas：你能为你的模态创建一个 jsfiddle 吗？
我已经创建了一个 jsfiddle.. 作为一个 js 初学者并且以前从未使用过 jsfiddle，请不要介意如果有任何错误.. 这是链接：link
@Aishwaryas：我要求您创建一个模态的工作示例。无论如何它都很好。我刚刚创建了一个带有自定义关闭按钮的模式弹出窗口的小提琴。 pls check