javascript - 我尝试使用 Bootstrap 模式类制作弹出式注册表单，但弹出式窗口不起作用

Question

我尝试使用 bootstrap 模态类制作弹出式注册表单，当我按下注册按钮窗口时，它会淡出并重新加载就是这样。弹出窗口不起作用。我正在使用 Bootstrap 3.3.6。请帮忙。

这是注册按钮代码:

<form class="navbar-form navbar-right">
  <button type="submit" class="btn btn-default navbar-btn sign" data-toggle="modal" data-target="#signupForm">Sign up</button>
</form>

我在导航中使用注册按钮 (navbar-inverse)。

这是弹出表单代码:

<div class="modal fade" id="signupForm" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="">
          <span>&times;</span>
        </button>
        <h4 class="modal-title">Sign Up</h4>
      </div>

      <div class="modal-body">
        <form class="form-horizontal">
          <div class="form-group">
            <label class="col-md-4 col-md-offset-1">User Name :</label>
            <div class="col-md-5">
              <input type="text" class="form-control input-sm">
            </div>
          </div>

          <div class="form-group">
            <label class="col-md-4 col-md-offset-1">Email :</label>
            <div class="col-md-5">
              <input type="email" class="form-control input-sm">
            </div>
          </div>

          <div class="form-group">
            <label class="col-md-4 col-md-offset-1">Password :</label>
            <div class="col-md-5">
              <input type="password" class="form-control input-sm">
            </div>
          </div>

          <div class="form-group">
            <label class="col-md-4 col-md-offset-1">Confirm Password :</label>
            <div class="col-md-5">
              <input type="password" class="form-control input-sm">
            </div>
          </div>

          <div class="form-group">
            <div class="col-md-2 col-md-offset-8">
              <input type="submit" class="btn btn-success" value="submit">
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

我在注册按钮代码下面编写了这个弹出表单代码，这意味着它在导航栏内

Answer 1

请检查:

我创建了一个 JS Fiddle，它在这里运行良好。

   ----  https://jsfiddle.net/DTcHh/19115/

您必须将 Bootstrap js 和 css 文件包含到您的元素中才能使其正常工作。