Variierender modaler Inhalt basierend auf Auslöserknopf

Ich verwende http://getbootstrap.com/javascript/#modals-related-target, wenn ich jedoch den Code in meinem eigenen Projekt verwende, funktioniert die Funktion nicht. Ich bin sehr neu, also ist es wahrscheinlich etwas Einfaches.Variierender modaler Inhalt basierend auf Auslöserknopf

Hier ist mein Code: http://hastebin.com/comikucidi.xml

Danke.

Edit: Erstellt gerade ein neues Dokument und kopierte die Bootstrap-Seite. Die Funktion noch nicht funktioniert

<!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>

Quelle

2016-11-06 DanSpedey

Bitte fügen Sie Ihren Code auch in die Post, Leute wie das hier und Sie werden mehr Chancen haben, Hilfe zu bekommen. – GillesC

Ich habe es versucht, aber das Format aus irgendeinem Grund vermasselt. – DanSpedey

Sie versuchen, die Prozedur zu einem nicht vorhandenen ID zu befestigen, versuchen Sie die ID Ihres modalen zu verwenden:

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

statt von .

EDIT:

Sie sollten auch

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

um den Code hinzuzufügen, der Handler zu befestigen, nachdem das Element ordnungsgemäß erstellt wird.

Quelle

2016-11-06 16:32:43 Doomshine

Ah ja, aber es hat das Problem immer noch nicht behoben. – DanSpedey

Ich habe es mit einer anderen Sache bearbeitet, die du testen könntest;) – Doomshine

habe gerade so gearbeitet, wie du gepostet hast, danke :) – DanSpedey

das Skript am Ende der jQuery-Bibliothek Anrufe Dieser mag:

jQuery (notwendig für die Bootstrap-JavaScript-Plugins) [hier]

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

Wenn Sie dies tun, es funktioniert!

Quelle

2017-06-26 19:54:52

Variierender modaler Inhalt basierend auf Auslöserknopf

Antwort

Verwandte Themen