Bootstrap Snippets Collections
Last active
September 4, 2015 11:45
-
-
Save Javvadilakshman/2251a9f663369c4a99d6 to your computer and use it in GitHub Desktop.
#Bootstrap
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // For centering bootstrap model box | |
| <script type="text/javascript"> | |
| $(function() { | |
| function reposition() { | |
| var modal = $(this), | |
| dialog = modal.find('.modal-dialog'); | |
| modal.css('display', 'block'); | |
| // Dividing by two centers the modal exactly, but dividing by three | |
| // or four works better for larger screens. | |
| dialog.css("margin-top", Math.max(0, ($(window).height() - dialog.height()) / 2)); | |
| } | |
| // Reposition when a modal is shown | |
| $('.modal').on('show.bs.modal', reposition); | |
| // Reposition when the window is resized | |
| $(window).on('resize', function() { | |
| $('.modal:visible').each(reposition); | |
| }); | |
| }); | |
| </script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- Trigger the modal with a button --> | |
| <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> | |
| <!-- Modal --> | |
| <div id="myModal" class="modal fade" role="dialog"> | |
| <div class="modal-dialog"> | |
| <!-- Modal content--> | |
| <div class="modal-content"> | |
| <div class="modal-header"> | |
| <button type="button" class="close" data-dismiss="modal">×</button> | |
| <h4 class="modal-title">Modal Header</h4> | |
| </div> | |
| <div class="modal-body"> | |
| <p>Some text in the modal.</p> | |
| </div> | |
| <div class="modal-footer"> | |
| <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <title>Bootstrap Example</title> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> | |
| <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h2>Small Modal</h2> | |
| <!-- Trigger the modal with a button --> | |
| <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Small Modal</button> | |
| <!-- Modal --> | |
| <div class="modal fade" id="myModal" role="dialog"> | |
| <div class="modal-dialog modal-sm"> | |
| <div class="modal-content"> | |
| <div class="modal-header"> | |
| <button type="button" class="close" data-dismiss="modal">×</button> | |
| <h4 class="modal-title">Modal Header</h4> | |
| </div> | |
| <div class="modal-body"> | |
| <p>This is a small modal.</p> | |
| </div> | |
| <div class="modal-footer"> | |
| <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment