基於觸發按鈕改變模態內容

但是，我使用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

你試圖處理程序連接到一個不存在的id，嘗試使用模式的ID：

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

代替#exampleModal。

編輯：

您還應該添加

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

在你的代碼，附上您的處理程序是正確創建的元素之後。

來源

2016-11-06 16:32:43 Doomshine

啊，是的，但它仍然沒有解決這個問題。 – DanSpedey

我用另外一個可以測試的東西編輯它;） – Doomshine

剛發佈的時候就已經發布了，謝謝:) – DanSpedey

把腳本在jQuery庫調用結束時喜歡這樣的：

的jQuery（必要引導的JavaScript插件） [這裏]

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

如果你這樣做，它的作品！

來源

2017-06-26 19:54:52

基於觸發按鈕改變模態內容

回答

相關問題