Bootstrap 2 - 设置对话框/模态位置

Question

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; 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.

Answer 1

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/

Answer 2

You can modify the CSS at your end to archive this behavior.

.modal-body {
    max-height: 350px;
    -webkit-overflow-scrolling: touch;
}

@media screen and (max-height: 450px), (max-height: 450px) {
    .modal-body {
        max-height: 130px;
    }

}

Now its will work well on the mobile devices. NOTE: done by using Media query of CSS .