CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
ansario
ansario

Reputation: 345

Modal not remaining hidden using jQuery

I have the following table setup to pop up with a modal window when you click on a row in the table. Here is the DEMO. This is not working properly as modal actually isn't hidden. My HTML appears to be valid but I'm not sure about this line:

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

Can you have a form element inside a td element and are there any other suggestions to get the modal working?

EDIT:

Code for 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>'));
});
});

Upvotes: 0

Views: 97

Answers (2)

Coding Enthusiast
Coding Enthusiast

Reputation: 3933

JSfiddle

Your javascript wasn't working so you needed to call the bootstrap files properly in the jsFiddle. I added a tab-index to your modal as a modification of the html. Even though that works. you might want to add a modal-dialog div and a modal-content div. These two will help with styling of the modal. See the difference in the 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>

Upvotes: 1

Claudio Redi
Claudio Redi

Reputation: 68400

Method modal belongs to Bootstrap as you seems to know since you tagged your question properly. Problem here is that you're not including Bootstrap framework anywhere. Add reference and your code should work (with a few modifications on your modal HTML, more info here)

Upvotes: 1

Related Questions