लंबवत बूटस्ट्रैप मोडल विंडो को केंद्रित करना

Question

मैं व्यूपोर्ट (मध्य) पर अपने मॉडल को केंद्रित करना चाहूंगा मैंने कुछ सीएसएस गुणों को जोड़ने की कोशिश की

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

मैं इस उदाहरण का उपयोग कर रहा हूँ http://jsfiddle.net/rniemeyer/Wjjnd/

मैंने कोशिश की

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

Comments

.modal.fade.inसाथ ही ओवरराइड करने की कोशिश करें

— haim770

इसके साथ आज़माएँ: github.com/jschr/bootstrap-modal

— John Magnolia

इस zerosixthree.se/… का उपयोग करने का प्रयास करें: मैं .modal.fade.in {top: 50%; रूपांतर: ट्रांस्वाय (-50%); }

— जौन सेबेस्टियन

जोड़ा गया flexbox समाधान ( translateY(-50%)मॉडल की ऊंचाई डिवाइस की ऊंचाई से अधिक लंबी होने पर व्यक्ति मोडल के शीर्ष पर पहुंच जाता है)।

— ताओ

बूटस्ट्रैप के रूप में 4 मोडल-संवाद-केंद्रित जोड़ा गया था कि यह अब आवश्यक नहीं है। कृपया नीचे दिए गए उत्तर की समीक्षा करें।

— 15 अप्रैल को jcaruso

Answer 1

यह काम करता है: http://jsfiddle.net/sRmLV/1140/

इसमें एक हेल्पर-डिव और कुछ कस्टम सीएसएस का उपयोग किया गया है। कोई जावास्क्रिप्ट या jQuery की आवश्यकता नहीं है।

HTML (बूटस्ट्रैप के डेमो-कोड पर आधारित )

<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">&times;</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>

सीएसएस

.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;
    max-width:inherit; /* For Bootstrap 4 - to avoid the modal window stretching full width */
    height:inherit;
    /* To center horizontally */
    margin: 0 auto;
    pointer-events: all;
}

Comments

इस समाधान के साथ, ऊंचाई की वजह से: 100%; और चौड़ाई: 100%; आप मोडल से बाहर क्लिक करके मॉडल्स को बंद नहीं कर सकते। क्या आप इस @Rens de नोबेल के लिए एक फिक्स के बारे में सोच सकते हैं?

— पीसीएटर

ठीक है यह समाधान शानदार काम करता है (सिवाय इसके कि यह मुझे मॉडल्स को बंद करने से रोककर मुझे रोक देता है)। लेकिन किसी तरह यह प्रोट्रेक्टर के साथ मेरे कुछ ई 2 ई परीक्षण विफल हो जाता है (और मुझे इसका कारण नहीं मिल सकता है, ऐसा नहीं लगता है कि यह इस पर एक बग है)। वैसे भी मैं जावास्क्रिप्ट उत्तर पर वापस जा रहा हूं ताकि मैं इस पर अधिक समय न गंवाऊं। लेकिन जैसा कि मैंने कहा, यह ठीक काम करने के लिए प्रतीत होता है, सिर्फ ई 2 ई परीक्षण करने वाले लोगों को बाहर देखने के लिए चेतावनी के साथ।

— पीसीएटर

@ pcatre, टिप के लिए धन्यवाद! मैंने इसके लिए एक फिक्स के साथ कोड अपडेट किया है। सूचक-घटनाओं की स्थापना: कोई नहीं; संरेखण वर्गों पर चाल करता है। IE11, नवीनतम क्रोम और फ़ायरफ़ॉक्स और आईओएस सफारी में परीक्षण किया गया।

— RNobel

यह निश्चित नहीं है कि यह अपडेट किए जाने के बाद से उपयोगकर्ताओं को यह कहते हुए काम नहीं किया गया है कि यह अंदर के तत्व तत्वों के क्लिक पर काम करता है, लेकिन यह मेरे लिए 100% काम कर रहा है, ऊपर दिए गए उदाहरण में। आपकी मदद और उपरोक्त सभी टिप्पणियों के लिए बहुत बहुत धन्यवाद।

— माइकल जी

बूटस्ट्रैप के रूप में 4 मोडल-संवाद-केंद्रित जोड़ा गया था कि यह अब आवश्यक नहीं है। कृपया उस उत्तर की समीक्षा करें।

— jcaruso

Answer 2

