Bootstrap 4模式淡入淡出屏幕,但不显示

时间:2019-05-17 12:29:44

标签: bootstrap-4 bootstrap-modal

我有两个从导航栏打开的模式。设置模式工作得很好,另一个从“ +”符号(#quick-add-task-modal)打开的模式只会使屏幕褪色,而不会显示。我看过一百万遍代码,看不到它们之间有什么区别。似乎是相同的机制,我从Bootstrap 4文档中复制了它,只更改了内容。

<!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">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <link rel="stylesheet" href="styles/styles.css">


</head>

<body>

    <!-- Navbar -->


    <nav class="navbar navbar-expand-sm navbar-dark bg-dark">
        <div class="col-3">
        </div>

        <img src="images/tomato.png" alt="Tomato icon" id="tomatoIcon">
        <a class="navbar-brand" href="#">Koroko</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggler"
            aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarToggler">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item mx-2">                   
                    <a class="nav-link" data-toggle="modal" data-target="#quick-add-task-modal">+</a>
                </li>

                <li class="nav-item mx-2">
                    <a class="nav-link align-top" data-toggle="modal" data-target="#settingsModal">Settings</a>
                </li>
                <li class="nav-item mx-2">
                    <a class="nav-link" href="#">About</a>
                </li>
            </ul>
        </div>

        <div class="col-3">
        </div>
    </nav>

    <div class="container">
        <div class="row mt-5">
          <div class="col-sm-4" id="inbox">
                <i class="fas fa-inbox mx-2"></i>                
                <span id="inbox-text">Inbox</span>
                <span id="inbox-number-of-items"</span>
          </div>
          <div class="col-sm-8">
                div id content placeholder
          </div>         
        </div>

        <div class="row mt-3">
            <div class="col sm-4">
                <i class="fas fa-calendar-alt mx-2"></i>
                <span>Today</span>
            </div>
            <div class="col-sm-8">
                div id content placeholder
            </div>  
        </div>
    </div>


    <div class="mainDiv d-flex lemonChiffon flex-column">
        <div class="container-fluid" id="timer">
            <div class="justify-content-center text-center">
                <div class="col-12">
                    <button type="button" class="btn btn-success" id="timerButton">
                        <span id="minutes">25</span>
                        <span id="colon">:</span>
                        <span id="seconds">00</span>
                        <i class="fa fa-play" aria-hidden="false" id="fa-play"> </i>
                        <i class="fa fa-pause" aria-hidden="false" id="fa-pause"> </i>
                    </button>                     
                </div>
            </div>
            <div class="justify-content-center text-center">
                <div class="col-12">
                    <span id="nextBreak">Next break is a <span class="bold">short break</span></span>
                </div>
            </div>
        </div>
    </div>

    <!-- Settings Modal -->
    <div class="modal fade" id="settingsModal" tabindex="-1" role="dialog" aria-labelledby="settingsModal"
        aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="settingsModal">Settings</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="container-fluid">
                        <div class="d-flex flex-column p-2">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" value="" id="alertsCheckbox">
                                <label class="form-check-label" for="alertsCheckbox">
                                    Enable browser alerts
                                </label>
                            </div> <!-- INLINE STYLING. NOT RECOMMENDED. LOOK FOR ALTERNATIVES. -->
                            <div style="font-size: 0.8em;" class="pl-4 mb-3">Display browser alert when pomodoro/break
                                is over</div>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" value="" id="disableSoundCheckbox">
                                <label class="form-check-label" for="disableSoundCheckbox">
                                    Disable sound
                                </label>
                            </div>
                            <div class="mt-3 font-weight-bold mx-auto">Set custom times<span class="font-weight-normal">
                                    (in minutes) </span>
                            </div>

                        </div>

                        <form>
                            <div class="form-row">
                                <div class="form-group col-md-4">
                                    <label for="inputPomodoro">Pomodoro</label>
                                    <input type="number" min="1" max="90" class="form-control" id="inputPomodoro"
                                        placeholder="25">
                                </div>
                                <div class="form-group col-md-4">
                                    <label for="inputShortBreak">Short break</label>
                                    <input type="number" min="1" max="90" class="form-control" id="inputShortBreak"
                                        placeholder="5">
                                </div>
                                <div class="form-group col-md-4">
                                    <label for="inputLongBreak">Long break</label>
                                    <input type="number" min="1" max="90" class="form-control" id="inputLongBreak"
                                        placeholder="15">
                                </div>
                            </div>

                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal"
                                    id="closeModal">Save</button>
                                <button type="button" class="btn btn-primary" id="resetButton">Reset to default</button>
                            </div>
                    </div>
                </div>
            </div>
    </div>


    <!-- Quick Add Task Modal -->
    <div class="modal fade" id="quick-add-task-modal" tabindex="-1" role="dialog" aria-labelledby="quick-add-task-modal"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="quick-add-task-modal">Quick add task</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    MODAL BODY GOES HERE
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>



        <script defer src="https://use.fontawesome.com/releases/v5.0.0/js/all.js"></script>

        <--Bootstrap stuff -->
            <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
                integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
                crossorigin="anonymous"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
                integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
                crossorigin="anonymous"></script>
            <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
                integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
                crossorigin="anonymous"></script>

            <script src="https://cdn.rawgit.com/alertifyjs/alertify.js/v1.0.10/dist/js/alertify.js"></script>         


            <script src="./scripts/bundle.js"></script>

    </body> 

    </html>

1 个答案:

答案 0 :(得分:1)

一个愚蠢的错误,您错过了一个关闭div标签。在</div>

上方插入<!-- Quick Add Task Modal -->

此处更新了代码。

  <!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">

      <!-- Bootstrap CSS -->
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

      <link rel="stylesheet" href="styles/styles.css">


  </head>

  <body>

      <!-- Navbar -->


      <nav class="navbar navbar-expand-sm navbar-dark bg-dark">
          <div class="col-3">
          </div>

          <img src="images/tomato.png" alt="Tomato icon" id="tomatoIcon">
          <a class="navbar-brand" href="#">Koroko</a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggler"
              aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
          </button>

          <div class="collapse navbar-collapse" id="navbarToggler">
              <ul class="navbar-nav ml-auto">
                  <li class="nav-item mx-2">                   
                      <a class="nav-link" data-toggle="modal" data-target="#quick-add-task-modal">+</a>
                  </li>

                  <li class="nav-item mx-2">
                      <a class="nav-link align-top" data-toggle="modal" data-target="#settingsModal">Settings</a>
                  </li>
                  <li class="nav-item mx-2">
                      <a class="nav-link" href="#">About</a>
                  </li>
              </ul>
          </div>

          <div class="col-3">
          </div>
      </nav>

      <div class="container">
          <div class="row mt-5">
            <div class="col-sm-4" id="inbox">
                  <i class="fas fa-inbox mx-2"></i>                
                  <span id="inbox-text">Inbox</span>
                  <span id="inbox-number-of-items"</span>
            </div>
            <div class="col-sm-8">
                  div id content placeholder
            </div>         
          </div>

          <div class="row mt-3">
              <div class="col sm-4">
                  <i class="fas fa-calendar-alt mx-2"></i>
                  <span>Today</span>
              </div>
              <div class="col-sm-8">
                  div id content placeholder
              </div>  
          </div>
      </div>


      <div class="mainDiv d-flex lemonChiffon flex-column">
          <div class="container-fluid" id="timer">
              <div class="justify-content-center text-center">
                  <div class="col-12">
                      <button type="button" class="btn btn-success" id="timerButton">
                          <span id="minutes">25</span>
                          <span id="colon">:</span>
                          <span id="seconds">00</span>
                          <i class="fa fa-play" aria-hidden="false" id="fa-play"> </i>
                          <i class="fa fa-pause" aria-hidden="false" id="fa-pause"> </i>
                      </button>                     
                  </div>
              </div>
              <div class="justify-content-center text-center">
                  <div class="col-12">
                      <span id="nextBreak">Next break is a <span class="bold">short break</span></span>
                  </div>
              </div>
          </div>
      </div>

      <!-- Settings Modal -->
      <div class="modal fade" id="settingsModal" tabindex="-1" role="dialog" aria-labelledby="settingsModal"
          aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered" role="document">
              <div class="modal-content">
                  <div class="modal-header">
                      <h5 class="modal-title" id="settingsModal">Settings</h5>
                      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                      </button>
                  </div>
                  <div class="modal-body">
                      <div class="container-fluid">
                          <div class="d-flex flex-column p-2">
                              <div class="form-check">
                                  <input class="form-check-input" type="checkbox" value="" id="alertsCheckbox">
                                  <label class="form-check-label" for="alertsCheckbox">
                                      Enable browser alerts
                                  </label>
                              </div> <!-- INLINE STYLING. NOT RECOMMENDED. LOOK FOR ALTERNATIVES. -->
                              <div style="font-size: 0.8em;" class="pl-4 mb-3">Display browser alert when pomodoro/break
                                  is over</div>
                              <div class="form-check">
                                  <input class="form-check-input" type="checkbox" value="" id="disableSoundCheckbox">
                                  <label class="form-check-label" for="disableSoundCheckbox">
                                      Disable sound
                                  </label>
                              </div>
                              <div class="mt-3 font-weight-bold mx-auto">Set custom times<span class="font-weight-normal">
                                      (in minutes) </span>
                              </div>

                          </div>

                          <form>
                              <div class="form-row">
                                  <div class="form-group col-md-4">
                                      <label for="inputPomodoro">Pomodoro</label>
                                      <input type="number" min="1" max="90" class="form-control" id="inputPomodoro"
                                          placeholder="25">
                                  </div>
                                  <div class="form-group col-md-4">
                                      <label for="inputShortBreak">Short break</label>
                                      <input type="number" min="1" max="90" class="form-control" id="inputShortBreak"
                                          placeholder="5">
                                  </div>
                                  <div class="form-group col-md-4">
                                      <label for="inputLongBreak">Long break</label>
                                      <input type="number" min="1" max="90" class="form-control" id="inputLongBreak"
                                          placeholder="15">
                                  </div>
                              </div>

                              <div class="modal-footer">
                                  <button type="button" class="btn btn-secondary" data-dismiss="modal"
                                      id="closeModal">Save</button>
                                  <button type="button" class="btn btn-primary" id="resetButton">Reset to default</button>
                              </div>
                      </div>
                  </div>
              </div>
      </div>
    </div>

      <!-- Quick Add Task Modal -->
      <div class="modal fade" id="quick-add-task-modal" tabindex="-1" role="dialog" aria-labelledby="quick-add-task-modal"
          aria-hidden="true">
          <div class="modal-dialog" role="document">
              <div class="modal-content">
                  <div class="modal-header">
                      <h5 class="modal-title" id="quick-add-task-modal">Quick add task</h5>
                      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                      </button>
                  </div>
                  <div class="modal-body">
                      MODAL BODY GOES HERE
                  </div>
                  <div class="modal-footer">
                      <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                      <button type="button" class="btn btn-primary">Save changes</button>
                  </div>
              </div>
          </div>
      </div>



          <script defer src="https://use.fontawesome.com/releases/v5.0.0/js/all.js"></script>

              <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
                  integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
                  crossorigin="anonymous"></script>
              <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
                  integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
                  crossorigin="anonymous"></script>
              <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
                  integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
                  crossorigin="anonymous"></script>

              <script src="https://cdn.rawgit.com/alertifyjs/alertify.js/v1.0.10/dist/js/alertify.js"></script>         


              <script src="./scripts/bundle.js"></script>

      </body> 

      </html>