diff options
Diffstat (limited to 'docs/components/modal.md')
| -rw-r--r-- | docs/components/modal.md | 63 |
1 files changed, 29 insertions, 34 deletions
diff --git a/docs/components/modal.md b/docs/components/modal.md index 6bda50798..a0e741bb4 100644 --- a/docs/components/modal.md +++ b/docs/components/modal.md @@ -48,7 +48,6 @@ A rendered modal with header, body, and set of actions in the footer. <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> - <span class="sr-only">Close</span> </button> <h4 class="modal-title">Modal title</h4> </div> @@ -71,7 +70,6 @@ A rendered modal with header, body, and set of actions in the footer. <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> - <span class="sr-only">Close</span> </button> <h4 class="modal-title">Modal title</h4> </div> @@ -98,7 +96,6 @@ Toggle a modal via JavaScript by clicking the button below. It will slide down a <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> - <span class="sr-only">Close</span> </button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> @@ -153,7 +150,6 @@ Toggle a modal via JavaScript by clicking the button below. It will slide down a <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> - <span class="sr-only">Close</span> </button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> @@ -223,7 +219,6 @@ Modals have two optional sizes, available via modifier classes to be placed on a <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> - <span class="sr-only">Close</span> </button> <h4 class="modal-title" id="myLargeModalLabel">Large modal</h4> </div> @@ -241,7 +236,6 @@ Modals have two optional sizes, available via modifier classes to be placed on a <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> - <span class="sr-only">Close</span> </button> <h4 class="modal-title" id="mySmallModalLabel">Small modal</h4> </div> @@ -275,26 +269,28 @@ To take advantage of the Bootstrap grid system within a modal, just nest `.conta <h4 class="modal-title" id="gridModalLabel">Modal title</h4> </div> <div class="modal-body"> - <div class="row"> - <div class="col-md-4">.col-md-4</div> - <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div> - </div> - <div class="row"> - <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div> - <div class="col-md-2 col-md-offset-4">.col-md-2 .col-md-offset-4</div> - </div> - <div class="row"> - <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div> - </div> - <div class="row"> - <div class="col-sm-9"> - Level 1: .col-sm-9 - <div class="row"> - <div class="col-xs-8 col-sm-6"> - Level 2: .col-xs-8 .col-sm-6 - </div> - <div class="col-xs-4 col-sm-6"> - Level 2: .col-xs-4 .col-sm-6 + <div class="container-fluid bd-example-row"> + <div class="row"> + <div class="col-md-4">.col-md-4</div> + <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div> + </div> + <div class="row"> + <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div> + <div class="col-md-2 col-md-offset-4">.col-md-2 .col-md-offset-4</div> + </div> + <div class="row"> + <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div> + </div> + <div class="row"> + <div class="col-sm-9"> + Level 1: .col-sm-9 + <div class="row"> + <div class="col-xs-8 col-sm-6"> + Level 2: .col-xs-8 .col-sm-6 + </div> + <div class="col-xs-4 col-sm-6"> + Level 2: .col-xs-4 .col-sm-6 + </div> </div> </div> </div> @@ -329,7 +325,6 @@ Have a bunch of buttons that all trigger the same modal, just with slightly diff <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> - <span class="sr-only">Close</span> </button> <h4 class="modal-title" id="exampleModalLabel">New message</h4> </div> @@ -398,9 +393,9 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap <thead> <tr> <th style="width: 100px;">Name</th> - <th style="width: 50px;">type</th> - <th style="width: 50px;">default</th> - <th>description</th> + <th style="width: 50px;">Type</th> + <th style="width: 50px;">Default</th> + <th>Description</th> </tr> </thead> <tbody> @@ -428,7 +423,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap ### Methods -#### .modal(options) +#### `.modal(options)` Activates your content as a modal. Accepts an optional options `object`. @@ -438,19 +433,19 @@ $('#myModal').modal({ }) {% endhighlight %} -#### .modal('toggle') +#### `.modal('toggle')` Manually toggles a modal. **Returns to the caller before the modal has actually been shown or hidden** (i.e. before the `shown.bs.modal` or `hidden.bs.modal` event occurs). {% highlight js %}$('#myModal').modal('toggle'){% endhighlight %} -#### .modal('show') +#### `.modal('show')` Manually opens a modal. **Returns to the caller before the modal has actually been shown** (i.e. before the `shown.bs.modal` event occurs). {% highlight js %}$('#myModal').modal('show'){% endhighlight %} -#### .modal('hide') +#### `.modal('hide')` Manually hides a modal. **Returns to the caller before the modal has actually been hidden** (i.e. before the `hidden.bs.modal` event occurs). |