क्योंकि gpcola का जवाब मेरे लिए काम नहीं करता था, इसलिए मैंने इसके कामों को थोड़ा संपादित किया। मैंने रूपांतरण के बजाय "मार्जिन-टॉप" का उपयोग किया। इसके अलावा, मैं "दिखाया गया" ईवेंट के बजाय "शो" का उपयोग करता हूं क्योंकि इसके बाद मुझे पोजिशनिंग का एक बहुत बुरा उछाल मिला (जब आपके पास बूटस्ट्रैप एनिमेशन हैं)। पोज़िशनिंग से पहले डिस्प्ले को "ब्लॉक" पर सेट करना सुनिश्चित करें, अन्यथा $ Dial.height () 0 होगा और मोडल पूरी तरह से केंद्रित नहीं होगा।

(function ($) {
    "use strict";
    function centerModal() {
        $(this).css('display', 'block');
        var $dialog  = $(this).find(".modal-dialog"),
        offset       = ($(window).height() - $dialog.height()) / 2,
        bottomMargin = parseInt($dialog.css('marginBottom'), 10);

        // Make sure you don't hide the top part of the modal w/ a negative margin if it's longer than the screen height, and keep the margin equal to the bottom margin of the modal
        if(offset < bottomMargin) offset = bottomMargin;
        $dialog.css("margin-top", offset);
    }

    $(document).on('show.bs.modal', '.modal', centerModal);
    $(window).on("resize", function () {
        $('.modal:visible').each(centerModal);
    });
}(jQuery));

Comments

यह एक सही है! केवल $ (दस्तावेज़) के बजाय .height () $ 4. (विंडो) का उपयोग करने के अपने सही .height () लाइन 4 में। इसके अलावा मैं अंतिम पंक्ति को $('.modal:visible').each(centerModal);

— बदलूंगा

यह मेरे लिए पूरी तरह से काम करता है, धन्यवाद। जब हम इस कोड का उपयोग करते हैं, तो हमें 0x पर मोडलिंग-डायलॉग के शीर्ष और निचले भाग को सही केंद्र पर सेट करना होगा।

— मीना मोर्सली

यह टूट जाता है अगर मोडल खिड़की की ऊंचाई से अधिक लंबा हो। इसलिए मैंने संवाद के मार्जिन-टॉप को सेट करने से ठीक पहले निम्न पंक्ति जोड़ी: if(offset < 0) offset = 0; मैं पूरे ब्लॉक को एक उत्तर केस में पेस्ट कर रहा हूं जो स्पष्ट नहीं है!

— जेटलीज

मैंने मोडल के निचले मार्जिन के बराबर शीर्ष मार्जिन रखने के लिए कुछ और बदलाव किए, नीचे दिए गए उत्तर में

— जेटलीज

बिल्कुल सही, $ (यह) .css ('प्रदर्शन', 'ब्लॉक') गायब था; हर समय और सोचा जाता था कि ऊँचाई क्यों थी 0.

— जानिस ग्रूज़िस

Answer 3

यह मैंने अपने ऐप के लिए किया है। यदि आप bootstrap.css फ़ाइल में निम्न कक्षाओं पर एक नज़र डालते हैं।। Modal-डायलॉग में 10px और @media स्क्रीन की डिफ़ॉल्ट पैडिंग है और (न्यूनतम-चौड़ाई: 768px) ।मॉडल-डायलॉग में एक शीर्ष पैडल सेट 30px है। इसलिए मेरी कस्टम सीएसएस फ़ाइल में मैंने मीडिया स्क्रीन की चौड़ाई निर्दिष्ट किए बिना सभी स्क्रीन के लिए अपना शीर्ष पैडिंग 15% किया। उम्मीद है की यह मदद करेगा।

.modal-dialog {
  padding-top: 15%;
}

Comments

यह केवल छोटे अल्रेट बक्से के लिए काम करता है, और लार्ग बक्से के लिए काम नहीं करता है

— मीना मोरसली

आप बस छोटे तौर पर लागू कर सकते हैं:.modal-dialog.modal-sm { padding-top:15%; }

— डनक

Answer 4

सभी HTML5 ब्राउज़रों के लिए मुझे सबसे अच्छा तरीका:

body.modal-open .modal {
    display: flex !important;
    height: 100%;
} 

body.modal-open .modal .modal-dialog {
    margin: auto;
}

Comments

मुझे यह समाधान बहुत अच्छा लगा। डेस्कटॉप या सफारी के पुराने संस्करणों के बारे में निश्चित नहीं है, लेकिन यह iOS 8 पर ठीक लगता है।

— निकोलस गैलर

हां मैं @ नाइसॉलसगैलर से सहमत हूं। यह मेरे लिए भी अच्छा काम करता है। मैंने क्रोम और फ़ायरफ़ॉक्स में परीक्षण किया। यह अच्छा काम करता है।

