diff options
Diffstat (limited to 'docs/javascript/modal.md')
| -rw-r--r-- | docs/javascript/modal.md | 103 |
1 files changed, 63 insertions, 40 deletions
diff --git a/docs/javascript/modal.md b/docs/javascript/modal.md index 22c74f31c..4ae9f95ba 100644 --- a/docs/javascript/modal.md +++ b/docs/javascript/modal.md @@ -248,15 +248,69 @@ For modals that simply appear rather than fade in to view, remove the `.fade` cl </div> {% endhighlight %} +## Using the grid system + +To take advantage of the Bootstrap grid system within a modal, just nest `.container-fluid within the `.modal-body` and then use the normal grid system classes within this container. + +{% example html %} +<div id="gridSystemModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridModalLabel" aria-hidden="true"> + <div class="modal-dialog"> + <div class="modal-content"> + <div class="modal-header"> + <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> + <h4 class="modal-title" id="gridModalLabel">Modal title</h4> + </div> + <div class="modal-body"> + <div class="container-fluid"> + <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> + </div> + </div> + <div class="modal-footer"> + <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> + <button type="button" class="btn btn-primary">Save changes</button> + </div> + </div> + </div> +</div> +<div class="bs-example bs-example-padded-bottom"> + <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#gridSystemModal"> + Launch demo modal + </button> +</div> +{% endexample %} + ## Varying modal content based on trigger button Have a bunch of buttons that all trigger the same modal, just with slightly different contents? Use `event.relatedTarget` and [HTML `data-*` attributes](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes) (possibly [via jQuery](http://api.jquery.com/data/)) to vary the contents of the modal depending on which button was clicked. See the Modal Events docs for details on `relatedTarget`. -<div class="bs-example" style="padding-bottom: 24px;"> +{% example html %} +<div class="bs-example"> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button> - <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@twbootstrap">Open modal for @twbootstrap</button> - + <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button> <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> @@ -287,42 +341,7 @@ Have a bunch of buttons that all trigger the same modal, just with slightly diff </div> </div> </div> - -{% highlight html %} -<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button> -<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button> -<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@twbootstrap">Open modal for @twbootstrap</button> - -<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> - <div class="modal-dialog"> - <div class="modal-content"> - <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> - <div class="modal-body"> - <form> - <div class="form-group"> - <label for="recipient-name" class="control-label">Recipient:</label> - <input type="text" class="form-control" id="recipient-name"> - </div> - <div class="form-group"> - <label for="message-text" class="control-label">Message:</label> - <textarea class="form-control" id="message-text"></textarea> - </div> - </form> - </div> - <div class="modal-footer"> - <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> - <button type="button" class="btn btn-primary">Send message</button> - </div> - </div> - </div> -</div> -{% endhighlight %} +{% endexample %} {% highlight js %} $('#exampleModal').on('show.bs.modal', function (event) { @@ -336,6 +355,10 @@ $('#exampleModal').on('show.bs.modal', function (event) { }) {% endhighlight %} +## Modals with dynamic heights + +If the height of a modal changes while it is open, you should call `$('#myModal').data('bs.modal').handleUpdate()` to readjust the modal's position in case a scrollbar appears. + ## Usage The modal plugin toggles your hidden content on demand, via data attributes or JavaScript. It also adds `.modal-open` to the `<body>` to override default scrolling behavior and generates a `.modal-backdrop` to provide a click area for dismissing shown modals when clicking outside the modal. @@ -423,7 +446,7 @@ Manually hides a modal. **Returns to the caller before the modal has actually be ### Events -Bootstrap's modal class exposes a few events for hooking into modal functionality. +Bootstrap's modal class exposes a few events for hooking into modal functionality. All modal events are fired at the modal itself (i.e. at the `<div class="modal">`). <div class="table-responsive"> <table class="table table-bordered table-striped"> |