2

我正在尝试使用 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 和名称的标题标签时，什么都不会显示。有没有办法完成这个任务。

4

3 回答 3

2

我找到了答案。感谢@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 );
于 2013-07-22T13:45:19.283 回答
2

标头是模态中的第一个 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');

作品。

于 2013-07-22T13:20:45.160 回答
2

一次性的方式

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

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

CodePen 演示

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

使用库

如果您打算在应用程序的更多部分中使用这些很酷的技巧，请考虑使用 UI 绑定库，如 Angular JS 或 Knockout。通过这种方式，您可以在data-bind部分 UI 中添加事件。

于 2013-07-22T13:40:33.360 回答