0

我有一个包含多个 Bootstrap 模式的 html 页面。我想使用 jquery 关闭它们。但是，我在选择它们时遇到了麻烦。

这是 html 的示例：

<div class="modal-footer span5">
  <input class="btn btn-primary" name="commit" type="submit" value="Save Material">
</div>

而这个 jquery（咖啡脚本）不起作用：

$(".modal-footer .btn").each.click ->
  alert 'commit'
  $(this).modal "hide"

或这个：

  $(".modal-footer .btn").click.each ->
    alert 'commit'
    $(this).modal "hide"

谢谢！

4

2 回答 2

2

JS 引擎不解释 Coffeescript。相反，该块需要先编译成 javascript。（或者您可以直接编写javascript）。

如果您的 .modal-footer 类来自默认引导模式，这意味着它只是整个模式 html 块的一部分，页脚可能不是附加处理程序以关闭它的最佳位置。

开箱即用，bootstrap 带有一个默认的模态结构，如下所示：

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-    labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">Modal header</h3>
    </div>
    <div class="modal-body">
        <p>One fine body…&lt;/p>
    </div>
    <div class="modal-footer">
       <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
       <button class="btn btn-primary">Save changes</button>
    </div>
</div>

要关闭它，最简单的方法是使用内置的引导行为，但通过引用构成模式的最外层 html 元素，在本例中为 id="myModal" 的 div：

$('#myModal').modal('hide');

对于您的示例，如果您知道容器的 id：

$(".modal-footer .btn").click(function(){
    alert('commit');
    $('#myModal').modal('hide');
});

如果没有，您可以使用一串 .parent() 调用遍历树，就像前面响应中的示例一样。

除非我错过了什么……

于 2013-01-22T17:20:47.427 回答
1

那不是javascript代码。试试这个：

$(".modal-footer .btn").click(function(){
  alert('commit');
  $(this).parent().hide();
});

无论如何，如果引导程序自动执行此操作，我不明白您为什么要使用 jquery 关闭模式。

于 2013-01-22T16:38:55.227 回答