ट्विटर बूटस्ट्रैप स्क्रॉलेबल मोडल

Question

मैं जिस प्रोजेक्ट पर काम कर रहा हूं, उसके लिए ट्विटर बूटस्ट्रैप का उपयोग कर रहा हूं।

मेरे पास एक मोडल विंडो है, जिसमें कुछ हद तक लंबा रूप है और मुझे यह पसंद नहीं आया कि जब खिड़की बहुत छोटी हो गई तो मोडल स्क्रॉल नहीं हुआ (यदि मेरे पृष्ठ से गायब हो गया जो स्क्रॉल करने योग्य नहीं है)।

इसे ठीक करने के लिए मैंने निम्नलिखित सीएसएस का उपयोग किया

.modal {
    overflow-y:auto;
    max-height:90%;
    margin-top:-45%;
}

यह ठीक उसी तरह से काम करता है, जैसा कि मैं इसे क्रोम में चाहता हूं (यानी, विंडो के बड़े होने पर फॉर्म पूर्ण आकार का होता है, लेकिन जैसे-जैसे विंडो मोडल सिकुड़ती है और स्क्रॉल होती जाती है)। समस्या यह है कि IE में मोडल स्क्रीन बंद है। क्या किसी के पास इस समस्या का बेहतर समाधान है?

मेरा उदाहरण smallhousemap.com पर पाया जा सकता है (मोडल दिखने के लिए नेविगेशन विंडो में 'मानचित्र में प्रवेश जोड़ें' पर क्लिक करें)

धन्यवाद

Comments

मैंने पाया और इस समाधान का उपयोग कर रहा था। यह बहुत ही चालाक है कि यह केवल बूटस्ट्रैप मोडल को स्क्रॉल करने की अनुमति देता है न कि पृष्ठभूमि सामग्री को। github.com/aroc/Bootstrap-Scroll-Modal

— रिचर्ड एडलेटा

Answer 1

नीचे दिए गए समाधान के बारे में कैसे? इसने मेरे लिए काम किया। इसे इस्तेमाल करे:

.modal .modal-body {
    max-height: 420px;
    overflow-y: auto;
}

विवरण:

1. हटाने overflow-y: auto;या overflow: auto;.modal वर्ग (महत्वपूर्ण) से
2. कक्षा max-height: 400px;से निकालें .modal(महत्वपूर्ण)
3. जोड़े max-height: 400px;को .modal .modal शरीर (या कभी क्या, हो सकता है 420pxया उससे कम है, लेकिन अधिक से अधिक नहीं जाना होगा 450px)
4. जोड़े overflow-y: auto;को.modal .modal-body

हो गया, केवल शरीर स्क्रॉल करेगा।

Comments

मुझे यह अपने दम पर मिला है, लेकिन वास्तव में यह सबसे सामान्य हर के बजाय खिड़की परमिट के रूप में लंबा होना चाहता था। लेकिन निर्दिष्ट करने से max-height: 80%;काम नहीं चलता, यह स्क्रॉल करने के बजाय फैलता है। क्या मुझे समायोजित करने के लिए आकार बदलने वाली घटनाओं का उपयोग करना होगा $(".modal")[0].style.maxHeight?

— पीटर

Answer 2

मैं केवल jQuery का उपयोग कर एक छोटे से समाधान किया है।

सबसे पहले, आपको <div class="modal-body">"एटिवा-स्क्रॉल" नामक अपने अतिरिक्त वर्ग को रखने की आवश्यकता है , इसलिए यह कुछ इस तरह से हो जाता है:

<div class="modal-body ativa-scroll">

तो अब बस अपने जेएस लोडिंग के पास, इस कोड को अपने पेज पर डालें:

<script type="text/javascript">
  $(document).ready(ajustamodal);
  $(window).resize(ajustamodal);
  function ajustamodal() {
    var altura = $(window).height() - 155; //value corresponding to the modal heading + footer
    $(".ativa-scroll").css({"height":altura,"overflow-y":"auto"});
  }
</script>

मैं मेरे लिए पूरी तरह से काम करता हूं, एक संवेदनशील तरीके से भी! :)

Comments

महान समाधान, लेकिन मैं ऊंचाई को अधिकतम ऊंचाई में बदल

— ओलेग

इसके अलावा, आप $ ('मोडल') का उपयोग कर सकते हैं। ('show.bs.modal', function (e) {}); साइज़िंग फंक्शन को ट्रिगर करने के लिए। यह केवल आवश्यकतानुसार आकार की गणना करेगा, हर आकार और लोड पर नहीं। आपको बस ईवेंट के फ़ंक्शन के भीतर जांचने की आवश्यकता है यदि वर्तमान मोडल सीएसएस की गणना / आवेदन करने से पहले कस्टम स्क्रॉल ऊंचाई का उपयोग करता है। यानी var ScrollModal = $ ('। modal-body.modal-scroll', यह); if (ScrollModal.length) ...

— रॉबर्ट वाडेल

क्या यह बूटस्ट्रैप 2 या 3 के लिए है?

— जासूस

Answer 3

