Изменение модального контента на основе кнопки запуска

Я использую http://getbootstrap.com/javascript/#modals-related-target, однако, когда я использую код в своем собственном проекте, функция не работает. Я очень новичок в этом, поэтому, возможно, это нечто простое.Изменение модального контента на основе кнопки запуска

Вот мой код: http://hastebin.com/comikucidi.xml

Спасибо.

Редактировать: Только что создал совершенно новый документ и скопировал страницу начальной загрузки. Функция по-прежнему не работает

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
<meta charset="utf-8"> 
 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<title>Bootstrap - Prebuilt Layout</title> 
 

 
<!-- Bootstrap --> 
 
<link href="css/bootstrap.css" rel="stylesheet"> 
 

 
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 
 
<!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
 
<!--[if lt IE 9]> 
 
     <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> 
 
     <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
 
    <![endif]--> 
 
</head> 
 
<body> 
 
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button> 
 
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button> 
 
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button> 
 
...more buttons... 
 

 
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"> 
 
    <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="exampleModalLabel">New message</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <form> 
 
      <div class="form-group"> 
 
      <label for="recipient-name" class="control-label">Recipient:</label> 
 
      <input type="text" class="form-control" id="recipient-name"> 
 
      </div> 
 
      <div class="form-group"> 
 
      <label for="message-text" class="control-label">Message:</label> 
 
      <textarea class="form-control" id="message-text"></textarea> 
 
      </div> 
 
     </form> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     <button type="button" class="btn btn-primary">Send message</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 
<script> 
 
$('#exampleModal').on('show.bs.modal', function (event) { 
 
    var button = $(event.relatedTarget) // Button that triggered the modal 
 
    var recipient = button.data('whatever') // Extract info from data-* attributes 
 
    // If necessary, you could initiate an AJAX request here (and then do the updating in a callback). 
 
    // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead. 
 
    var modal = $(this) 
 
    modal.find('.modal-title').text('New message to ' + recipient) 
 
    modal.find('.modal-body input').val(recipient) 
 
}) 
 
</script> 
 
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
 
<script src="js/jquery-1.11.3.min.js"></script> 
 

 
<!-- Include all compiled plugins (below), or include individual files as needed --> 
 
<script src="js/bootstrap.js"></script> 
 
</body> 
 
</html>

источник

2016-11-06 DanSpedey

Пожалуйста, добавьте свой код в сообщение тоже, такие люди здесь, и у вас будет больше шансов получить помощь. – GillesC

Я попытался, но формат по какой-то причине испортился. – DanSpedey

Вы пытаетесь прикрепить обработчик к несуществующему идентификатору, попробуйте использовать идентификатор вашего модальный:

$('#delete').on('show.bs.modal',

вместо от #exampleModal.

EDIT:

Вы должны также добавить

$(document).ready(function() { 
    //your code here 
});

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

источник

2016-11-06 16:32:43 Doomshine

Ах да, однако это все еще не решило проблему. – DanSpedey

Я отредактировал его с другой вещью, которую вы могли проверить;) – Doomshine

Просто сработал, как вы писали, спасибо :) – DanSpedey

Поместите сценарий в конце JQuery библиотеки вызовов любит это:

JQuery (необходимые для плагинов JavaScript Bootstrap в) [здесь]

$('#exampleModal').on('show.bs.modal', function (event) {...}

Если вы это сделаете, это работает!

источник

2017-06-26 19:54:52

Изменение модального контента на основе кнопки запуска

ответ

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