— मंजूनाथ रेड्डी

यह एक महान css केवल प्रगतिशील वृद्धि है। कोई js की आवश्यकता नहीं है और कोई भी ब्राउज़र जो flexbox का समर्थन नहीं करता है उसे डिफ़ॉल्ट बूटस्ट्रैप मोडल प्लेसमेंट मिलेगा।

— क्रेग हर्षबर्गर

बंद करें, लेकिन यह पृष्ठ पर एक से अधिक होने पर मोडल्स को बंद करने में सक्षम होने के कारण टूट जाता है। ठीक करने के लिए नीचे मेरा जवाब देखें।

— रॉबर्ट मैककी

अद्यतन: काम करने के align-items: center;लिए body.modal-open .modalलगता है जोड़ना ।

— बर्नी

Answer 5

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="table">
        <div class="table-cell">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</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>
</div>

// शैलियाँ

.table {
 display: table;
 height:100%;
}
.table-cell {
display: table-cell;
vertical-align: middle;
}

Comments

यह सार्वभौमिक उत्तर है। मुझे नहीं पता कि इसके लिए किसी ने वोट क्यों दिया।

— Csaba Toth

मैं एक दर्जन प्रस्तावों के साथ कम से कम 4 एसओ प्रविष्टियों के माध्यम से चला गया। HTML5 की उम्र में BTW, इसे कम से कम कुछ ढांचे में कार्यक्षमता में बनाया जाना चाहिए। बाजीगरी के बजाय।

— साबा तोथ

यह भी ध्यान दें: यदि आप चौड़ाई कहते हैं: तालिका शैली के लिए 100%, तो आपको क्षैतिज केंद्र मिलेगा (यदि मोडल अतिप्रवाह नहीं है तो)।

— साबा तोथ

अब तक का सबसे अच्छा जवाब। यह एक स्क्रॉलबार बनाता है, लेकिन आप इसे बना सकते हैं .modal-open .modal {overflow-y: hidden; }

— क्रिस्टोफ़

Answer 6

शीर्ष पैरामीटर को आपके कस्टम घोषणा में निर्धारित मूल्य को मजबूर करने के लिए .modal.fade.in में ओवरराइड किया जा रहा है, !importantऊपर से कीवर्ड जोड़ें । यह ब्राउज़र को उस मान का उपयोग करने के लिए बाध्य करता है और कीवर्ड के लिए किसी भी अन्य मान को अनदेखा करता है। इसका दोष यह है कि आप कहीं और मूल्य को ओवरराइड नहीं कर सकते।

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

Comments

यह मुझे मोडल के बारे में पृष्ठभूमि पर क्लिक करने पर मॉडल को बंद करने से रोकता है।

— स्कॉट सिम्पसन

Answer 7

बूटस्ट्रैप 4 के अनुसार जावास्क्रिप्ट के बिना आपके लिए इसे प्राप्त करने के लिए निम्न वर्ग जोड़ा गया था।

modal-dialog-centered

आप उनके प्रलेखन यहाँ पा सकते हैं ।

इंगित करने के लिए धन्यवाद vd आपको दोनों .modal-dialog-केंद्रित-.modal-dialog को लंबवत रूप से केंद्र में जोड़ने की आवश्यकता है।

Comments

यह बूटस्ट्रैप 4 के लिए सबसे अच्छा उत्तर है।

— ब्रूसेसेब

मोडल-डायलॉग और मोडल-डायलॉग-केंद्रित दोनों को जोड़कर बेहतर परिणाम आया है

— vd

@vd ने समझा कि प्रलेखन ने कहा है कि "मोडल को लंबवत केंद्र करने के लिए .modal-dialog-केंद्रित-.modal-dialog पर केंद्रित करें।" मैं अपने उत्तर को प्रतिबिंबित करने के लिए और साथ ही साथ उन लोगों के लिए भी अपडेट करूंगा जिन्होंने इसे नहीं पकड़ा

— jcaruso

Answer 8

यह मेरे लिए पूरी तरह से काम करता है:

.modal {
text-align: center;
padding: 0!important;
}

.modal:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -4px;
}

.modal-dialog {
display: inline-block;
text-align: left;
vertical-align: middle;
}

पूरा डेमो URL: https://codepen.io/dimbslmh/full/mKfCc

Answer 9

आप उपयोग कर सकते हैं:

.modal {
    position: fixed;
    top: 50% !important;
    left: 50%;
    transform: translate(-50%, -50%);
}

