Support new modals

Removed W004, and E040.
Ported E022, E032, E046, E048, and E049

14 files changed, 451 insertions, 53 deletions

diff --git a/src/bootlint.js b/src/bootlint.js
index 8d4decf..66b4652 100644
--- a/src/bootlint.js
+++ b/src/bootlint.js
@@ -346,14 +346,6 @@ var LocationIndex = _location.LocationIndex;
     });
     */
     /*
-    addLinter('W004', function lintRemoteModals($, reporter) {
-        var remoteModalTriggers = $('[data-toggle="modal"][data-remote]');
-        if (remoteModalTriggers.length) {
-            reporter('Found one or more modals using the deprecated `remote` option', remoteModalTriggers);
-        }
-    });
-    */
-    /*
     addLinter('W005', function lintJquery($, reporter) {
         var OLD_JQUERY = 'Found what might be an outdated version of jQuery; Bootstrap requires jQuery v' + MIN_JQUERY_VERSION + ' or higher';
         var NO_JQUERY_BUT_BS_JS = 'Unable to locate jQuery, which is required for Bootstrap\'s JavaScript plugins to work';
@@ -804,7 +796,6 @@ var LocationIndex = _location.LocationIndex;
         }
     });
     */
-    /*
     addLinter('E022', function lintModalsWithinOtherComponents($, reporter) {
         var selector = [
             '.table .modal',
@@ -815,7 +806,6 @@ var LocationIndex = _location.LocationIndex;
             reporter('Modal markup should not be placed within other components, so as to avoid the component\'s styles interfering with the modal\'s appearance or functionality', badNestings);
         }
     });
-    */
     addLinter('E023', function lintCardBodyWithoutCard($, reporter) {
         var badCardBody = $('.card-body').filter(function () {
             return $(this).closest('.card').length !== 1;
@@ -912,7 +902,6 @@ var LocationIndex = _location.LocationIndex;
             );
         });
     });
-    /*
     addLinter('E032', function lintModalStructure($, reporter) {
         var elements;
 
@@ -946,7 +935,6 @@ var LocationIndex = _location.LocationIndex;
             reporter('`.modal-title` must be a child of `.modal-header`', elements);
         }
     });
-    */
     /*
     addLinter('E033', function lintAlertMissingDismissible($, reporter) {
         var alertsMissingDismissible = $('.alert:not(.alert-dismissible):has([data-dismiss="alert"])');
@@ -997,14 +985,6 @@ var LocationIndex = _location.LocationIndex;
     });
     */
     /*
-    addLinter('E040', function lintModalHide($, reporter) {
-        var modalsWithHide = $('.modal.hide');
-        if (modalsWithHide.length) {
-            reporter('`.hide` should not be used on `.modal` in Bootstrap v3.', modalsWithHide);
-        }
-    });
-    */
-    /*
     addLinter('E041', function lintCarouselStructure($, reporter) {
         var carouselsWithWrongInners = $('.carousel').filter(function () {
             return $(this).children('.carousel-inner').length !== 1;
@@ -1076,14 +1056,12 @@ var LocationIndex = _location.LocationIndex;
         }
     });
     */
-    /*
     addLinter('E046', function lintModalTabIndex($, reporter) {
         var modalsWithoutTabindex = $('.modal:not([tabindex])');
         if (modalsWithoutTabindex.length) {
             reporter('`.modal` elements must have a `tabindex` attribute.', modalsWithoutTabindex);
         }
     });
-    */
     /*
     addLinter('E047', function lintBtnElements($, reporter) {
         var btns = $('.btn:not(a,button,input,label)');
@@ -1092,22 +1070,18 @@ var LocationIndex = _location.LocationIndex;
         }
     });
     */
