Menu
I've found one way to do this:
use margins to control dialog position so margin: -335px 0 0 -280px;
setting the width you must reset the margins width: 900px; margin: -250px 0 0 -450px;
to set the height use max-height max-height: 800px;
based on
http://www.revillwebdesign.com/change-the-height-width-and-position-of-a-modal-in-twitter-bootstrap/
Is there a better way to do this? Using this or another approach, is there a way to only have the dialog slide down to top:0px and stay there until dismissed?
Using the first margin settings I mentioned does this but obviously as soon as the browser is resized it will get pushed out of view.
302
Modals use position: fixed , which can sometimes be a bit particular about its rendering. Whenever possible, place your modal HTML in a top-level position to avoid potential interference from other elements. You'll likely run into issues when nesting a . modal within another fixed element.
Example 1: First, we will design modal content for the sign-up then by using CSS we will align that modal centered(vertically). Using the vertical-align property, the vertical-align property sets the vertical alignment of an element.
modal-dialog-centered to . modal-dialog to vertically center the modal.
Bootstrap 4.3 added new built-in scroll feature to modals. This makes only the modal-body content scroll if the size of the content would otherwise make the page scroll. To use it, just add the class modal-dialog-scrollable to the same div that has the modal-dialog class.
Simply override the CSS position, eg
.modal, .modal.fade.in {
top: 0; /* was 10% */
}
Note, this is with Bootstrap 2.2.2. The only margin is a negative left margin that is half the width of the modal (centres the modal horizontally). No top margins are required.
jsFiddle example here - http://jsfiddle.net/uuwAn/1/
192
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
