Простой модал не покажет - PullRequest
Новая
       11

Простой модал не покажет

0 голосов
/ 25 сентября 2018

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

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>

Ответы [ 2 ]

0 голосов
/ 25 сентября 2018

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

Просто для справки, вы можете использовать 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 ПЕРЕД ссылкой на boostrap.JS!

РЕДАКТИРОВАТЬ

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

0 голосов
/ 25 сентября 2018

Ваша проблема в ссылках на бутстрап.Посмотрите на этот пример. 

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