在 Bootstrap 中以编程方式关闭模式对话框并在提交时显示另一个页面答案

【问题标题】：Programmatically dismiss modal dialog in Bootstrap and display another page on submit在 Bootstrap 中以编程方式关闭模式对话框并在提交时显示另一个页面
【发布时间】：2020-05-25 03:11:47
【问题描述】：

当用户进入需要他们注册的页面时，我想显示一个带有 ID 和密码的 Bootstrap 模式对话框。当用户按下提交按钮时，我想：

验证密码并注册
关闭对话框
将它们带到另一个页面以显示一些信息

当前发生的情况是当用户按下提交按钮时。我通过验证并尝试隐藏 Bootstrap 模式对话框，但随后页面重新显示并且对话框返回。这种情况一遍又一遍地发生。

这里是jsfiddle

这是 HTML 页面：

<!DOCTYPE html>

<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />

    <script
      src="https://code.jquery.com/jquery-3.4.1.min.js"
      integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
      integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
      integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
      crossorigin="anonymous"
    ></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Immedia Signup</title>

    <script src="https://npmcdn.com/parse/dist/parse.min.js"></script>

    <!-- Bootstrap CSS -->
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
      integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
      crossorigin="anonymous"
    />
    <!-- Immedia stylsheet overrides -->
    <!-- <link href="css/im-styles.css" rel="stylesheet" /> -->

    <style>
      html,
      body {
        background: url() no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        /* color: #212529; */
        /* color: #bccee0; */
        color: #bccee0;
      }

      .big-text-on-bg-img {
        width: 75%;
        padding-right: 15px;
        padding-left: 15px;
        margin-right: auto;
        margin-left: auto;
        font-size: 2.5rem;
        font-weight: 400;
        line-height: 1.2;
      }

      @media (min-width: 450px) {
        .container-xs {
          max-width: 500px;
        }
      }

      .display-5 {
        font-size: 2.5rem;
        font-weight: 300;
        line-height: 1.2;
      }
    </style>
    <title>Immedia Home</title>
  </head>
  <body onload="onloadHandler()">
    <div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
      <header class="masthead mb-auto">
        <div class="inner">
          <h1 class="masthead-brand">Modal Test Page</h1>
        </div>
      </header>
    </div>
    <!-- cover-container -->
    <!-- Modal -->
    <div
      class="modal fade"
      id="signupModal"
      data-backdrop="static"
      tabindex="-1"
      role="dialog"
      aria-labelledby="signupModalLabel"
      aria-hidden="true"
    >
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="signup-title">
              Thanks for entering an email address and password to protect your
              account.
            </h5>
          </div>
          <!-- modal-header -->
          <div class="modal-body">
            <form id="signup-form" onsubmit="submitHandler()">
              <div class="form-group">
                <label for="email">Email address</label>
                <input
                  type="email"
                  autocomplete="username"
                  class="form-control"
                  id="email"
                  aria-describedby="emailHelp"
                  required
                />
                <small id="emailHelp" class="form-text text-muted"
                  >We'll never spam you or share your email.</small
                >
              </div>
              <!-- form-group -->
              <div class="form-group">
                <label for="password">Password</label>
                <input
                  type="password"
                  autocomplete="new-password"
                  class="form-control"
                  id="pwd-field"
                  aria-describedby="passwordHelp"
                  required
                />
                <small id="passwordHelp" class="form-text text-muted">
                  Passwords must have at least 8 characters with one uppercase
                  one lowercase, one digit and one special character
                  "!@#$%&amp;*()"
                </small>
              </div>
              <!-- form-group -->
              <div class="form-group">
                <button
                  id="submit-button"
                  type="submit"
                  class="btn btn-primary"
                >
                  Submit
                </button>
              </div>
              <!-- form-group -->
            </form>
          </div>
          <!-- modal-body -->
        </div>
        <!-- modal-content -->
      </div>
      <!-- modal-dialog -->
    </div>
    <!-- modal fade-->

    <!-- JavaScript -->
    <script>
      // Function definitions
      //

      $("#signupModal").on("hidden.bs.modal", function() {
        $("body").removeClass("signupModal");
      });

      // Hide a DOM element on the page
      // Process the signup when the user presses submit
      $("#submit-button").click(function() {
        const email = $("#email").val();
        const password = $("#pwd-field").val();
        console.info("email: " + email + ', password: "' + password + '"');

        if (true) {
          // Do not check for valid password. Assume it is for now.
          console.info("valid password: ", password);

          try {
            // Signup user here
            console.info("submitHandler(): successfully signed up");
            $("#signupModal").modal(hide);
            // They signed up successfully. Send them to the next page (for example only)
            window.location.href = "https://www.duckduckgo.com";
         } catch (err) {
            console.error("Error signing up: ", err);
          }
        } else {
          // invalid password
          $("#pwd-field").val("");
        }
        console.info("submitHandler(): exiting function");
      });

      // Begin page execution
      function onloadHandler() {
        console.info("onloadHandler()");
        $("body").addClass("#signupModal");
        $("#signupModal").modal("toggle");
     }
    </script>
  </body>
</html>

【问题讨论】：

