我有几个超链接,每个超链接都附有一个ID . 当我点击此链接时,我想打开一个模态(http://twitter.github.com/bootstrap/javascript.html#modals),并将此ID传递给模态 . 我在谷歌搜索,但我找不到任何可以帮助我的东西 .
这是代码:
<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”时,模态打开就好了,但它不包含任何数据 .
我按照这个例子:How to pass values arguments to modal.show() function in Bootstrap
6 回答
如果您使用 Bootstrap 3.2.0 ,这是一种更简洁的方法 .
链接HTML
模态JavaScript
http://jsfiddle.net/k7FC2/
如果你在bootstrap 3上,如果使用Jquery,这可以进一步缩短 .
HTML
JQUERY
你可以试试simpleBootstrapDialog . 在这里你可以传递 Headers ,消息,回拨选项取消和提交等...
您的代码将使用正确的模态html结构 .
我想你可以使用jQuery的.on事件处理程序来完成这项工作 .
这是你可以测试的小提琴;只需确保尽可能扩展小提琴中的html框架,以便查看模态 .
http://jsfiddle.net/Au9tc/605/
HTML
JAVASCRIPT
以下是我使用@ mg1075代码实现它的方法 . 我想要一些更通用的代码,以便不必将类分配给模态触发链接/按钮:
Tested in Twitter Bootstrap 3.0.3.
HTML
JAVASCRIPT