/* Important part */
.modal-dialog{
    overflow-y: initial !important
}
.modal-body{
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

यह जेएस कोड के बिना बूटस्ट्रैप 3 के लिए काम करता है और उत्तरदायी है।

स्रोत

Comments

वह बूटस्ट्रैप 2 या 3 है? प्रश्न बूटस्ट्रैप 2 के लिए सबसे अधिक संभावना पोस्ट किया गया

— जासूस

@spy यह बूटस्ट्रैप 3 के लिए है

— Guillaume Renoult

Answer 4

बूटस्ट्रैप का प्रयास करें और ओवरराइड करें:

 .modal {
position: fixed;

साथ में:

.modal {
position: absolute;

इसने मेरे लिए काम किया।

Comments

यह IPad पर संरेखण के मुद्दे का कारण बनता है

— ओलेग

Answer 5

मैंने भी जोड़ा

.modal { position: absolute; }

स्टाइलशीट को संवाद को स्क्रॉल करने की अनुमति देने के लिए, लेकिन अगर उपयोगकर्ता एक लंबे पृष्ठ के निचले हिस्से में चला गया है तो मोडल दृश्य क्षेत्र के शीर्ष से छिपा हुआ समाप्त हो सकता है।

मैं समझता हूं कि यह बूटस्ट्रैप 3 में अब कोई समस्या नहीं है, लेकिन अपेक्षाकृत जल्दी ठीक होने की तलाश में है जब तक हम अपग्रेड नहीं कर लेते हैं मैं ऊपर दिए गए प्लस के साथ समाप्त होने से पहले मोडल खोलने से पहले कॉल करता हूं।

$('.modal').css('top', $(document).scrollTop() + 50);

फ़ायरफ़ॉक्स, क्रोम, IE10 8 और 7 में खुश होना लगता है (जिन ब्राउज़र को मुझे सौंपना था)

Answer 6

आपका मोडल फ़ायरफ़ॉक्स में छुपाया जा रहा है, और इसका कारण यह है कि आपके सामान्य स्टाइलशीट के अंदर नकारात्मक मार्जिन घोषणा है:

.modal {
    margin-top: -45%; /* remove this */
    max-height: 90%;
    overflow-y: auto;
}

नकारात्मक मार्जिन निकालें और सब कुछ ठीक काम करता है।

Comments

मार्जिन-टॉप को हटाने से मोडल में सुधार हुआ, ताकि यह IE में स्क्रीन से दूर न हो, लेकिन अब यह केवल एक विशिष्ट विंडो आकार में स्क्रीन पर केंद्रित (लंबवत) है। अन्य सभी आकार स्क्रीन के ऊपर या नीचे से ओवरफ्लो करते हैं।

— डैन डॉट नेट

@ डंडोटनेट अपने आप विंडो के शीर्ष से 50% अपने आप स्थिति में आ जाता है, आप इसे 10% से कुछ कम के साथ अधिलेखित कर सकते हैं, लेकिन यदि आपने एक नकारात्मक मान जोड़ा है तो यह स्क्रीन को बंद कर देगा जैसे IE में होता है। वैसे, फ़ायरफ़ॉक्स में भी ऐसा ही होता है।

— एंड्रेस इलिच

Answer 7

उपयोग करने के मामले में .modal {overflow-y: auto;}, पेज के दाईं ओर अतिरिक्त स्क्रॉल बार बनाएगा, जब बॉडी पहले से ही ओवरफ्लो होती है।

इसके लिए आस-पास का काम अस्थायी रूप से बॉडी टैग से ओवरफ्लो को दूर करना है और मोडल ओवरफ्लो-वाई को ऑटो में सेट करना है ।

उदाहरण:

$('.myModalSelector').on('show.bs.modal', function () {

        // Store initial body overflow value
        _initial_body_overflow = $('body').css('overflow');

        // Let modal be scrollable
        $(this).css('overflow-y', 'auto');
        $('body').css('overflow', 'hidden');


    }).on('hide.bs.modal', function () {

        // Reverse previous initialization
        $(this).css('overflow-y', 'hidden');
        $('body').css('overflow', _initial_body_overflow);
});

Answer 8

@ ग्रेनेस्टल के सीएसएस समाधान (जो ज्यादातर काम करता है) के साथ समस्या यह है कि यह कीबोर्ड पर पॉप अप होने पर (और जब वे मोडल डायलॉग में इनपुट में क्लिक करते हैं) पूरी तरह से उत्तरदायी और मोबाइल पर है। स्क्रीन का आकार बदलता है और मोडल डायलॉग का आकार बदलता है और यह उस इनपुट को छिपा सकता है जिस पर उन्होंने क्लिक किया था ताकि वे यह नहीं देख सकें कि वे क्या टाइप कर रहे हैं।

मेरे लिए बेहतर समाधान निम्नानुसार jquery का उपयोग करना था:

$(".modal-body").css({ "max-height" : $(window).height() - 212, "overflow-y" : "auto" });

यह खिड़की के आकार को बदलने के लिए उत्तरदायी नहीं है, लेकिन ऐसा वैसे भी नहीं होता है।

Answer 9

मैं .modal-body element पर अधिकतम ऊंचाई के साथ "vh" मीट्रिक का उपयोग करके इसे दूर करने में सक्षम था। 70vh मेरे उपयोग के लिए सही के बारे में देखा। फिर ओवरफ्लो-वाई को ऑटो पर सेट करें ताकि जरूरत पड़ने पर ही वह स्क्रॉल करे।

.modal-body {
   overflow-y: auto;
   max-height: 70vh;
}

Answer 10

इसमें से कोई भी अपेक्षा के अनुसार काम नहीं करेगा .. सही तरीका स्थिति बदलने के लिए है: स्थिति के लिए तय किया गया है: .modal वर्ग के लिए निरपेक्ष

Comments

आप अपने निष्कर्ष का आधार क्या है?

— राफेल हर्सकोविसी