Larry Nickerson lnickers2004
lnickers2004
/ gist:8429537
Created
January 15, 2014 02:08
Bootstrap3: centered modal with close button
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
| <!-- modal Dialog --> | |
| <!--.modal.fade#sentDialog>.modal-dialog>.modal-content--> | |
| <div id="sentDialog" class="modal fade " tabindex="-1"> | |
| <div class="modal-dialog " id="modal-centered-absolute"> | |
| <div class="modal-content"> | |
| <div class="modal-header"> | |
| <a href="#" class="close" data-dismiss="modal">×</a> | |
| <h4>Thanks for clicking!</h4> |
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
| /* http://codepen.io/shshaw/full/gEiDt */ | |
| .Absolute-Center { | |
| margin: auto; | |
| position: absolute; | |
| top: 0; left: 0; bottom: 0; right: 0; | |
| } |
lnickers2004
/ gist:8428911
Created
January 15, 2014 00:55
CENTERED MODAL: absolute position 600px x 340px div, or modal etc
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
| #my-absolute-centered-modal | |
| { | |
| top: calc(50% - 170px) !important; | |
| height: 340px; | |
| position: absolute; | |
| width: 600px; | |
| left: calc(50% - 300px) !important; | |
| } |
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
| <style> | |
| .modal-dialog-center { | |
| margin-top: 25%; | |
| } | |
| </style> | |
| <div id="waitForm" class="modal"> | |
| <div class="modal-dialog modal-dialog-center"> |
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
| <script> | |
| var dismiss = '[data-dismiss="alert"]' | |
| // ALERT DATA-API | |
| var buttons = '[data-toggle="buttons"]' | |
| // BUTTON DATA-API | |
| var button ='[data-toggle="button"]' | |
| // CAROUSEL DATA-API |
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
| modal = $('.modal') | |
| modal.css 'margin-top', ($(window).height() - modal.height()) / 2 - parseInt(modal.css('padding-top')) |
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
| <div class="modal hide" id="pleaseWaitDialog" data-backdrop="static" data-keyboard="false"> | |
| <div class="modal-header"> | |
| <h1>Processing...</h1> | |
| </div> | |
| <div class="modal-body"> | |
| <div class="progress progress-striped active"> | |
| <div class="bar" style="width: 100%;"></div> | |
| </div> | |
| </div> |
lnickers2004
/ gist:8372961
Last active
January 2, 2016 22:58
Bootstrap3: modal Dialog tabIndex="-1" -- to prevent accidental tabbing
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
| <!-- modal Dialog --> | |
| <a href="#sentDialog" class="btn btn-info" data-toggle="modal">Show Dialog</a> | |
| <!--.modal.fade#sentDialog>.modal-dialog>.modal-content--> | |
| <div id="sentDialog" class="modal fade" tabindex="-1"> | |
| <div class="modal-dialog"> | |
| <div class="modal-content"> | |
| <div class="modal-header">Thanks for clicking!</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
| <!--collapse control--> | |
| <ul class="nav nav-pills navbar-inverse"> | |
| <li><a href="#attributions" data-toggle="collapse">Attributions</a></li> | |
| <li><a href="#pictures" data-toggle="collapse">Pictures</a></li> | |
| </ul> | |
| <!--use collapse in to intially show the section--> | |
| <div id="pictures" class="collapse in"> |
lnickers2004
/ gist:8367891
Created
January 11, 2014 06:51
Bootstrap3: panel with heading body and primary styling
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
| <!--panel with heading body and primary styling--> | |
| <div class="panel .mgm-card"> | |
| <div class="panel-heading mgm-panel-lined"> | |
| <div class="panel-title"> | |
| <h2><span class="mgm-oline">Sidebar</span></h2> | |
| </div> | |
| </div> |