Никаких действий при нажатии на Bootstrap popup

Мне нужно реализовать всплывающее окно при нажатии одной ссылки. Мой HTML Фрагмент кода:Никаких действий при нажатии на Bootstrap popup

<head> 
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
    <script type="text/javascript" src="/stylesheets/script.js"></script> 
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 
    <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> 
    <script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

    <link rel='stylesheet' href='/stylesheets/bootstrap-theme.css' /> 
    <link rel='stylesheet' href='/stylesheets/bootstrap-theme.min.css' /> 
    <link rel='stylesheet' href='/stylesheets/bootstrap.css' /> 
    <link rel='stylesheet' href='/stylesheets/bootstrap.min.css' /> 
</head> 

    <body style="overflow-x:hidden"> 
<!--Header--> 
<div id = "header"> 
    <div class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="/kanbannew">Welcome</a> 
    </div> 
    <div class="navbar-collapse collapse"> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><a href="#" data-toggle="modal" data-target="#myModal" data-whatever="Add Card">Add Card</a></li> 
     <li><a href="KanbanprojectStatus">Project Status</a></li> 
     <li><a href="index">Logout</a></li> 
     </ul> 
    </div><!--/.nav-collapse --> 
    </div> 
</div>

<div id="myModal" class="modal fade"> 
<div class="modal-dialog"> 
    <div class="modal-content"> 
    <div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
    <h4 class="modal-title">Modal title</h4> 
    </div> 
    <div class="modal-body"> 
    <p>One fine body…</p> 
    </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><!-- /.modal-content --> 
</div><!-- /.modal-dialog --> 
</div><!-- /.modal --> 
<script> 
    $('#myModal').on('show.bs.modal', function (event) { 
    var li = $(event.relatedTarget) // Button that triggered the modal 
var recipient = li.data('whatever') // Extract info from data-* attributes 
var modal = $(this) 
modal.find('.modal-title').text(recipient) 
    }) 
    </script> 
</body>

Нажатие кнопки «Добавить карту» кнопку в заголовке, я хочу, чтобы показать всплывающее где пользователь может ввести некоторые название и описание и представить то же самое , Но этот образец модальности даже не открывается. Любой совет? Благодарю.

источник

2015-04-29 Katie

я не вижу ваш загрузочный файл CSS – shadab

Добавлено, еще не повезло, нажмите здесь. – Katie

Ваш data-target="#myModal" имеет в виду <div>, который должен иметь id='myModal'

Таким образом изменить эту строку

<div class="modal fade">

<div id="myModal" class="modal fade">

и он должен работать.

Примечание: Вам не хватает bootstrap.css.

Update:

вы должны загрузить jQuery первым. Удалите scripts и links и загрузить его таким образом:

<link rel='stylesheet' href='/stylesheets/bootstrap.min.css' /> 
<link rel='stylesheet' href='/stylesheets/bootstrap-theme.css' /> 
<link rel='stylesheet' href='/stylesheets/bootstrap-theme.min.css' /> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> 
</script> 
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script> 
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"> 
</script> 
<script type="text/javascript" src="/stylesheets/script.js"></script>

источник

2015-04-29 07:26:13 Zee

Я пробовал это и все еще его не работает Обновлен вопрос с id = "myModel". Благодарю. – Katie

@ Katie. Я проверил ваш код http://www.bootply.com/new, и он отлично работает. Любые ошибки в консоли? – Zee

Да, это работает для меня тоже в bootply.com. Я не могу определить, почему он не работает на моем местном. Я не вижу ошибок в консоли. Не могли бы вы рассказать мне, нужны ли css, js и jQuery, чтобы сделать модальную работу? или я чего-то не хватает? Благодарю. – Katie

Следуйте по этой схеме. Ваша таблица стилей всегда должна быть выше вашего JS-скрипта. Это хорошая практика и правильный способ разместить таблицу стилей в разделе главы. Основной файл JQuery всегда должен быть первым JS-файлом, который загружается при вызове страницы, который связывает все остальные JS-файлы. Попробуйте эти файлы аналогичным образом и удалите все остальные файлы head сейчас. например http://www.bootply.com/Zdq6rSSvUs

<link rel='stylesheet' href='/stylesheets/bootstrap.min.css' /> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

источник

2015-04-29 07:27:19 shadab

Это не помогло. Все еще не работает. – Katie

Я обновил свой ответ. Пожалуйста, взгляните на это. – shadab

Я пробовал, как упоминал Сураб, и это сработало. Спасибо за ваш комментарий. – Katie

Никаких действий при нажатии на Bootstrap popup

ответ

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