javascript - Modal not remaining hidden using jQuery -

i have following table setup pop modal window when click on row in table. here demo. not working modal isn't hidden. html appears valid i'm not sure line:

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

can have form element inside td element , there other suggestions modal working?

edit:

code modal function:

$(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>')); }); }); 

jsfiddle

your javascript wasn't working needed call bootstrap files in jsfiddle. added tab-index modal modification of html. though works. might want add modal-dialog div , modal-content div. these 2 styling of modal. see difference in code.

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