diff --git a/docs/javascript.html b/docs/javascript.html
index a530b21e0d..91620a5723 100644
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -253,7 +253,7 @@ $('#myModal').on('show', function (e) {
 <a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>
 
 <-- Modal -->
-<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
   <div class="modal-header">
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
     <h3 id="myModalLabel">Modal header</h3>
diff --git a/docs/templates/pages/javascript.mustache b/docs/templates/pages/javascript.mustache
index 5f8883bdf7..3c412a982b 100644
--- a/docs/templates/pages/javascript.mustache
+++ b/docs/templates/pages/javascript.mustache
@@ -183,7 +183,7 @@ $('#myModal').on('show', function (e) {
 <a href="#myModal" role="button" class="btn" data-toggle="modal">{{_i}}Launch demo modal{{/i}}</a>
 
 <-- Modal -->
-<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
   <div class="modal-header">
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
     <h3 id="myModalLabel">Modal header</h3>