Menu
I have the following html
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-body">
<table>
<tbody>
<tr>
<td>
<div class="span2 fileupload fileupload-new pull-left" data-provides="fileupload">
<div class="fileupload-preview thumbnail" style="width: 200px; height: 150px;"></div>
<div> <span class="btn btn-file"><span class="fileupload-new">Select image</span>
<span
class="fileupload-exists">Change</span>
<input type="file" />
</span> <a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a>
</div>
</div>
</td>
<td>
<div class="progress">
<div class="bar" style="width: 60%;"></div>
</div>
<button class="btn btn-mini" type="button">Upload</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
289
To open a modal from another modal can be done simply by using the events that Bootstrap provides such as show. bs. modal . You may also want some CSS to handle the backdrop overlays.
Bootstrap only supports one modal window at a time. Nested modals aren't supported as we believe them to be poor user experiences. Modals use position: fixed , which can sometimes be a bit particular about its rendering.
Change the size of the modal by adding the . modal-sm class for small modals, . modal-lg class for large modals, or . modal-xl for extra large modals.
Modals are built with HTML, CSS, and JavaScript. They're positioned over everything else in the document and remove scroll from the <body> so that modal content scrolls instead. Clicking on the modal “backdrop” will automatically close the modal. Bootstrap only supports one modal window at a time.
Just add an answer here if you are using bootstrap 3.0. In bootstrap 3.0, row-fluid is replaced by row and span is replaced by col-md (full changed log here)
So Eduardo Grajeda's answer becomes
<div class="modal-body row">
<div class="col-md-6">
<!-- Your first column here -->
</div>
<div class="col-md-6">
<!-- Your second column here -->
</div>
</div>
Just wanted to add that I managed to do this using Bootstrap-provided CSS. The following code worked for me:
<div class="modal-body row-fluid">
<div class="span6">
<!-- Your first column here -->
</div>
<div class="span6">
<!-- Your second column here -->
</div>
</div>
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