इसे लंबवत और क्षैतिज दोनों तरह से केन्द्रित करना।

Comments

यह फ्लेक्स का उपयोग किए बिना सीएसएस के साथ "कुछ कैसे केंद्रित करें" सच है। तथ्य यह है कि संदर्भ बूटस्ट्रैप है या एक मोडल अप्रासंगिक होना चाहिए। अन्य सभी उत्तर बहुत अधिक हैं।

— ईएसआर

इस पद्धति के साथ, यदि मोडल डिवाइस स्क्रीन की ऊंचाई से अधिक लंबा है, तो मोडल का शीर्ष दुर्गम हो जाता है।

— ताओ

Answer 10

क्योंकि यहां अधिकांश उत्तर काम नहीं करते थे, या केवल आंशिक रूप से काम करते थे:

body.modal-open .modal[style]:not([style='display: none;']) {
    display: flex !important;
    height: 100%;
} 

body.modal-open .modal[style]:not([style='display: none;']) .modal-dialog {
    margin: auto;
}

आपको केवल उस मोडल पर स्टाइल लागू करने के लिए [स्टाइल] चयनकर्ता का उपयोग करना होगा जो वर्तमान में सभी मॉडल्स के बजाय सक्रिय है। .inबहुत अच्छा होगा, लेकिन यह संक्रमण पूर्ण होने के बाद ही जोड़ा जाना प्रतीत होता है जो बहुत देर हो चुकी है और कुछ बहुत खराब संक्रमणों के लिए बनाता है। सौभाग्य से यह प्रतीत होता है कि बूटस्ट्रैप हमेशा मोडल पर एक शैली विशेषता लागू करता है, जैसा कि यह दिखाने के लिए शुरू हो रहा है, इसलिए यह थोड़ा हैक है, लेकिन यह काम करता है।

यह :not([style='display: none;'])भाग शैली विशेषता को सही ढंग से हटाने और डायलॉग को बंद करने के बजाय शैली प्रदर्शन को सेट करने के लिए बूटस्ट्रैप का एक समाधान है।

Comments

बहुत बहुत धन्यवाद। यह वास्तव में केवल एक चीज है जिसने 2016 में काम किया था।

— एलेक्सियोवे

4 साल हो गए। फिर भी उपयोगी है। धन्यवाद दोस्त!

— हसन नोमानी

Answer 11

आप बूटस्ट्रैप 3 मोडल पर वर्टिकल अलाइनमेंट सेंटर प्राप्त कर सकते हैं जैसे:

.modal-vertical-centered {
  transform: translate(0, 50%) !important;
  -ms-transform: translate(0, 50%) !important; /* IE 9 */
  -webkit-transform: translate(0, 50%) !important; /* Safari and Chrome */
}

और इस सीएसएस क्लास को "मोडल-डायलॉग" कंटेनर में जोड़ें

<div class="modal-dialog modal-vertical-centered">
...

jsField वर्किंग उदाहरण: http://jsfiddle.net/U4NRx/

Comments

यह वास्तव में संवाद को लंबवत कैसे केंद्र करता है?

— गल्पपैक १32

अधिकांश स्थानों पर बढ़िया काम करता है, लेकिन एंड्रॉइड 4.4 से कम एचटीएमएल 5 अनुप्रयोगों को लपेटने में काम नहीं करता है।

— जोश

मेरा मोडल इस पृष्ठ के साथ नीचे था

— डोरियन

हाँ! मैं उपयोग करता हूं: .modal.fade.in {top: 50%; रूपांतर: TranslY (-50%); }

— जोआन सेबस्टियन

बस 50% से 15% को संशोधित करें और फिर संवाद खिड़की के केंद्र में होगा। .मॉडल-वर्टिकल-केंद्रित {ट्रांसफॉर्म: ट्रांसलेट (0, 15%) - महत्वपूर्ण; -ms- परिवर्तन: अनुवाद (0, 15%)! महत्वपूर्ण / * IE 9 / -webkit- परिवर्तन: अनुवाद (0, 15%) - महत्वपूर्ण! / सफारी और क्रोम * /}

— Haimei

Answer 12

ऐसा करने का सबसे साफ और सरल तरीका Flexbox का उपयोग करना है! निम्नलिखित स्क्रीन के केंद्र में बूटस्ट्रैप 3 मोडल को लंबवत रूप से संरेखित करेगा और यहां पोस्ट किए गए अन्य समाधानों की तुलना में बहुत अधिक क्लीनर और सरल है:

body.modal-open .modal.in {
  display: flex !important;
  align-items: center;
}

नोट: हालांकि यह सबसे सरल उपाय है, यह ब्राउज़र समर्थन के कारण सभी के लिए काम नहीं कर सकता है: http://caniuse.com/#feat=freebox

यह (प्रति सामान्य) IE जैसा दिखता है। मेरे मामले में, मेरे लिए या ग्राहकों के लिए विकसित सभी उत्पाद IE10 + हैं। (यह IE के पुराने संस्करणों का समर्थन करते हुए विकास समय का निवेश करने के लिए समझदार व्यवसाय नहीं बनाता है जब इसका उपयोग वास्तव में उत्पाद को विकसित करने और एमवीपी को तेजी से प्राप्त करने के लिए किया जा सकता है)। यह निश्चित रूप से एक लक्जरी नहीं है जो हर किसी के पास है।

मैंने देखा है कि बड़ी साइटों को पता चलता है कि फ्लेक्सबॉक्स समर्थित है या नहीं और पृष्ठ के मुख्य भाग पर एक वर्ग लागू होता है - लेकिन फ्रंट-एंड इंजीनियरिंग का वह स्तर बहुत मजबूत है, और आपको अभी भी कमबैक की आवश्यकता होगी।

मैं लोगों को वेब के भविष्य को अपनाने के लिए प्रोत्साहित करूंगा। फ्लेक्सबॉक्स कमाल का है और अगर आप कर सकते हैं तो आपको इसका इस्तेमाल शुरू कर देना चाहिए।

पुनश्च - इस साइट ने वास्तव में मुझे एक पूरे के रूप में फ्लेक्सबॉक्स को समझने में मदद की और इसे किसी भी उपयोग के मामले में लागू किया: http://flexboxfroggy.com/

EDIT: एक पृष्ठ पर दो मॉडल के मामले में, यह .modal.in पर लागू होना चाहिए

Comments

यह अन्यथा अच्छी तरह से काम करता है, लेकिन समापन एनीमेशन अच्छा नहीं लगता है।

— user2061057

CSS3 संक्रमण के साथ एक एनीमेशन को पूरा करने में सक्षम होना चाहिए?

— ग्रेग ब्लास

Answer 13

लाभ:

• डिवाइस की तुलना में लंबा होने पर भी सुलभ मोडल सामग्री
• उपयोग नहीं करता है display:table-cell(यह लेआउट के लिए नहीं है)
• डिफॉल्ट बूटस्ट्रैप 3 मोडल के लिए किसी भी संशोधन की आवश्यकता नहीं है markup
• स्थिति शुद्ध सीएसएस है। JS को मोडल बंद करने के लिए क्लिक / टैप के नीचे और उसके ऊपर जोड़ा जाता है
• मैंने SCSSउन लोगों के लिए उप-उपसर्ग शामिल किया जो उपयोग करते हैं gulpयाgrunt

// closes the modal on click/tap below/above the modal

$('.modal-dialog').on('click tap', function(e){
    if (e.target.classList.contains('modal-dialog')) {
    $('.modal').modal('hide');
  }
})

