使用 Bootstrap 包括模态

Question

我正在尝试在单击按钮时向我的网站添加模态弹出窗口，并在模态内容中包含一个表单。但是我无法在输入框中写任何东西。如果我单击输入框，那么模态弹出窗口就会消失。谁能指出问题出在哪里？

<a role="button" class="btn btn-block nav-link btn-warning" data-toggle="modal" data-target="#reserveTable">                        Reserve Table
</a>

<div class="modal fade text-white" tabindex="-1" role="dialog" id="reserveTable">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-header">
      <h4 class="modal-title">Reserve A Table</h4>
      <button type="button" class="close" data-dismiss="modal">
                    &times;
                </button>
    </div>
    <div class="modal-body">

      <form>
        <div class="form-group row">
          <label class="col-sm-3 col-form-label">Number of guests</label>
          <div class="col-sm-9">
            <div class="form-check form-check-inline">
              <input type="radio" class="form-check-input" name="guestnum" id="guestnum1" value="option1">
              <label class="form-check-label" for="guestnum1">1</label>
            </div>
            <div class="form-check form-check-inline">
              <input type="radio" class="form-check-input " name="guestnum" id="guestnum2" value="option2">
              <label class="form-check-label" for="guestnum2">2</label>
            </div>
            <div class="form-check form-check-inline">
              <input type="radio" class="form-check-input" name="guestnum" id="guestnum3" value="option3">
              <label class="form-check-label" for="guestnum3">3</label>
            </div>
            <div class="form-check form-check-inline">
              <input type="radio" class="form-check-input" name="guestnum" id="guestnum4" value="option4">
              <label class="form-check-label" for="guestnum4">4</label>
            </div>
            <div class="form-check form-check-inline">
              <input type="radio" class="form-check-input" name="guestnum" id="guestnum5" value="option5">
              <label class="form-check-label" for="guestnum5">5</label>
            </div>
            <div class="form-check form-check-inline">
              <input type="radio" class="form-check-input" name="guestnum" id="guestnum6" value="option6">
              <label class="form-check-label" for="guestnum6">6</label>
            </div>
          </div>
        </div>
        <div class="form-group row">
          <label class="col-sm-3 col-form-label">Date and Time</label>
          <div class="form-check form-check-inline">
            <input type="date" name="date" class="form-check-input" value="date">
          </div>
          <div class="form-check form-check-inline">
            <input type="time" name="time" class="form-check-input" value="time">
          </div>
        </div>
        <div class="form-group row">
          <div class="col-sm-9 offset-sm-3">
            <button type="submit" class="btn btn-primary">Reserve</button>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

Answer 1

确保您已正确使用所有类和 jquery。您可以参考此示例并相应地工作。

<div class="container">
  <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#form">
    See Modal with Form
  </button>  
</div>

<div class="modal fade" id="form" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header border-bottom-0">
        <h5 class="modal-title" id="exampleModalLabel">Create Account</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <form>
        <div class="modal-body">
          <div class="form-group">
            <label for="email1">Email address</label>
            <input type="email" class="form-control" id="email1" aria-describedby="emailHelp" placeholder="Enter email">
            <small id="emailHelp" class="form-text text-muted">Your information is safe with us.</small>
          </div>
          <div class="form-group">
            <label for="password1">Password</label>
            <input type="password" class="form-control" id="password1" placeholder="Password">
          </div>
          <div class="form-group">
            <label for="password1">Confirm Password</label>
            <input type="password" class="form-control" id="password2" placeholder="Confirm Password">
          </div>
        </div>
        <div class="modal-footer border-top-0 d-flex justify-content-center">
          <button type="submit" class="btn btn-success">Submit</button>
        </div>
      </form>
    </div>
  </div>
</div>