bootstrap modal popup is not working properly

Question

Simply modal popup is really difficult in here.

.modal-backdrop {
        background-color: #000000;
        bottom: 0;
        left: 0;
        position: fixed;
        right: 0;
        top: 0;
        z-index: 1040;
    }

        .modal-backdrop.fade {
            opacity: 0;
        }

            .modal-backdrop, .modal-backdrop.fade.in {
                opacity: 0.8;
            }

    .modal {
        background-clip: padding-box;
        background-color: #FFFFFF;
        border: 1px solid rgba(0, 0, 0, 0.3);
        border-radius: 6px;
        box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
        left: 50%;
        margin-left: -280px;
        outline: medium none;
        position: fixed;
        top: 10%;
        width: 560px;
        z-index: 1050;
    }

        .modal.fade {
            top: -25%;
            transition: opacity 0.3s linear 0s, top 0.3s ease-out 0s;
        }

            .modal.fade.in {
                top: 10%;
            }

    .modal-header {
        border-bottom: 1px solid #EEEEEE;
        padding: 9px 15px;
    }

        .modal-header .close {
            margin-top: 2px;
        }

        .modal-header h3 {
            line-height: 30px;
            margin: 0;
        }

    .modal-body {
        max-height: 400px;
        overflow-y: auto;
        padding: 15px;
        position: relative;
    }

    .modal-form {
        margin-bottom: 0;
    }

    .modal-footer {
        background-color: #F5F5F5;
        border-radius: 0 0 6px 6px;
        border-top: 1px solid #DDDDDD;
        box-shadow: 0 1px 0 #FFFFFF inset;
        margin-bottom: 0;
        padding: 14px 15px 15px;
        text-align: right;
    }

        .modal-footer:before, .modal-footer:after {
            content: "";
            display: table;
            line-height: 0;
        }

        .modal-footer:after {
            clear: both;
        }

        .modal-footer .btn + .btn {
            margin-bottom: 0;
            margin-left: 5px;
        }

        .modal-footer .btn-group .btn + .btn {
            margin-left: -1px;
        }

        .modal-footer .btn-block + .btn-block {
            margin-left: 0;
        }

html

<!-- Button to trigger modal -->
            <a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>

            <!-- Modal -->
            <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h3 id="myModalLabel">Modal header</h3>
                </div>
                <div class="modal-body">
                    <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>

                    <p>praesent commodo cursus magna, vel scelerisque nisl consectetur et. vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                    <p>
                        aenean lacinia bibendum nulla sed consectetur. praesent commodo cursus magna, vel scelerisque nisl consectetur et. donec sed odio dui. donec ullamcorper nulla non metus auctor fringilla.
                    </p>
                    <p>
                        cras mattis consectetur purus sit amet fermentum. cras justo odio, dapibus ac facilisis in, egestas eget quam. morbi leo risus, porta ac consectetur ac, vestibulum at eros.
                    </p>
                    <p>
                        praesent commodo cursus magna, vel scelerisque nisl consectetur et. vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
                    </p>
                    <p>
                        aenean lacinia bibendum nulla sed consectetur. praesent commodo cursus magna, vel scelerisque nisl consectetur et. donec sed odio dui. donec ullamcorper nulla non metus auctor fringilla.
                    </p></div>
                <div class="modal-footer">
                    <button class="btn" data-dismiss="modal">Close</button>
                    <button class="btn btn-primary">Save changes</button>
                </div>
            </div>

With above modal popup css, the result comes up like below. Any suggestion ?

Answer 1

我已经修复了它，请看css，它是关于overlow-y：auto的，顺便说一下它在旧的引导程序（2.xx）中看起来会很好

   http://jsbin.com/urAYAkOM/21/edit

Answer 2

remove overflow:auto from .modal-body. It should be

.modal-body {
        max-height: 400px;
        padding: 15px;
        position: relative;
    }