SORU
5 AĞUSTOS 2013, PAZARTESİ


Dikey ortalama Bootstrap kalıcı pencere

Bazı css özellikleri eklemeye çalıştım görüş (orta) benim kalıcı center ediyorum

 .modal { position: fixed; top:50%; left:50%; }   

Bu örnek http://jsfiddle.net/rniemeyer/Wjjnd/ kullanıyorum

Denedim

$("#MyModal").modal('show').css(
    {
        'margin-top': function () {
            return -($(this).height() / 2);
        },
        'margin-left': function () {
            return -($(this).width() / 2);
        }
    })

CEVAP
18 Temmuz 2014, Cuma


Bu işi yapar : http://jsfiddle.net/sRmLV/53/

Yardımcısı-div ve bazı özel css kullanır. Javascript veya jQuery gerekli.

HTML(demo-code Bootstrap dayalı)

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="vertical-alignment-helper">
        <div class="modal-dialog vertical-align-center">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span>

                    </button>
                     <h4 class="modal-title" id="myModalLabel">Modal title</h4>

                </div>
                <div class="modal-body">...</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>

CSS

.vertical-alignment-helper {
    display:table;
    height: 100%;
    width: 100%;
    pointer-events:none; /* This makes sure that we can still click outside of the modal to close it */
}
.vertical-align-center {
    /* To center vertically */
    display: table-cell;
    vertical-align: middle;
    pointer-events:none;
}
.modal-content {
    /* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
    width:inherit;
    height:inherit;
    /* To center horizontally */
    margin: 0 auto;
    pointer-events: all;
}

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • kylelandry

    kylelandry

    9 AĞUSTOS 2007
  • talkandroid

    talkandroid

    27 Mayıs 2010
  • The Bad Tutorials

    The Bad Tuto

    6 EKİM 2009