Menu
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> 
427
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
196
Change this:
<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-large">Launch demo modal</a> To this:
<button type="button" class="btn btn-primary btn-large" data-toggle="modal" data-target="#myModal">Launch demo modal</button> (remark that changing a tag to button tag is not the answer but it is adding the data-target and data-toggle attribute that does the "work")
Please look at this example:
<!DOCTYPE html > <html> <head> <title>Bootstrap Modal</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <!-- Bootstrap --> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css"> <!-- Optional theme --> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap-theme.min.css"> <!-- Latest compiled and minified JavaScript --> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script> </head> <body> <button type="button" class="btn btn-primary btn-large" data-toggle="modal" data-target="#myModal">Launch demo modal</button> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="purchaseLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="purchaseLabel">Purchase</h4> </div> <div class="modal-body"> sup? </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Purchase</button> </div> </div> </div> </div> </body> </html> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
