javascript - 如何使用 JavaScript 触发模态框？

Question

我想在单击某个元素时在文档中显示模式。我能够使其与默认 Bootstrap “数据切换”和“数据目标”属性一起使用。但是当我尝试使用 JavaScript 实现相同的效果时，模式没有显示。相关代码如下:

<span class="navbar-text">
    <a href="" id="login">
        <span class="fa fa-sign-in fa-lg"></span>
        Login
    </a>
</span>

<script>
    $(document).ready(function () {
        $("#login").click(function () {
            $("#loginModal").modal('show');
        });
    });
</script>

它似乎只是在模态中淡出一瞬间，但并没有显示出来。

下面是我想要显示的模态 div:

<div id="loginModal" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg" role="content">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Login</h4>
                <button type="button" class="close" data-dismiss="modal">
                    &times;
                </button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-row">
                        <div class="form-group col-sm-4">
                            <label class="sr-only" for="exampleInputEmail3">Email address</label>
                            <input type="email" class="form-control form-control-sm mr-1" id="exampleInputEmail3"
                                placeholder="Enter email">
                        </div>
                        <div class="form-group col-sm-4">
                            <label class="sr-only" for="exampleInputPassword3">Password</label>
                            <input type="password" class="form-control form-control-sm mr-1" id="exampleInputPassword3"
                                placeholder="Password">
                        </div>
                        <div class="col-sm-auto">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox">
                                <label class="form-check-label"> Remember me
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="form-row">
                        <button type="button" class="btn btn-secondary btn-sm ml-auto"
                            data-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary btn-sm ml-2">Sign in</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

Answer 1

您的代码是正确的，但您没有提供任何 HTML。我只能假设您按照以下指南来设置您的网站。

编辑:由于您提供了 HTML，您的问题是您的 href 为空，因此它将转到一个空页面。将 anchor href 更改为 # 或将其设为按钮，如下面的完整示例所示。

<a href="#" id="login">

这里有一个完美的解释:href must not reload 。您甚至可以添加一个 onClick 事件以达到良好的效果。

您的固定代码

$(function() {
  $("#login").click(function() {
    $("#loginModal").modal('show');
  });
});

.navbar-text {
  display: block;
  border: thin solid #007bff;
  margin: 1em;
  padding: 0.5em;
  border-radius: 0.5em;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<span class="navbar-text">
  <a href="#" id="login">
    <span class="fa fa-sign-in fa-lg"></span> Login
  </a>
</span>

<div id="loginModal" class="modal fade" role="dialog">
  <div class="modal-dialog modal-lg" role="content">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Login</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-row">
            <div class="form-group col-sm-4">
              <label class="sr-only" for="exampleInputEmail3">Email address</label>
              <input type="email" class="form-control form-control-sm mr-1" id="exampleInputEmail3" placeholder="Enter email">
            </div>
            <div class="form-group col-sm-4">
              <label class="sr-only" for="exampleInputPassword3">Password</label>
              <input type="password" class="form-control form-control-sm mr-1" id="exampleInputPassword3" placeholder="Password">
            </div>
            <div class="col-sm-auto">
              <div class="form-check">
                <input class="form-check-input" type="checkbox">
                <label class="form-check-label"> Remember me</label>
              </div>
            </div>
          </div>
          <div class="form-row">
            <button type="button" class="btn btn-secondary btn-sm ml-auto" data-dismiss="modal">Cancel</button>
            <button type="submit" class="btn btn-primary btn-sm ml-2">Sign in</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<小时/>

完整按钮示例

模态文档有多个窗口示例。我结合了下面的四个文档示例，为 Bootstrap 站点创建了一个可用的“登录”功能。

重要步骤

1. 确保您的按钮 id 为“登录”
2. 确保您的模态窗口 id 为 “loginModal”
3. 确保模态窗口布局正确
4. 确保您的模态窗口具有正确的淡入淡出类别

资源

• https://getbootstrap.com/docs/4.0/getting-started/download/
• https://getbootstrap.com/docs/4.0/examples/pricing/
• https://getbootstrap.com/docs/4.0/components/modal/
• https://getbootstrap.com/docs/4.0/components/forms/

$(function() {
  $("#login").click(function() {
    $("#loginModal").modal('show');
  });
});

html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.container {
  max-width: 960px;
}

.pricing-header {
  max-width: 700px;
}

.border-top {
  border-top: 1px solid #e5e5e5;
}

.border-bottom {
  border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom box-shadow">
  <h5 class="my-0 mr-md-auto font-weight-normal">Company name</h5>
  <nav class="my-2 my-md-0 mr-md-3">
    <a class="p-2 text-dark" href="#">Features</a>
    <a class="p-2 text-dark" href="#">Enterprise</a>
    <a class="p-2 text-dark" href="#">Support</a>
    <a class="p-2 text-dark" href="#">Pricing</a>
  </nav>
  <a class="btn btn-outline-primary" id="login" href="#">
    <span class="fa fa-sign-in fa-lg"></span> Log In
  </a>
</div>
<div class="pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center">
  <h1 class="display-4">Pricing</h1>
  <p class="lead">Quickly build an effective pricing table for your potential customers with this Bootstrap example. It's built with default Bootstrap components and utilities with little customization.</p>
</div>

<div id="loginModal" class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Log In</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group row">
            <label for="inputEmail" class="col-sm-2 col-form-label">Email</label>
            <div class="col-sm-10">
              <input type="email" class="form-control" id="inputEmail" value="email@example.com">
            </div>
          </div>
          <div class="form-group row">
            <label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
            <div class="col-sm-10">
              <input type="password" class="form-control" id="inputPassword" placeholder="Password">
            </div>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">Log In</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>