анкерный клик не открывает мода

-6

Вот как у меня есть привязанный тег.анкерный клик не открывает мода

<a href="#" data-toggle="modal" data-target="#modalTC">terms and conditions</a>

Мой модальный выглядит ниже

<!-- Modal --> 
<div class="modal fade" id="modalTC" role="dialog"> 
    <div class="modal-dialog"> 
    <!-- Modal content--> 
    <div class="modal-content"> 
    <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal">&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>

Fiddle.

Я не уверен, что случилось. PS: У меня есть связанные файлы со мной. то есть. Bootstrap и JQuery.

источник

2017-02-20 Suraj

Проверка 1: 'JQuery.(мин.) js' & 'bootstrap. (мин.) js' оба загружены в этом порядке. Проверьте 2: Можете ли вы воспроизвести проблему в скрипке? Проверка 3: Если у вас нет проблем с каким-либо другим скриптом на вашей странице, который привязан к клику и либо отменяет событие, либо возвращает false до того, как он получит событие bootstrap.js. –

Вы проверили консоль? – rahulsm

Я нашел вашу проблему, и вы забыли ссылаться на Jquery Js на своей странице. Оформить заказ на свою консоль –

Убедитесь, что вы звоните bootstrap.min.js после jquery.min.js

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link rel=stylesheet href=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css> 
 

 
<a href="#" data-toggle="modal" data-target="#modalTC">terms and conditions</a> 
 

 

 
<!-- Modal --> 
 
<div class="modal fade" id="modalTC" role="dialog"> 
 
    <div class="modal-dialog"> 
 
    <!-- Modal content--> 
 
    <div class="modal-content"> 
 
    <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal">&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>

источник

2017-02-20 11:36:22

заряжаются Bootstrap Перед JQuery.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<a href="#" data-toggle="modal" data-target="#modalTC">terms and conditions</a> 
 

 

 
<!-- Modal --> 
 
<div class="modal fade" id="modalTC" role="dialog"> 
 
    <div class="modal-dialog"> 
 
    <!-- Modal content--> 
 
    <div class="modal-content"> 
 
    <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal">&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>

источник

2017-02-20 11:36:24 Justinas

Все работает отлично. Попробуйте это:

<a href="#" data-toggle="modal" data-target="#modalTC">terms and conditions</a>

Working Fiddle

Я думаю, что вы забыли добавить JS и CSS.

источник

2017-02-20 11:37:33

Вы должны вызвать JQuery первый (до bootstrap.min.js):

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Working fiddle

Надеется, что это помогает.

источник

2017-02-20 11:38:02 JazZ

Используйте этот код и добавьте три файла bootstrap.min.css, jquery.min.js, bootstrap.min.js локально.

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <title>Bootstrap Example</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <link rel="stylesheet" href="css/bootstrap.min.css"> 
     <script src="js/jquery.min.js"></script> 
     <script src="js/bootstrap.min.js"></script> 
    </head> 
    <body> 
    <div class="container"> 
     <h2>Modal Example</h2> 
     <!-- Trigger the modal with a button --> 
     <a href="#" data-toggle="modal" data-target="#modalTC">terms and conditions</a> 
    <!-- Modal --> 
    <div class="modal fade" id="modalTC" role="dialog"> 
     <div class="modal-dialog"> 
     <!-- Modal content--> 
     <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal">&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>

источник

2017-02-20 11:39:09 KiranPurbey

И добавьте три файла, как я упоминал выше. – KiranPurbey

* «Используйте этот код» * ничего не объясняет – charlietfl

код в порядке. Только проблема может заключаться в том, что вы забудете добавить js и css-файл. Используйте js и css-файл, сохраненный локально. – KiranPurbey

Вы должны включить Jquery файл перед bootstrap.js. здесь вы обновили скрипт: jsfiddle.net/dssoft32/ehmepvya/2/

Структура загрузочного лотка зависит от jquery. Поэтому сначала нужно включить jquery. порядок импорта файлов играет большую роль в java-скрипте.

источник

2017-02-20 11:39:24

попробуйте использовать этот

<a href="#" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Launch demo modal </a>

ИЛИ см это .. https://getbootstrap.com/javascript/#modals

еще одну вещь, чтобы иметь в виду, что вам нужно загрузить JQuery для этого поэтому убедитесь, что вы загрузили его должным образом.

источник

2017-02-20 11:39:40

Вы уверены, что используете bootstrap и jquery? Я просто добавил

<script 
src="https://code.jquery.com/jquery-3.1.1.min.js" 
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" 
crossorigin="anonymous"></script> 
<!-- Latest compiled and minified JavaScript --> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

и работает отлично

источник

2017-02-20 11:43:24

ответ

Смежные вопросы