.modal-dialog {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
     -moz-box-orient: vertical;
     -moz-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
     -moz-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  overflow-y: auto;
  min-height: -webkit-calc(100vh - 60px);
  min-height: -moz-calc(100vh - 60px);
  min-height: calc(100vh - 60px);
}
@media (max-width: 767px) {
  .modal-dialog {
    min-height: -webkit-calc(100vh - 20px);
    min-height: -moz-calc(100vh - 20px);
    min-height: calc(100vh - 20px);
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


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

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</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>

नोट : मैं इस उत्तर को बूटस्ट्रैप 3 के नवीनतम चश्मे के साथ अद्यतित रखने का इरादा रखता हूं। बूटस्ट्रैप 4 समाधान के लिए, इस उत्तर को देखें (अब वे कमोबेश एक जैसे हैं, लेकिन समय के साथ वे विचलित हो सकते हैं)। यदि आपको इसके साथ कोई बग या समस्या मिलती है, तो मुझे बताएं और मैं अपडेट करूंगा। धन्यवाद।

---

स्वच्छ, अन-प्रीफिक्स SCSS(उपयोग के साथ gulp/ grunt) के लिए:

.modal-dialog {
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow-y: auto;
  min-height: calc(100vh - 60px);
  @media (max-width: 767px) {
    min-height: calc(100vh - 20px);
  }
}

Comments

सबसे अच्छा समाधान IMO।

— 21

Answer 14

फिर भी एक और सीएसएस समाधान। पॉपअप के लिए काम नहीं करता है जो व्यू पोर्ट से बड़ा है।

.modal-dialog {
    position: absolute;
    right: 0;
    left: 0;
    margin-top: 0;
    margin-bottom: 0; 
}
.modal.fade .modal-dialog {
    transition: top 0.4s ease-out;
    transform: translate(0, -50%);
    top: 0;
}
.modal.in .modal-dialog {
    transform: translate(0, -50%);
    top: 50%;
}

में .modal-dialogवर्ग निरपेक्ष (रिश्तेदार से) के लिए स्थिति अधिभावी और सामग्री एकत्रितright:0, left: 0

में .modal.fade .modal-dialog , .modal.in .modal-dialogसे अधिक संक्रमण एनीमेशन की स्थापना topनहीं बल्कि का अनुवाद पर से।

margin-topछोटे पॉपअप के मामले में पॉपअप को केंद्र से थोड़ा नीचे ले जाता है और लंबे पॉपअप के मामले में, मोडल हेडर के साथ अटक जाता है। अतmargin-top:0, margin-bottom:0

इसे और निखारने की जरूरत है।

Answer 15

जो लोग कोणीय-यूआई बूटस्ट्रैप का उपयोग कर रहे हैं, वे उपरोक्त जानकारी के आधार पर नीचे की कक्षाओं को जोड़ सकते हैं:

नोट: किसी अन्य परिवर्तन की आवश्यकता नहीं है और यह सभी मॉडल्स को हल करेगा।

// The 3 below classes have been placed to make the modal vertically centered
.modal-open .modal{
    display:table !important;
    height: 100%;
    width: 100%;
    pointer-events:none; /* This makes sure that we can still click outside of the modal to close it */
}

.modal-dialog{
    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;
}

Answer 16

हमें जावास्क्रिप्ट की आवश्यकता नहीं है। Boostrap मोडल जोड़ता है .in वर्ग जब यह प्रकट होता है। बस फ्लेक्स सीएसएस के साथ modalclassName.fade.in के साथ इस वर्ग संयोजन को संशोधित करें और आप कर रहे हैं।

अपने मोडल को लंबवत और क्षैतिज रूप से केंद्रित करने के लिए इस सीएसएस को जोड़ें।

.modal.fade.in {
    display: flex !important;
    justify-content: center;
    align-items: center;
}
.modal.fade.in .modal-dialog {
    width: 100%;
}

Answer 17

मेरी पसंद, बस थोड़ा सीएसएस: (IE8 में काम नहीं कर रहा है)

.modal.fade .modal-dialog {
    transform: translate(-50%, -80%);
}

.modal.in .modal-dialog {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin-top: 0px;
}

मोडल कैसे दिखाई देता है इसे बदलने के लिए आप पहले नियम से खेल सकते हैं।

का उपयोग कर: बूटस्ट्रैप 3.3.4

Answer 18

बस आप नीचे दिए गए CSS को मौजूदा एक में जोड़ें, यह मेरे लिए ठीक काम करता है

.modal {
  text-align: center;
}
@media screen and (min-width: 768px) {
    .modal:before {
      display: inline-block;
      vertical-align: middle;
      content: " ";
      height: 100%;
    }
}
.modal-dialog {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
}

Answer 19

अरनी के जवाब के आधार पर , लेकिन पेज स्क्रॉल के लिए भी लेखांकन।

(function($) {
    "use strict";
    function positionModals(e) {
        var $this = $(this).css('display', 'block'),
            $window = $(window),
            $dialog = $this.find('.modal-dialog'),
            offset = ($window.height() - $window.scrollTop() - $dialog.height()) / 2,
            marginBottom = parseInt($dialog.css('margin-bottom'), 10);

        $dialog.css('margin-top', offset < marginBottom ? marginBottom : offset);
    }

    $(document).on('show.bs.modal', '.modal', positionModals);

    $(window).on('resize', function(e) {
        $('.modal:visible').each(positionModals);
    });
}(jQuery));

Answer 20

मुझे लगता है कि यह रेंस डी नोबेल के समाधान की तुलना में थोड़ा साफ शुद्ध सीएसएस समाधान है। इसके अलावा यह संवाद को इसके बाहर क्लिक करने से रोकने से नहीं रोकता है।

http://plnkr.co/edit/JCGVZQ?p=preview

बस कुछ सीएसएस वर्ग को डाइव कंटेनर में .modal- संवाद वर्ग के साथ बूटस्ट्रैडर सीएसएस की तुलना में उच्च विशिष्टता प्राप्त करने के लिए जोड़ें।

एचटीएमएल

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog centered modal-lg">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

और इस .modal-dialog.centered कंटेनर को ठीक से और ठीक से तैनात करें।

सीएसएस

.modal .modal-dialog.centered {
    position: fixed;
    bottom: 50%;
    right: 50%;
    transform: translate(50%, 50%);
}

या फ्लेक्सबॉक्स का उपयोग करके और भी सरल।

सीएसएस

.modal {
    display: flex;
    align-items: center;
    justify-content: center;
}

Comments

यह फ्लेक्सबॉक्स संस्करण अपेक्षा के अनुरूप काम नहीं करता है। नवीनतम क्रोम (52.0.x), .modal- संवाद पर परीक्षण ठीक से केंद्रित है, लेकिन इसकी सामग्री सहभागिता पुरानी जगह (अजीब तरह से) पर जमी हुई लगती है। हालाँकि, आप इस तकनीक का उपयोग सही पर .modal-dialog (नहीं .modal) पर करने का प्रयास कर सकते हैं, और कुछ अन्य गुणों के साथ, यह काम करने लगता है। =)

— giovannipds

Answer 21

.modal.in .modal-dialog {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

Answer 22

यह बीएस 3 में काम करता है, वी 2 में परीक्षण नहीं किया गया है। यह मोडल को लंबवत रूप से केंद्र में रखता है। ध्यान दें कि यह वहां संक्रमण करेगा - यदि आप चाहते हैं कि यह केवल स्थिति के transitionलिए सीएसएस संपत्ति संपादित करें.modal-dialog

centerModal = function() {
    var $dialog = $(this).find(".modal-dialog"),
        offset = ($(window).height() - $dialog.height()) / 2;

    // Center modal vertically in window
    $dialog.css({
        'transform': 'translateY(' + offset + 'px) !important',
    });
};

$('.modal').on('shown.bs.modal', centerModal);
$(window).on("resize", function() {
    $('.modal').each(centerModal);
});

Answer 23

e(document).on('show.bs.modal', function () {
        if($winWidth < $(window).width()){
            $('body.modal-open,.navbar-fixed-top,.navbar-fixed-bottom').css('marginRight',$(window).width()-$winWidth)
        }
    });
    e(document).on('hidden.bs.modal', function () {
        $('body,.navbar-fixed-top,.navbar-fixed-bottom').css('marginRight',0)
    });

Comments

क्या आप स्पष्ट कर सकते हैं कि आपके उत्तर में 'e' क्या है?

— माइकल बटलर

Answer 24

यह अरनी का जवाब लेता है और यह काम करता है अगर मोडल स्क्रीन की ऊंचाई से अधिक लंबा हो:

function centerModal() {
    $(this).css('display', 'block');
    var $dialog = $(this).find(".modal-dialog");
    var offset = ($(window).height() - $dialog.height()) / 2;
    //Make sure you don't hide the top part of the modal w/ a negative margin if it's longer than the screen height, and keep the margin equal to the bottom margin of the modal
    var bottomMargin = $dialog.css('marginBottom');
    bottomMargin = parseInt(bottomMargin);
    if(offset < bottomMargin) offset = bottomMargin;
    $dialog.css("margin-top", offset);
}

$('.modal').on('show.bs.modal', centerModal);
$(window).on("resize", function () {
    $('.modal:visible').each(centerModal);
});

Comments

अरे @jetlej आप इसे शामिल करने के लिए सिर्फ अरनी के उत्तर को संपादित क्यों नहीं करते? आप उसके कोड पर एक बड़ा बग हल करें।

— पीसीएटर

@ pcatre - मुझे नहीं पता था कि मैं संपादन प्रस्तुत कर सकता हूं! उस ओर इशारा करने के लिए धन्यवाद

— जेटलीज

Answer 25

बूटस्ट्रैप modal.js में वर्टिकल मोडल सेंटरिंग जोड़ने के लिए मैंने इसे Modal.prototype.showफंक्शन के अंत में जोड़ा :

var $modalDialog = $('.modal-dialog'),
        modalHeight = $modalDialog.height(),
        browserHeight = window.innerHeight;

    $modalDialog.css({'margin-top' : modalHeight >= browserHeight ? 0 : (browserHeight - modalHeight)/2});

Comments

यदि पृष्ठ के आकार बदलने या उसके अंदर सामान फैलने / गिरने के कारण, संवाद एक बार दिखाए जाने के बाद अच्छी तरह से काम नहीं करेगा।

— डिरबायो

Answer 26

मॉडल को मौखिक रूप से मध्य सभी संवाद संरेखित करने के लिए।

/* ध्यान दें:

1. यदि आपको चयनकर्ता को असाइन करने की आवश्यकता नहीं है, तो यह दस्तावेज़ से सभी मोडल को ढूंढ लेगा और इसे मध्य में खड़ा कर देगा

2. बीच में कुछ विशिष्ट मोडल से बचें जो आपके उपयोग के लिए केंद्र हो: क्लिक इवेंट में चयनकर्ता नहीं

* /

 $( "[data-toggle='modal']" ).click(function(){
     var d_tar = $(this).attr('data-target'); 
     $(d_tar).show();   
     var modal_he = $(d_tar).find('.modal-dialog .modal-content').height(); 
     var win_height = $(window).height();
     var marr = win_height - modal_he;
     $('.modal-dialog').css('margin-top',marr/2);
  });

मिलन पंड्या से

Answer 27

इस सरल स्क्रिप्ट का उपयोग करें जो मॉडल्स को केंद्र में रखता है।

यदि आप चाहते हैं कि आप केवल कुछ मोडल की कार्यक्षमता को सीमित करने के लिए (.modal के बजाय .modal.modal-vcenter) एक कस्टम वर्ग सेट कर सकते हैं।

var modalVerticalCenterClass = ".modal";

function centerModals($element) {
    var $modals;
    if ($element.length) {
      $modals = $element;
    } else {
    $modals = $(modalVerticalCenterClass + ':visible');
}
$modals.each( function(i) {
    var $clone = $(this).clone().css('display', 'block').appendTo('body');
    var top = Math.round(($clone.height() - $clone.find('.modal-content').height()) / 2);
    top = top > 0 ? top : 0;
    $clone.remove();
    $(this).find('.modal-content').css("margin-top", top);
});
}
$(modalVerticalCenterClass).on('show.bs.modal', function(e) {
    centerModals($(this));
});
$(window).on('resize', centerModals);

मॉडल के क्षैतिज रिक्ति के लिए इस सीएसएस फिक्स को भी जोड़ें; हम मॉडल्स पर स्क्रॉल दिखाते हैं, बॉडी स्क्रॉल बूटस्ट्रैप द्वारा स्वचालित रूप से छिपाए जाते हैं:

/* scroll fixes */
.modal-open .modal {
  padding-left: 0px !important;
  padding-right: 0px !important;
  overflow-y: scroll;
}

Answer 28

इस सवाल का एक और सीएसएस जवाब ...
यह समाधान केवल वांछित प्रभाव को प्राप्त करने के लिए सीएसएस का उपयोग करता है जबकि अभी भी इसके बाहर क्लिक करके मोडल को बंद करने की क्षमता बनाए रखता है। यह आपको .modal-contentऊंचाई और चौड़ाई अधिकतम सेट करने की अनुमति देता है ताकि आपका पॉप-अप व्यूपोर्ट से आगे न बढ़े। जब मोडल आकार से परे सामग्री बढ़ती है तो एक स्क्रॉल स्वतः दिखाई देगा।

नोट:
अनुशंसित बूटस्ट्रैप .modal-dialog divको ठीक से काम करने के लिए इसे छोड़ दिया जाना चाहिए (कुछ भी नहीं लगता है)। क्रोम 51 और IE 11. सीएसएस कोड में परीक्षण किया गया

:

.modal {
   height: 100%;
   width: 100%;
}

.modal-content {
   margin: 0 auto;
   max-height: 600px;
   max-width: 50%;
   overflow: auto;
   transform: translateY(-50%);
}

संपादित करें:.modal-dialog वर्ग आप चुनते हैं या नहीं, यदि कोई उपयोगकर्ता मोडल खुद के बाहर क्लिक करके मोडल बंद कर सकते हैं अनुमति देता है। अधिकांश मॉडल्स में एक स्पष्ट 'करीब' या 'रद्द' बटन होता है। इस वर्कअराउंड का उपयोग करते समय इसे ध्यान में रखें।

Answer 29

चौड़ाई और ऊँचाई के साथ अपने मोडल को केंद्रीकृत करने का सबसे अच्छा उपाय है, सीएसएस ऐड में और मोडल में इस 'सेंट्रलाइज़' को पहले से जोड़ दें।

.centralize{
   position:absolute;
   left:50%;
   top:50%;

   background-color:#fff;
   transform: translate(-50%, -50%);
   width: 40%; //specify watever u want
   height: 50%;
   }

Answer 30

लंबवत रूप से मोडल को केंद्र में जोड़ने के लिए .modal-dialog- केंद्रित .modal- संवाद के लिए लंबवत केंद्रित

डेमो मोडल लॉन्च करें

<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalCenterTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>