Javascript 使用jQuery不保持隐藏状态

我有下面的表格设置，当你点击表格中的一行时，会弹出一个模式窗口。这是你的电话号码。这不能正常工作，因为模态实际上没有隐藏。我的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>'));
});
});

$（函数（）{
$（'#orderModal'）.modal({
键盘：没错，
背景：“静态”，
秀:假,，
}).on（'show'，function（）{
var getIdFromRow=$（event.target）.closest（'tr'）.data（'id'）；
$（this）.find（'#orderDetails'）.html（$（'orderid selected:'+getIdFromRow+''）；
});
});

方法模式属于

引导

，因为您正确地标记了问题，所以您似乎知道这一点。这里的问题是，您并没有在任何地方包括

引导

框架。添加引用，您的代码应该可以工作（对模式HTML进行一些修改，更多信息）

您的javascript无法工作，因此需要在JSFIDLE中正确调用引导文件。我添加了一个

选项卡索引

，作为对html的修改。即使这样做有效。您可能需要添加一个

模态对话框

div和一个

模态内容

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>

x
详细比较
接近

---

模态函数的代码在哪里？例如，

$（'#orderModal'）.modal（{

。jQuery和jQuery UI都没有内置的

.modal（）

它在演示的JS部分，但我会编辑我的问题，将代码包含在这里。@j08691它来自

bootstrap.JS

@Caludio-Redi提醒我，模式是引导的一部分，我忘记了将其添加到JSFIDLE中。我添加了引导，修复了模式的隐藏，但当你单击行时它仍然不会弹出。按照

Bootstrap

示例修复模式html