twitter-bootstrap 将数据传递给 Bootstrap 模态
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17788609/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Passing Data to Bootstrap Modals
提问by pepper5319
I am trying to create a simple modal using twitter bootstrap. The function of that modal is to take the name of the link clicked on, and use that name as a header. Each of the names are in a Django Database. I followed this link for reference: Passing data to a bootstrap modal
我正在尝试使用 twitter bootstrap 创建一个简单的模态。该模式的功能是获取点击链接的名称，并将该名称用作标题。每个名称都在 Django 数据库中。我按照此链接作为参考：将数据传递到引导模式
#Button to toggle modal
<a data-toggle="modal" data-id="{{ name }}" title="Add this item" class="open- AddBookDialog " href="#addBookDialog">{{ name }}</a><br />
#Modal
<div class="modal hide fade" id="addBookDialog">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<input type="text" name="nameId" id="nameId" />
<p>some content</p>
</div>
</div>
#JavaScript
<script type="text/javascript">
$(document).on("click", ".open-AddBookDialog", function () {
var myNameId = $(this).data('id');
$("modal-body #nameId").val( myNameId );
});
</script>
What the above does is displays a text box with the characters name in the box. What I would like is to have the name as the header, not in a text box. When I remove the textbox, and place a header tag with the same id and name, nothing will show. Is there a way to complete this task.
上面所做的是显示一个文本框，框中的字符名称。我想要的是将名称作为标题，而不是在文本框中。当我删除文本框，并放置一个具有相同 ID 和名称的标题标签时，什么都不会显示。有没有办法完成这个任务。
采纳答案by Paolo Casciello
the header is the first h3 in the modal. So you need to add a h3 element under ".modal-header" with an id and set the .html() of that element. :)
标题是模态中的第一个 h3。因此，您需要在“.modal-header”下添加一个带有 id 的 h3 元素并设置该元素的 .html() 。:)
Look here for reference: http://twitter.github.io/bootstrap/javascript.html#modals
在这里查看参考：http: //twitter.github.io/bootstrap/javascript.html#modals
Here's the code:
这是代码：
#Modal
<div class="modal hide fade" id="addBookDialog">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h3 class="hdrtitle">This is the header</h3>
</div>
<div class="modal-body">
<input type="text" name="nameId" id="nameId" />
<p>some content</p>
</div>
</div>
Using a code like:
使用如下代码：
$('.modal .hdrtitle').html('This is the header');
and then showing it with:
然后显示它：
$('.modal').modal('toggle');
works.
作品。
回答by Adam Grant
The one-off way
一次性方式
If this is the only time you'll ever need to do a UI-binding behavior in your site/app, do something like this:
如果这是您唯一需要在站点/应用程序中执行 UI 绑定行为的时间，请执行以下操作：
$('.header-link').click(function(e) {
$('.modal-header h4').html($(e.target).html())
})
This will just take the text (actually the HTML) in the link itself and put that in the header.
这将只获取链接本身中的文本（实际上是 HTML）并将其放入标题中。
Using a library
使用库
If you plan to do these sorts of cool tricks in more parts of your app, consider using a UI-binding library like Angular JS or Knockout. This way you can data-bindparts of your UI with events.
如果您打算在应用程序的更多部分执行这些很酷的技巧，请考虑使用 UI 绑定库，例如 Angular JS 或 Knockout。通过这种方式，您可以data-bind使用事件的部分 UI。
回答by pepper5319
I found the answer. Thanks to @PaoloCasciello for a layout.
我找到了答案。感谢 @PaoloCasciello 的布局。
Instead of an .onfunction in javascript, it really needed to be .html. So here is what the final code will look like.
而不是.onjavascript中的函数，它确实需要是.html. 所以这就是最终代码的样子。
<!-- Modal -->
<div class="modal hide fade" id="addBookDialog">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h3 id="nameId" />
</div>
<div class="modal-body">
<p>some content</p>
</div>
</div>
<script type="text/javascript">
$(document).on("click", ".open-AddBookDialog", function () {
var myNameId = $(this).data('id');
var myNameDescription = $(this).data('description');
$(".modal-header #nameId").html( myNameId );
