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

Codepen в https://codepen.io/anon/pen/Pdrvoa

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Test Webpage</title>
  <link href='bootstrap.min.css' rel='stylesheet' type='text/css' />
  <script href='bootstrap.min.js' type='text/javascript'></script>
</head>
<body>
  <div class='container'>
    <div class='row'>
      <div class='col-md-12'>
        <!-- Button trigger modal -->
      <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
        Launch demo modal
      </button>
      </div>
    </div>
  </div>
  <!-- Modal -->
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="myModalLabel">Modal title</h4>
        </div>
        <div class="modal-body">
          ...
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
0
CRushER16 25 Сен 2018 в 23:16

2 ответа

Лучший ответ

Ваша проблема - это ссылки на bootstrap. Взгляните на тот пример.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Test Webpage</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
  <div class='container'>
    <div class='row'>
      <div class='col-md-12'>
        <!-- Button trigger modal -->
      <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
        Launch demo modal
      </button>
      </div>
    </div>
  </div>
  <!-- Modal -->
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="myModalLabel">Modal title</h4>
        </div>
        <div class="modal-body">
          ...
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
2
Leo Rossetti 25 Сен 2018 в 20:25

Я бы проверил расположение ваших файлов JS / CSS. Похоже, у вас там крутой путь; убедитесь, что вы указываете на правильную папку или используете обновленный компакт-диск (я считаю, что в примерах на их веб-сайте используются компакт-диски).

Для справки вы можете использовать https: //maxcdn.bootstrapcdn .com / bootstrap / 3.3.7 / css / bootstrap.min.css для таблицы стилей. и https://maxcdn.bootstrapcdn.com/bootstrap/3.3 .7 / js / bootstrap.min.js для javascript. Также убедитесь, что у вас есть ссылка на jQuery (https://code.jquery.com/) как это необходимо для большинства функций javascript начальной загрузки.

Примечание. Не забудьте добавить ссылку на jQuery ПЕРЕД ссылкой на bootstrap.js!

< Сильный > ИЗМЕНИТЬ

Я вижу, что Лео Россетти просто опередил меня, используйте его пример, поскольку он, кажется, работает.

0
broccoli_rob 25 Сен 2018 в 20:31