javascript - 使用 jQuery 不隐藏模态

Question

我将下表设置为当您单击表中的一行时弹出一个模式窗口。这是 DEMO .这不能正常工作，因为模态实际上没有被隐藏。我的 HTML 似乎是有效的，但我不确定这一行:

<td align="center" style="padding:0;margin:0;">
            <input class="ignoreBox" type="checkbox" name="ignore" value="one">
</td> 

您能否在 td 元素中包含一个表单元素，是否有任何其他建议可以使模态正常工作？

编辑:

模态函数代码:

$(function () {
$('#orderModal').modal({
    keyboard: true,
    backdrop: "static",
    show: false,
}).on('show', function () {
    var getIdFromRow = $(event.target).closest('tr').data('id');
    $(this).find('#orderDetails').html($('<b> Order Id selected: ' + getIdFromRow + '</b>'));
});
});

Answer 1

JSfiddle

您的 javascript 无法正常工作，因此您需要在 jsFiddle 中正确调用 Bootstrap 文件。我在您的模式中添加了一个 tab-index 作为对 html 的修改。即使那有效。您可能想要添加一个 modal-dialog div 和一个 modal-content div。这两个将有助于模态的样式。查看代码中的差异。

<div id="orderModal" class="modal fade" role="dialog" aria-labelledby="orderModalLabel" aria-hidden="true" tabindex="-1">
<div class="modal-dialog" role="document">
 <div class="modal-content">   
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
     <h3>Detailed Comparison</h3>

</div>
<div id="orderDetails" class="modal-body"></div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
  </div>
</div>
</div>