Twitter bootstrap modal not working

javascript, jquery, modal-dialog, twitter-bootstrap

Solution

You need use the `data-target` tag.

Try to replace the `href="#myModal"` attribute with `data-target="#myModal"`. Besides, you have put a `hide` class, I guess it shouldn't be there.

Look at the examples here

Problem

I am new to Twitter Bootstrap. I am working on a modal panel, but it is not being displayed. It fades the screen, but the modal itself does not appear. I have checked the error console, and there are no errors. My code is inside the `<head>` tag; I include the scripts like: ``` <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="<?php echo $ruadmin ?>js/bootstrap.js"></script> <script src="<?php echo $ruadmin ?>js/tablesorter/jquery.tablesorter.js"></script> <script src="<?php echo $ruadmin ?>js/tablesorter/tables.js"></script> ``` Modal page: ``` <a data-toggle="modal" href="#myModal" class="btn btn-primary btn-large">Launch demo modal</a> <!-- Modal --> <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">Welcome</h3> </div> <div class="modal-body"> <p> Hello </p> </div> <div class="modal-footer"> <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> <button class="btn btn-primary">Save changes</button> </div> </div> ```

Original source