-    /*
     addLinter('E048', function lintModalRole($, reporter) {
         var modals = $('.modal:not([role="dialog"])');
         if (modals.length) {
             reporter('`.modal` must have a `role="dialog"` attribute.', modals);
         }
     });
-    */
-    /*
     addLinter('E049', function lintModalDialogRole($, reporter) {
         var modalDialogs = $('.modal-dialog:not([role="document"])');
         if (modalDialogs.length) {
             reporter('`.modal-dialog` must have a `role="document"` attribute.', modalDialogs);
         }
     });
-    */
     /*
     addLinter('E050', function lintNestedFormGroups($, reporter) {
         var nestedFormGroups = $('.form-group > .form-group');
diff --git a/test/bootlint_test.js b/test/bootlint_test.js
index 77dc735..7e8e51a 100644
--- a/test/bootlint_test.js
+++ b/test/bootlint_test.js
@@ -150,15 +150,6 @@ exports.bootlint = {
         test.done();
     },
     /*
-    'remote modals': function (test) {
-        test.expect(1);
-        test.deepEqual(lintHtml(utf8Fixture('modal/remote.html')),
-            ['Found one or more modals using the deprecated `remote` option'],
-            'should complain when remote modals are present.');
-        test.done();
-    },
-    */
-    /*
     'jQuery': function (test) {
         test.expect(5);
         test.deepEqual(lintHtml(utf8Fixture('jquery/present.html')),
@@ -729,20 +720,6 @@ exports.bootlint = {
     },
     */
     /*
-    'modal with .hide class': function (test) {
-        test.expect(2);
-        test.deepEqual(lintHtml(utf8Fixture('modal/with-hide.html')),
-            ['`.hide` should not be used on `.modal` in Bootstrap v3.'],
-            'should complain about a modal with the .hide class.'
-        );
-        test.deepEqual(lintHtml(utf8Fixture('modal/valid.html')),
-            [],
-            'should not complain about a modal without the .hide class.'
-        );
-        test.done();
-    },
-    */
-    /*
     'carousel structure': function (test) {
         test.expect(5);
         test.deepEqual(lintHtml(utf8Fixture('carousel/valid.html')),
diff --git a/test/_old_fixtures/modal/remote.html b/test/fixtures/modal/body-outside-content.html
index 4e39e01..b268518 100644
--- a/test/_old_fixtures/modal/remote.html
+++ b/test/fixtures/modal/body-outside-content.html
@@ -17,11 +17,18 @@
         <script src="../generic-qunit.js"></script>
     </head>
     <body>
-        <button type="button" data-toggle="modal" data-remote="http://example.invalid/modal.html" data-target="#myModal">Launch modal</button>
+        <div class="modal fade" tabindex="-1" role="dialog">
+            <div class="modal-dialog" role="document">
+                <!--Oops, forgot about the div.modal-content-->
+                <div class="modal-body">
+                    <p>One fine body&hellip;</p>
+                </div>
+            </div>
+        </div>
 
         <div id="qunit"></div>
         <ol id="bootlint">
-            <li data-lint="Found one or more modals using the deprecated `remote` option"></li>
+            <li data-lint="`.modal-body` must be a child of `.modal-content`"></li>
         </ol>
     </body>
 </html>
diff --git a/test/fixtures/modal/content-outside-dialog.html b/test/fixtures/modal/content-outside-dialog.html
new file mode 100644
index 0000000..7e96002
--- /dev/null
+++ b/test/fixtures/modal/content-outside-dialog.html
@@ -0,0 +1,42 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <title>Test</title>
+        <link rel="stylesheet" href="../../../node_modules/qunit/qunit/qunit.css">
+
+        <!--[if lt IE 9]>
+            <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
+            <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
+        <![endif]-->
+        <script src="../../../node_modules/jquery/dist/jquery.min.js"></script>
+        <script src="../../../node_modules/qunit/qunit/qunit.js"></script>
+        <script src="../../../dist/browser/bootlint.js"></script>
+        <script src="../generic-qunit.js"></script>
+    </head>
+    <body>
+        <div class="modal fade" tabindex="-1" role="dialog">
+            <!--Oops, forgot about the .modal-dialog-->
+            <div class="modal-content">
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
+                    <h4 class="modal-title">Modal title</h4>
+                </div>
+                <div class="modal-body">
+                    <p>One fine body&hellip;</p>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+                    <button type="button" class="btn btn-primary">Save changes</button>
+                </div>
+            </div>
+        </div>
+
+        <div id="qunit"></div>
+        <ol id="bootlint">
+            <li data-lint="`.modal-content` must be a child of `.modal-dialog`"></li>
+        </ol>
+    </body>
+</html>
diff --git a/test/fixtures/modal/dialog-outside-modal.html b/test/fixtures/modal/dialog-outside-modal.html
new file mode 100644
index 0000000..53d667e
--- /dev/null
+++ b/test/fixtures/modal/dialog-outside-modal.html
@@ -0,0 +1,42 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <title>Test</title>
+        <link rel="stylesheet" href="../../../node_modules/qunit/qunit/qunit.css">
+
+        <!--[if lt IE 9]>
+            <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
+            <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
+        <![endif]-->
+        <script src="../../../node_modules/jquery/dist/jquery.min.js"></script>
+        <script src="../../../node_modules/qunit/qunit/qunit.js"></script>
+        <script src="../../../dist/browser/bootlint.js"></script>
+        <script src="../generic-qunit.js"></script>
+    </head>
+    <body>
+        <!--Oops, forgot the div.modal wrapper...-->
+        <div class="modal-dialog" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
+                    <h4 class="modal-title">Modal title</h4>
+                </div>
+                <div class="modal-body">
+                    <p>One fine body&hellip;</p>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+                    <button type="button" class="btn btn-primary">Save changes</button>
+                </div>
+            </div>
+        </div>
+
+        <div id="qunit"></div>
+        <ol id="bootlint">
+            <li data-lint="`.modal-dialog` must be a child of `.modal`"></li>
+        </ol>
+    </body>
+</html>
diff --git a/test/fixtures/modal/footer-outside-content.html b/test/fixtures/modal/footer-outside-content.html
new file mode 100644
index 0000000..1f15beb
--- /dev/null
+++ b/test/fixtures/modal/footer-outside-content.html
@@ -0,0 +1,44 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <title>Test</title>
+        <link rel="stylesheet" href="../../../node_modules/qunit/qunit/qunit.css">
+
+        <!--[if lt IE 9]>
+            <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
+            <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
+        <![endif]-->
+        <script src="../../../node_modules/jquery/dist/jquery.min.js"></script>
+        <script src="../../../node_modules/qunit/qunit/qunit.js"></script>
+        <script src="../../../dist/browser/bootlint.js"></script>
+        <script src="../generic-qunit.js"></script>
+    </head>
+    <body>
+        <div class="modal fade" tabindex="-1" role="dialog">
+            <div class="modal-dialog" role="document">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
+                        <h4 class="modal-title">Modal title</h4>
+                    </div>
+                    <div class="modal-body">
+                        <p>One fine body&hellip;</p>
+                    </div>
+                </div>
+                <!--Oops, forgot that the .modal-footer should go within the .modal-content-->
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+                    <button type="button" class="btn btn-primary">Save changes</button>
+                </div>
+            </div>
+        </div>
+
+        <div id="qunit"></div>
+        <ol id="bootlint">
+            <li data-lint="`.modal-footer` must be a child of `.modal-content`"></li>
+        </ol>
+    </body>
+</html>
diff --git a/test/fixtures/modal/header-outside-content.html b/test/fixtures/modal/header-outside-content.html
new file mode 100644
index 0000000..d6bdf8f
--- /dev/null
+++ b/test/fixtures/modal/header-outside-content.html
@@ -0,0 +1,44 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <title>Test</title>
+        <link rel="stylesheet" href="../../../node_modules/qunit/qunit/qunit.css">
+
+        <!--[if lt IE 9]>
+            <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
+            <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
+        <![endif]-->
+        <script src="../../../node_modules/jquery/dist/jquery.min.js"></script>
+        <script src="../../../node_modules/qunit/qunit/qunit.js"></script>
+        <script src="../../../dist/browser/bootlint.js"></script>
+        <script src="../generic-qunit.js"></script>
+    </head>
+    <body>
+        <div class="modal fade" tabindex="-1" role="dialog">
+            <div class="modal-dialog" role="document">
+                <!--Oops, the .modal-header ought to be within the .modal-content-->
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
+                    <h4 class="modal-title">Modal title</h4>
+                </div>
+                <div class="modal-content">
+                    <div class="modal-body">
+                        <p>One fine body&hellip;</p>
+                    </div>
+                    <div class="modal-footer">
+                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+                        <button type="button" class="btn btn-primary">Save changes</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div id="qunit"></div>
+        <ol id="bootlint">
+            <li data-lint="`.modal-header` must be a child of `.modal-content`"></li>
+        </ol>
+    </body>
+</html>
diff --git a/test/_old_fixtures/modal/with-hide.html b/test/fixtures/modal/missing-role-dialog.html
index 9a7ce73..6c5a9c6 100644
--- a/test/_old_fixtures/modal/with-hide.html
+++ b/test/fixtures/modal/missing-role-dialog.html
@@ -17,7 +17,7 @@
         <script src="../generic-qunit.js"></script>
     </head>
     <body>
-        <div class="modal hide" tabindex="-1" role="dialog">
+        <div class="modal fade" tabindex="-1">
             <div class="modal-dialog" role="document">
                 <div class="modal-content">
                     <div class="modal-header">
@@ -37,7 +37,7 @@
 
         <div id="qunit"></div>
         <ol id="bootlint">
-            <li data-lint="`.hide` should not be used on `.modal` in Bootstrap v3."></li>
+            <li data-lint="`.modal` must have a `role=&quot;dialog&quot;` attribute."></li>
         </ol>
     </body>
 </html>
diff --git a/test/fixtures/modal/missing-role-document.html b/test/fixtures/modal/missing-role-document.html
new file mode 100644
index 0000000..18fd70f
--- /dev/null
+++ b/test/fixtures/modal/missing-role-document.html
@@ -0,0 +1,43 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <title>Test</title>
+        <link rel="stylesheet" href="../../../node_modules/qunit/qunit/qunit.css">
+
+        <!--[if lt IE 9]>
+            <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
+            <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
+        <![endif]-->
+        <script src="../../../node_modules/jquery/dist/jquery.min.js"></script>
+        <script src="../../../node_modules/qunit/qunit/qunit.js"></script>
+        <script src="../../../dist/browser/bootlint.js"></script>
+        <script src="../generic-qunit.js"></script>
+    </head>
+    <body>
+        <div class="modal fade" tabindex="-1" role="dialog">
+            <div class="modal-dialog">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
+                        <h4 class="modal-title">Modal title</h4>
+                    </div>
+                    <div class="modal-body">
+                        <p>One fine body&hellip;</p>
+                    </div>
+                    <div class="modal-footer">
+                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+                        <button type="button" class="btn btn-primary">Save changes</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div id="qunit"></div>
+        <ol id="bootlint">
+            <li data-lint="`.modal-dialog` must have a `role=&quot;document&quot;` attribute."></li>
+        </ol>
+    </body>
+</html>
diff --git a/test/fixtures/modal/tabindex-missing.html b/test/fixtures/modal/tabindex-missing.html
new file mode 100644
index 0000000..3af5c4b
--- /dev/null
+++ b/test/fixtures/modal/tabindex-missing.html
@@ -0,0 +1,43 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <title>Test</title>
+        <link rel="stylesheet" href="../../../node_modules/qunit/qunit/qunit.css">
+
+        <!--[if lt IE 9]>
+            <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
+            <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
+        <![endif]-->
+        <script src="../../../node_modules/jquery/dist/jquery.min.js"></script>
+        <script src="../../../node_modules/qunit/qunit/qunit.js"></script>
+        <script src="../../../dist/browser/bootlint.js"></script>
+        <script src="../generic-qunit.js"></script>
+    </head>
+    <body>
+        <div class="modal fade" role="dialog">
+            <div class="modal-dialog" role="document">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
+                        <h4 class="modal-title">Modal title</h4>
+                    </div>
+                    <div class="modal-body">
+                        <p>One fine body&hellip;</p>
+                    </div>
+                    <div class="modal-footer">
+                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+                        <button type="button" class="btn btn-primary">Save changes</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div id="qunit"></div>
+        <ol id="bootlint">
+            <li data-lint="`.modal` elements must have a `tabindex` attribute."></li>
+        </ol>
+    </body>
+</html>
diff --git a/test/fixtures/modal/title-outside-header.html b/test/fixtures/modal/title-outside-header.html
new file mode 100644
index 0000000..1bf18dc
--- /dev/null
+++ b/test/fixtures/modal/title-outside-header.html
@@ -0,0 +1,40 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <title>Test</title>
+        <link rel="stylesheet" href="../../../node_modules/qunit/qunit/qunit.css">
+
+        <!--[if lt IE 9]>
+            <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
+            <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
+        <![endif]-->
+        <script src="../../../node_modules/jquery/dist/jquery.min.js"></script>
+        <script src="../../../node_modules/qunit/qunit/qunit.js"></script>
+        <script src="../../../dist/browser/bootlint.js"></script>
+        <script src="../generic-qunit.js"></script>
+    </head>
+    <body>
+        <div class="modal fade" tabindex="-1" role="dialog">
+            <div class="modal-dialog" role="document">
+                <div class="modal-content">
+                    <h4 class="modal-title">Modal title but I should be inside a modal header</h4>
+                    <div class="modal-body">
+                        <p>One fine body&hellip;</p>
+                    </div>
+                    <div class="modal-footer">
+                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+                        <button type="button" class="btn btn-primary">Save changes</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div id="qunit"></div>
+        <ol id="bootlint">
+            <li data-lint="`.modal-title` must be a child of `.modal-header`"></li>
+        </ol>
+    </body>
+</html>
diff --git a/test/fixtures/modal/valid.html b/test/fixtures/modal/valid.html
new file mode 100644
index 0000000..523f161
--- /dev/null
+++ b/test/fixtures/modal/valid.html
@@ -0,0 +1,41 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <title>Test</title>
+        <link rel="stylesheet" href="../../../node_modules/qunit/qunit/qunit.css">
+
+        <!--[if lt IE 9]>
+            <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
+            <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
+        <![endif]-->
+        <script src="../../../node_modules/jquery/dist/jquery.min.js"></script>
+        <script src="../../../node_modules/qunit/qunit/qunit.js"></script>
+        <script src="../../../dist/browser/bootlint.js"></script>
+        <script src="../generic-qunit.js"></script>
+    </head>
+    <body>
+        <div class="modal fade" tabindex="-1" role="dialog">
+            <div class="modal-dialog" role="document">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
+                        <h4 class="modal-title">Modal title</h4>
+                    </div>
+                    <div class="modal-body">
+                        <p>One fine body&hellip;</p>
+                    </div>
+                    <div class="modal-footer">
+                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+                        <button type="button" class="btn btn-primary">Save changes</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div id="qunit"></div>
+        <ol id="bootlint"></ol>
+    </body>
+</html>
diff --git a/test/fixtures/modal/within-navbar.html b/test/fixtures/modal/within-navbar.html
new file mode 100644
index 0000000..bfa1032
--- /dev/null
+++ b/test/fixtures/modal/within-navbar.html
@@ -0,0 +1,48 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <title>Test</title>
+        <link rel="stylesheet" href="../../../node_modules/qunit/qunit/qunit.css">
+
+        <!--[if lt IE 9]>
+            <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
+            <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
+        <![endif]-->
+        <script src="../../../node_modules/jquery/dist/jquery.min.js"></script>
+        <script src="../../../node_modules/qunit/qunit/qunit.js"></script>
+        <script src="../../../dist/browser/bootlint.js"></script>
+        <script src="../generic-qunit.js"></script>
+    </head>
+    <body>
+      <nav class="navbar navbar-default" role="navigation">
+        <div class="container-fluid">
+          <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Open ze modal!</button>
+          <div class="modal fade" id="myModal" tabindex="-1" role="dialog">
+              <div class="modal-dialog" role="document">
+                  <div class="modal-content">
+                      <div class="modal-header">
+                          <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
+                          <h4 class="modal-title">Modal title</h4>
+                      </div>
+                      <div class="modal-body">
+                          <p>One fine body&hellip;</p>
+                      </div>
+                      <div class="modal-footer">
+                          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+                          <button type="button" class="btn btn-primary">Save changes</button>
+                      </div>
+                  </div>
+              </div>
+          </div>
+        </div>
+      </nav>
+
+        <div id="qunit"></div>
+        <ol id="bootlint">
+            <li data-lint="Modal markup should not be placed within other components, so as to avoid the component's styles interfering with the modal's appearance or functionality"></li>
+        </ol>
+    </body>
+</html>
diff --git a/test/fixtures/modal/within-table.html b/test/fixtures/modal/within-table.html
new file mode 100644
index 0000000..2e7aa2b
--- /dev/null
+++ b/test/fixtures/modal/within-table.html
@@ -0,0 +1,53 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <title>Test</title>
+        <link rel="stylesheet" href="../../../node_modules/qunit/qunit/qunit.css">
+
+        <!--[if lt IE 9]>
+            <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
+            <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
+        <![endif]-->
+        <script src="../../../node_modules/jquery/dist/jquery.min.js"></script>
+        <script src="../../../node_modules/qunit/qunit/qunit.js"></script>
+        <script src="../../../dist/browser/bootlint.js"></script>
+        <script src="../generic-qunit.js"></script>
+    </head>
+    <body>
+        <table class="table">
+            <tbody>
+                <tr>
+                    <td>One cell</td>
+                    <td>
+                        <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Open ze modal!</button>
+                        <div class="modal fade" id="myModal" tabindex="-1" role="dialog">
+                            <div class="modal-dialog" role="document">
+                                <div class="modal-content">
+                                    <div class="modal-header">
+                                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
+                                        <h4 class="modal-title">Modal title</h4>
+                                    </div>
+                                    <div class="modal-body">
+                                        <p>One fine body&hellip;</p>
+                                    </div>
+                                    <div class="modal-footer">
+                                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+                                        <button type="button" class="btn btn-primary">Save changes</button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+
+        <div id="qunit"></div>
+        <ol id="bootlint">
+            <li data-lint="Modal markup should not be placed within other components, so as to avoid the component's styles interfering with the modal's appearance or functionality"></li>
+        </ol>
+    </body>
+</html>