Не работает JS в bootstrap на модальное окно

263

01 апреля 2018, 18:42

Я вставил все ссылки для JS и Jquery ,но всё ровно не работает. При нажатие на support вылезает модальное окно и чтобы если человек нажимает вне модального окна оно не закрывалось.

<!DOCTYPE html> 
<html lang="en"> 
 
<head> 
  <meta charset="UTF-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <title>Учу bootstrap</title> 
  <link rel="stylesheet" type="text/css" href="123.css" /> 
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> 
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> 
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> 
  <script> 
    $('#exampleModal').modal({ 
      backdrop: "static" 
    }) 
  </script> 
</head> 
 
<body> 
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> 
    <a href="#" class="navbar-brand"> 
      <img src="img/english.png" width="80" height="40" alt="logo" title="Home"> 
    </a> 
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportContent" aria-controls="navbarSupportContent" aria-expend="false" aria-label="ToggleNavigation"> 
      	<span class="navbar-toggler-icon"></span> 
      </button> 
 
    <div class="collapse navbar-collapse" id="navbarSupportContent"> 
      <ul class="navbar-nav mr-auto"> 
        <li class="nav-item active"> 
          <a href="#" class="nav-link" id="bd">Present</a> 
        </li> 
        <li class="nav-item active"> 
          <a href="#" class="nav-link" id="bd">Past</a> 
        </li> 
        <li class="nav-item active"> 
          <a href="#" class="nav-link" id="bd">Can, will</a> 
        </li> 
        <li class="nav-item active"> 
          <a href="#" class="nav-link" id="bd" data-toggle="modal" data-target="#exampleModal">Support</a> 
        </li> 
      </ul> 
      <form class="form-inline my-2 my-lg-0"> 
        <input type="text" class="form-control mr-sm-2" placeholder="Search" aria-label="Search"> 
        <button class="btn btn-outline-success my-2 my-sm-0">Search</button> 
      </form> 
    </div> 
  </nav> 
 
  <div class="container-fluid p-0"> 
    <div id="carouselHome" class="carousel slide" data-ride="carousel"> 
      <ol class="carousel-indicators"> 
        <li class="active" data-target="carouselHome" data-slide-to="0"></li> 
        <li class="active" data-target="carouselHome" data-slide-to="2"></li> 
        <li class="active" data-target="carouselHome" data-slide-to="3"></li> 
        <li class="active" data-target="carouselHome" data-slide-to="4"></li> 
      </ol> 
      <div class="carousel-inner"> 
        <div class="carousel-item active"> 
          <img src="img/city1.jpg" alt="" class="d-block w-100"> 
        </div> 
        <div class="carousel-item"> 
          <img src="img/city2.jpg" alt="" class="d-block w-100"> 
        </div> 
        <div class="carousel-item"> 
          <img src="img/city3.jpg" alt="" class="d-block w-100"> 
        </div> 
        <div class="carousel-item"> 
          <img src="img/city4.jpg" alt="" class="d-block w-100"> 
        </div> 
      </div> 
      <a href="#carouselHome" class="carousel-control-prev" role="button" data-slide="prev"> 
        <span class="carousel-control-prev-icon" aria-hidden="true"></span> 
        <span class="sr-only">Previous</span> 
      </a> 
      <a href="#carouselHome" class="carousel-control-next" role="button" data-slide="next"> 
        <span class="carousel-control-next-icon" aria-hidden="true"></span> 
        <span class="sr-only">Next</span> 
      </a> 
    </div> 
  </div> 
 
  <div class="container-fluid"> 
    <div class="cntainer"> 
      <div class="row text-center"> 
        <div class="col"> 
          <a href="#"><img src="img/1.png" alt="" class="w-25"></a> 
        </div> 
        <div class="col"> 
          <a href="#"><img src="img/2.png" alt="" class="w-25"></a> 
        </div> 
        <div class="col"> 
          <a href="#"><img src="img/3.png" alt="" class="w-25"></a> 
        </div> 
      </div> 
    </div> 
  </div> 
 
  <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModal" aria-hidden="true"> 
    <div class="modal-dialog" role="document"> 
      <div class="modal-content"> 
        <div class="modal-header"> 
          <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> 
          <button class="close" type="button" data-dismiss="modal" aria-label="close"> 
          <span aria-hidden="true">&times;</span> 
         </button> 
        </div> 
        <div class="modal-body"> 
          <p>Hello world</p> 
        </div> 
        <div class="modal-footer"> 
          <button class="btn btn-secondary" data-dismiss="modal">Close</button> 
          <button class="btn btn-primary">Save</button> 
        </div> 
      </div> 
    </div> 
  </div> 
 
</body> 
 
</html>

Answer 1

Что бы модальное окно не закрывалось при нажатии вне его области, нужно добавить атрибут data-backdrop="static" на кнопку вызова модального окна:

<a href="#" class="nav-link" id="bd" data-toggle="modal" data-target="#exampleModal" data-backdrop="static">Support</a>

Либо вызывать модальное окно через js с уже явно указанными параметрами:

$('#exampleModal').modal({
    backdrop: 'static'
});

В Вашем примере вызов модального окна не сработает по тому что, сам элемент #exampleModal во время выполнения скрипта еще не создан. Нужно переместить код в низ страницы или использовать обвертку $(document).ready():

$(document).ready(function() {
    $('#exampleModal').modal({
        backdrop: 'static'
    });
});

Больше об управлении модальными окнами в документации (v4.0)

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

jQuery AJAX и History API

Есть код, который при помощи AJAX подгружает в нужный тег данные со страницыКак сделать, чтобы работали кнопки вперед / назад в браузере?

225

HTML

Фильтр данных в таблице при заданном условии [требует правки]

Здравствуйте, прошу помочь реализовать идею живой фильтрации данныхЕсть таблица с числовыми данными, необходимо отображать только те tr, которые...

194

HTML

IE и Microsoft Edge не читают скрипты

Добрый день! Есть следующий скрипт:

306

HTML

Подсветка синтаксиса для Java через HTML

Сам код работает, но не работает с EditText:

238