关于javascript：将数据传递给bootstrap模式

Passing data to a bootstrap modal

我有几个超链接，每个超链接都附有一个ID。当我点击此链接时，我想打开一个模态(http://twitter.github.com/bootstrap/javascript.html#modals)，并将此ID传递给模态。我搜索谷歌，但我找不到任何可以帮助我的东西。

这是代码：

哪个应该打开：

1	<input type="hidden" name="bookId" id="bookId" value=""/>

有了这段代码：

1
2
3
4
5
6

$(document).ready(function () {
$(".open-AddBookDialog").click(function () {
$('#bookId').val($(this).data('id'));
$('#addBookDialog').modal('show');
});
});

但是，当我单击超链接时，没有任何反应。当我给出超链接时，模态打开就好了，但它不包含任何数据。

我按照这个例子：如何将值参数传递给Bootstrap中的modal.show()函数

(我也试过这个：如何在模态对话框中设置输入值？)

我认为你可以使用jQuery的.on事件处理程序来完成这项工作。

这是你可以测试的小提琴;只需确保尽可能扩展小提琴中的HTML框架，以便查看模态。

http://jsfiddle.net/Au9tc/605/

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<p>
Link 1
</p>
test

<p>

</p>

<p>
Link 2
</p>
test

<button class="close" data-dismiss="modal">×</button>
Modal header

<p>
some content
</p>
<input type="text" name="bookId" id="bookId" value=""/>

JAVASCRIPT

1
2
3
4
5
6
7

$(document).on("click",".open-AddBookDialog", function () {
var myBookId = $(this).data('id');
$(".modal-body #bookId").val( myBookId );
// As pointed out in comments,
// it is unnecessary to have to manually call the modal.
// $('#addBookDialog').modal('show');
});

相关讨论

当我只有一个超链接时，这可以正常工作，但我有多个超链接，每个超链接都有自己的ID。我添加了另一个带有另一个ID的超链接，但模态始终具有第一个超链接的ID。
@LeonCullens - 我已经更新了小提琴和代码。它现在以你想要的方式工作吗？
真棒，它完全符合我的要求:)！非常感谢您抽出宝贵时间帮助我。希望有时候回报恩惠;)！
很好的答案 - 但modal('show')是否需要？似乎链接上的data-toggle="modal"会照顾到这一点。
@technophobia - 正确！ data-toggle="modal"确实使$(...).modal('show')调用变得多余。 jsfiddle.net/55ZWe/1
实际上，在事件处理程序中调用模态并不是多余的。如果您将其保留在data-toggle，则事件触发的顺序将留给浏览器并且不一致。通过JS调用模态会好得多。
只是$(this).data('id');本身就是无价之宝！我不知道你可以获得数据属性。我每天都更喜欢bootstraps！ = P
@Manatax - $(this).data()是jQuery的一部分。 api.jquery.com/data/#data-html5
Ups ...你是对的(甚至更好)......到目前为止我还没有将它用作jQuery。
如果要在模态上显示更多数据，最好的选择是什么？是否更好地进行ajax呼叫？
@Limon - 这取决于。在调用模态之前，您是否已经通过之前的ajax调用获得了要在模态中显示的数据？在这种情况下，您可以利用更多data-属性。对于上面的示例，假设您已经拥有作者的姓名：那么您可以使用data-author="John Smith"，就像使用book id一样。否则，如果您没有可用的数据，打开模式时执行ajax调用可能更有意义。如果不了解更多有关您必须处理的页面和数据，很难说。
@ mg1075感谢您的快速反应。信息可在视图，完整对象上获得。但是在选择用户时，显示的数据来自列表中的第一个用户，不知道我是否清楚。如果您想通过，我刚刚在帖子中提出这个问题：stackoverflow.com/questions/24270955/
@ mg1075感谢您的回答。为什么当我使用.click事件处理程序时，未传递的值并且没有任何反应？
@AHIR - 不完全了解你的情况，这可能会有所帮助：stackoverflow.com/a/11878976/538962也许你的.click是一个动态添加的元素......
对我来说，在显示模态后调用事件回调。我不得不使用@LostInComputer的答案
谢谢你的锻炼

如果您使用的是Bootstrap 3.2.0，这是一种更简洁的方法。

链接HTML

1	Open Modal

模态JavaScript

1
2
3
4
5
6
7
8
9

//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);
});

http://jsfiddle.net/k7FC2/

相关讨论

以下是我使用@ mg1075代码实现它的方法。我想要一些更通用的代码，以便不必为模态触发链接/按钮分配类：

在Twitter Bootstrap 3.0.3中测试。

HTML

1	Open Modal

JAVASCRIPT

1
2
3
4
5
6
7
8
9
10
11
12
13
14

$(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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

Open Modal

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

Modal Body
<input type="hidden" name="hiddenValue" id="hiddenValue" value="" />

<button type="button" class="btn btn-default" data-dismiss="modal">No</button>
<button type="button" class="btn btn-primary">Yes</button>

JQUERY

1
2
3
4
5
6
7

您的代码可以使用正确的模态html结构。

1
2
3
4
5
6

$(function(){
$(".open-AddBookDialog").click(function(){
$('#bookId').val($(this).data('id'));
$("#addBookDialog").modal("show");
});
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

Open Modal

<input type="hidden" name="bookId" id="bookId" value=""/>




</html>

在Bootstrap 4.3中使用下面的代码片段 - 更多信息

1
2
3
4

$('#exampleModal').on('show.bs.modal', function (event) {
let bookId = $(event.relatedTarget).data('bookid')
$(this).find('.modal-body input').val(bookId)
})

1	a.btn.btn-primary.open-AddBookDialog {color: white }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">



<a
class="btn btn-primary open-AddBookDialog"
data-toggle="modal"
data-target="#exampleModal"
data-bookid="@book.Id"
title="Add this item"
>Open



<input type="hidden" name="bookId" id="bookId" value=""/>
<input type="text" class="form-control" id="recipient-name">

<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

您可以尝试simpleBootstrapDialog。在这里你可以通过标题，消息，回拨选项取消和提交等...

相关讨论