javascript - 如何在 ASP.NET MVC 中创建一个简单的 Bootstrap 模式对话框

Question

用户从我的登录页面点击忘记密码链接并转到此页面填写表格并请求新密码

http://localhost:2350/Account/ForgotPassword

现在，当他们在该页面中单击保存 时，他们的请求就已创建。所以我只需要一个 Bootstrap Modal 对话框弹出并说“您的请求已提交”和一个“确定”按钮它，当他们点击确定时，它会将他们带回登录页面。

我从来没有这样做过 Ajax、弹出对话框等。你能给我指出一些不太复杂而无法遵循和重现的教程代码吗？因为我的模式非常简单，不包含任何数据，只有一个静态文本和一个重定向到登录页面的确定按钮。

Answer 1

您可以设置您的 Bootstrap Modal像这样:

<div class="container">

  <h3>Modal Example</h3>

  <!-- Button to trigger modal -->
  <div>
    <a href="#myModal" role="button" class="btn" data-toggle="modal">Launch Modal</a>
  </div>

  <!-- Modal -->
  <div id="myModal" class="modal hide" tabindex="-1" role="dialog">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
      <h3>Modal Example</h3>
    </div>
    <div class="modal-body">

      <p>
        This is your body
      </p>

    </div>
    <div class="modal-footer">
      <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
      <button id="submitButton" class="btn btn-primary">OK</button>
    </div>
  </div>

</div>

在您的 JavaScript 代码中，您捕获了 OK 按钮的 click 事件。然后，调用ajax并重定向到登录页面。

$('#submitButton').click(function() {

  // Call AJAX here
  $.ajax({
    method: "POST",
    url: "", // Your URL here
    data: "" // Your data here
  });

  // Redirect here
});

请检查这个jsfiddle了解更多详情。