Question

我正在尝试使用twitter bootstrap创建一个简单的模态。该模式的功能是获取所单击链接的名称，并将该名称用作标题。每个名称都在Django数据库中。我点击此链接作为参考：Passing data to a bootstrap modal

#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。因此，您需要在“.modal-header”下添加一个带有id的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 Demo

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

使用图书馆

如果您打算在应用的更多部分中执行这些酷炫的技巧，请考虑使用像Angular JS或Knockout这样的UI绑定库。这样，您可以通过事件data-bind部分UI。

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

将数据传递给Bootstrap模式

3 个答案: