Блог

Главная - Вопросы по программированию - Bootstrap / jQuery: не удается получить модальный для отображения

Bootstrap / jQuery: не удается получить модальный для отображения

#javascript #jquery #twitter-bootstrap #bootstrap-modal

#javascript #jquery #twitter-bootstrap #bootstrap-модальный

Вопрос:

Хорошо, итак, я ненавижу быть тем парнем, который публикует вопрос о домашнем задании, но я дошел до конца.

Мне нужен модальный параметр для обращения всякий раз, когда я нажимаю кнопку.

Я пытался:

  • Способ отображения модального файла в формате data-* (как показано в коде ниже)
  • Отображение модального через функцию JS с использованием $(#mainModal).modal('show')
  • Закомментируйте версию jQuery, чтобы она не конфликтовала с jQuery Bootstrap.

Похоже, в Интернете ничего не работает. Не мог бы кто-нибудь подсказать мне, как заставить modal отображаться?

Большое вам спасибо!

 <!DOCTYPE html>
<html lang="en">

   <head>
        <meta charset="UTF-8">
        <title>Chatty</title>

        <!-- Styles -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

        <style>

        body { 
            background-color: #333333;
            padding-top:50px;
        }

        h1 {
            color: white;
        }

        body, h1 {
            padding-bottom: 50px;
        }

        .button-spacing {
            margin-bottom: 50px;
        }

        </style>


        <script>

        </script>

   </head>

   <body class="container">

        <h1 class="text-center">Chatty App</h1>

        <button type="button" class="btn btn-success btn-lg button-spacing col-lg-6 col-lg-offset-3 col-md-8 col-md-offset-2 col-sm-8 col-sm-offset-2" data-toggle="modal" data-target="#mainModal">Post New Tweet</button>

        <!-- Modal -->
        <div id="mainModal" class="modal fade" role="dialog">
          <div class="modal-dialog">

            <!-- Modal content-->
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">amp;times;</button>
                <h4 class="modal-title">Modal Header</h4>
              </div>
              <div class="modal-body">
                <p>Some text in the modal.</p>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              </div>
            </div>

          </div>
        </div>
        </div>

   </body>

</html>

Комментарии:

1. Вы не загружаете файл bootstrap javascript. Это требуется для модалов

2. Какие-либо ошибки на консоли?

3. Не должно отображаться никаких ошибок. Файл Javascript загружен не так, как сказал @Turnip

4. @Turnip вот и все. (facepalm) Спасибо за вашу помощь!

Ответ №1:

Вы не загружаете файл Javascript.

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- missing this line -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js">

Комментарии:

1. Спасибо, это именно то, что @Turnip сказал выше.

Ответ №2:

 <!DOCTYPE html>
<html lang="en">

   <head>
        <meta charset="UTF-8">
        <title>Chatty</title>

        <!-- Styles -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <style>

        body { 
            background-color: #333333;
            padding-top:50px;
        }

        h1 {
            color: white;
        }

        body, h1 {
            padding-bottom: 50px;
        }

        .button-spacing {
            margin-bottom: 50px;
        }

        </style>


        <script>

        </script>

   </head>

   <body class="container">

        <h1 class="text-center">Chatty App</h1>

        <button type="button" class="btn btn-success btn-lg button-spacing col-lg-6 col-lg-offset-3 col-md-8 col-md-offset-2 col-sm-8 col-sm-offset-2" data-toggle="modal" data-target="#mainModal">Post New Tweet</button>

        <!-- Modal -->
        <div id="mainModal" class="modal fade" role="dialog">
          <div class="modal-dialog">

            <!-- Modal content-->
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">amp;times;</button>
                <h4 class="modal-title">Modal Header</h4>
              </div>
              <div class="modal-body">
                <p>Some text in the modal.</p>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              </div>
            </div>

          </div>
        </div>
        </div>

   </body>

</html>