您可以使用注册流程让他们也登录吗？如果没有，也许将他们的 IP 地址附加到注册请求中以暂时停止模式。
其实我就是这么做的。我正在注册并登录。您能否详细说明附加 IP 地址将如何停止模式？谢谢。
进行验证，如果当前用户的 IP 地址与注册过程中附加的 IP 地址匹配，则不会要求他们再次注册。
您是否有任何（会话/存储）表明用户已登录？您可以使用它来决定是否显示模态if (!signed_in) { ...show modal }
问题不在于显示模式。我已经有了会话信息来决定何时显示模式。问题是当用户按下提交时。即使我将模式隐藏在按钮单击处理程序中，模式也会暂时消失，页面刷新并且模式 COMES BACK 也是如此。在点击处理程序中，我想隐藏/删除/销毁模式。我已经尝试了至少 4 种不同的解决方案，但似乎都没有。

标签： javascript bootstrap-4 bootstrap-modal

【解决方案1】：

您正在单击form 内的提交按钮。这将触发form submit 尝试重定向提交请求。由于您没有在form 标记上指定任何action 和method 属性，因此浏览器不知道将form submit 请求重定向到哪里，您会看到一个空白页面。

在您的代码中，您在提交按钮上使用 js 指定了一个动作侦听器。侦听器内的代码将执行，然后执行默认操作，即form submit。为防止这种情况发生，请添加 e.preventDefault() 并且不会执行 form submit 事件。

以下代码有效。您将看到一个空白页面，其中包含控制台错误 Refused to display 'https://duckduckgo.com/' in a frame because an an ancestor违反了以下内容安全策略指令：“frame-ancestors 'self'” 在运行代码时在 jsfiddle 或 stackoverflow sn-p 中。这表明页面重定向正确发生并且将在您的应用程序中工作。 SO 和 JSFiddle 不喜欢在其代码 sn-ps 中显示其他网站。

$("#signupModal").on("hidden.bs.modal", function() {
  $("body").removeClass("signupModal");
});

// Hide a DOM element on the page
// Process the signup when the user presses submit
$("#submit-button").click(function(e) {
  // ************Add below code to prevent defauilt submit button form submit **********
  e.preventDefault();
  const email = $("#email").val();
  const password = $("#pwd-field").val();
  console.info("email: " + email + ', password: "' + password + '"');

  if (true) {
    // Do not check for valid password. Assume it is for now.
    console.info("valid password: ", password);

    try {
      // Signup user here
      console.info("submitHandler(): successfully signed up");
      $("#signupModal").modal('hide');
      // They signed up successfully. Send them to the next page (for example only)
      // ************ Change code to replace so that register page is removed from browser history on redirect **********
      window.location.replace("https://www.duckduckgo.com");
    } catch (err) {
      console.error("Error signing up: ", err);
    }
  } else {
    // invalid password
    $("#pwd-field").val("");
  }
  console.info("submitHandler(): exiting function");
});

// Begin page execution
function onloadHandler() {
  console.info("onloadHandler()");
  $("body").addClass("#signupModal");
  $("#signupModal").modal("toggle");
}

html,
body {
  background: url() no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  /* color: #212529; */
  /* color: #bccee0; */
  color: #bccee0;
}

.big-text-on-bg-img {
  width: 75%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
  font-size: 2.5rem;
  font-weight: 400;
  line-height: 1.2;
}

@media (min-width: 450px) {
  .container-xs {
    max-width: 500px;
  }
}

.display-5 {
  font-size: 2.5rem;
  font-weight: 300;
  line-height: 1.2;
}

<!DOCTYPE html>

<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <meta name="viewport" content="width=device-width" />
  <title>Immedia Signup</title>
  <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
  <script src="https://npmcdn.com/parse/dist/parse.min.js"></script>
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous" />
  <!-- Immedia stylsheet overrides -->
  <!-- <link href="css/im-styles.css" rel="stylesheet" /> -->
</head>

<body onload="onloadHandler()">
  <div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
    <header class="masthead mb-auto">
      <div class="inner">
        <h1 class="masthead-brand">Modal Test Page</h1>
      </div>
    </header>
  </div>
  <!-- cover-container -->
  <!-- Modal -->
  <div class="modal fade" id="signupModal" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="signupModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="signup-title">
            Thanks for entering an email address and password to protect your account.
          </h5>
        </div>
        <!-- modal-header -->
        <div class="modal-body">
          <!-- ************ Remove form submit code ***********-->
          <form id="signup-form">
            <div class="form-group">
              <label for="email">Email address</label>
              <input type="email" autocomplete="username" class="form-control" id="email" aria-describedby="emailHelp" required />
              <small id="emailHelp" class="form-text text-muted">We'll never spam you or share your email.</small
                    >
                  </div>
                  <!-- form-group -->
                  <div class="form-group">
                    <label for="password">Password</label>
                    <input
                      type="password"
                      autocomplete="new-password"
                      class="form-control"
                      id="pwd-field"
                      aria-describedby="passwordHelp"
                      required
                    />
                    <small id="passwordHelp" class="form-text text-muted">
                      Passwords must have at least 8 characters with one uppercase
                      one lowercase, one digit and one special character
                      "!@#$%&amp;*()"
                    </small>
            </div>
            <!-- form-group -->
            <div class="form-group">
              <button id="submit-button" type="submit" class="btn btn-primary">
                      Submit
                    </button>
            </div>
            <!-- form-group -->
          </form>
        </div>
        <!-- modal-body -->
      </div>
      <!-- modal-content -->
    </div>
    <!-- modal-dialog -->
  </div>
  <!-- modal fade-->
</body>

</html>

【讨论】：