将数据传递给引导模式
我有几个超链接，每个超链接都附有一个ID。 当我点击这个链接时，我想打开一个模式（ http://twitter.github.com/bootstrap/javascript.html#modals ），并将此ID传递给模式。 我在谷歌search，但我找不到任何可以帮助我。
这是代码：
<a data-toggle="modal" data-id="@book.Id" title="Add this item" class="open-AddBookDialog"></a> 应该打开哪个：
<div class="modal hide" id="addBookDialog"> <div class="modal-body"> <input type="hidden" name="bookId" id="bookId" value=""/> </div> </div>
有了这段代码：
$(document).ready(function () { $(".open-AddBookDialog").click(function () { $('#bookId').val($(this).data('id')); $('#addBookDialog').modal('show'); }); });
但是，当我点击超链接时，什么也没有发生。 当我给超链接href =“＃addBookDialog”，模式打开就好，但它不包含任何数据。
我遵循这个例子： 如何将值parameter passing给Bootstrap中的modal.show（）函数
（我也试过这个： 如何在模态对话中设置input值？ ）
我认为你可以使用jQuery的.on事件处理程序来完成这项工作。
这是你可以testing的小提琴。 只要确保尽可能扩展小提琴中的html框架，以便您可以查看模式。
http://jsfiddle.net/Au9tc/605/
HTML
<p>Link 1</p> <a data-toggle="modal" data-id="ISBN564541" title="Add this item" class="open-AddBookDialog btn btn-primary" href="#addBookDialog">test</a> <p> </p> <p>Link 2</p> <a data-toggle="modal" data-id="ISBN-001122" title="Add this item" class="open-AddBookDialog btn btn-primary" href="#addBookDialog">test</a> <div class="modal hide" id="addBookDialog"> <div class="modal-header"> <button class="close" data-dismiss="modal">×</button> <h3>Modal header</h3> </div> <div class="modal-body"> <p>some content</p> <input type="text" name="bookId" id="bookId" value=""/> </div> </div>
JAVASCRIPT
$(document).on("click", ".open-AddBookDialog", function () { var myBookId = $(this).data('id'); $(".modal-body #bookId").val( myBookId ); // As pointed out in comments, // it is superfluous to have to manually call the modal. // $('#addBookDialog').modal('show'); });
如果您使用的是Bootstrap 3.2.0 ，则可以使用更简单的方法。
链接HTML
<a href="#my_modal" data-toggle="modal" data-book-id="my_id_value">Open Modal</a>
模态JavaScript
//triggered when modal is about to be shown $('#my_modal').on('show.bs.modal', function(e) { //get data-id attribute of the clicked element var bookId = $(e.relatedTarget).data('book-id'); //populate the textbox $(e.currentTarget).find('input[name="bookId"]').val(bookId); });
以下是我使用@ mg1075的代码实现它的方式。 我想要一个更通用的代码，以便不必将类分配给模式触发器链接/button：
在Twitter Bootstrap 3.0.3testing。
HTML
<a href="#" data-target="#my_modal" data-toggle="modal" data-id="my_id_value">Open Modal</a>
JAVASCRIPT
$(document).ready(function() { $('a[data-toggle=modal], button[data-toggle=modal]').click(function () { var data_id = ''; if (typeof $(this).data('id') !== 'undefined') { data_id = $(this).data('id'); } $('#my_element_id').val(data_id); }) });
如果你使用的是bootstrap 3+，如果使用Jquery，可以缩短一点。
HTML
<a href="#" data-target="#my_modal" data-toggle="modal" class="identifyingClass" data-id="my_id_value">Open Modal</a> <div class="modal fade" id="my_modal" tabindex="-1" role="dialog" aria-labelledby="my_modalLabel"> <div class="modal-dialog" role="dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">Modal Title</h4> </div> <div class="modal-body"> Modal Body <input type="hidden" name="hiddenValue" id="hiddenValue" value="" /> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">No</button> <button type="button" class="btn btn-primary">Yes</button> </div> </div> </div>
JQUERY
<script type="text/javascript"> $(function () { $(".identifyingClass").click(function () { var my_id_value = $(this).data('id'); $(".modal-body #hiddenValue").val(my_id_value); }) }); </script>
你的代码可以使用正确的模态html结构。
$(function(){ $(".open-AddBookDialog").click(function(){ $('#bookId').val($(this).data('id')); $("#addBookDialog").modal("show"); }); });
<html> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <a data-id="@book.Id" title="Add this item" class="open-AddBookDialog">Open Modal</a> <div id="addBookDialog" class="modal fade" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-body"> <input type="hidden" name="bookId" id="bookId" value=""/> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> </html>
