将数据传递到Bootstrap模式

Question

我正在尝试使用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>

上面所做的是显示一个文本框，其中包含字符名称。 我想要的是名称作为标题，而不是在文本框中。 当我删除文本框并放置具有相同ID和名称的标头标记时，将不会显示任何内容。 有没有一种方法可以完成此任务。

Answer 1

标头是模式中的第一个h3。 因此，您需要在带有ID的“ .modal-header”下添加h3元素，并设置该元素的.html（）。 :)

在这里查找参考： http : //twitter.github.io/bootstrap/javascript.html#modals

这是代码：

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

使用如下代码：

$('.modal .hdrtitle').html('This is the header');

然后显示：

$('.modal').modal('toggle');

作品。

Answer 2

一次性的方式

如果这是您唯一一次需要在网站/应用程序中执行UI绑定行为，请执行以下操作：

$('.header-link').click(function(e) {
   $('.modal-header h4').html($(e.target).html())
})

CodePen演示

这只是将文本（实际上是HTML）放在链接本身中，并将其放在标题中。

使用图书馆

如果您打算在应用程序的更多部分中进行此类有趣的操作，请考虑使用UI绑定库，例如Angular JS或Knockout。 这样，您可以将用户界面的某些部分与事件进行data-bind 。

Answer 3

我找到了答案。 感谢@PaoloCasciello提供的布局。

代替javascript中的.on函数，它实际上必须是.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 );