पृष्ठभूमि के नीचे दिखाई देने वाला बूटस्ट्रैप मोडल

576

मैंने सीधे बूटस्ट्रैप उदाहरण से अपने मोडल के लिए कोड का उपयोग किया है, और इसमें केवल बूटस्ट्रैप.js (और बूटस्ट्रैप-मोडल.जेएस) को शामिल नहीं किया है। हालांकि, मेरा मॉडल ग्रे फीका (पृष्ठभूमि) के नीचे दिखाई दे रहा है और गैर-संपादन योग्य है।

यहाँ यह कैसा दिखता है:

पृष्ठभूमि के पीछे छिपने का तरीका

इस समस्या को पुन: उत्पन्न करने के एक तरीके के लिए इस फिडेल को देखें । उस कोड की मूल संरचना इस प्रकार है:

<body>
    <p>Lorem ipsum dolor sit amet.</p>    

    <div class="my-module">
        This container contains the modal code.
        <div class="modal fade">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-body">Modal</div>
                </div>
            </div>
        </div>
    </div>
</body>
body {
    padding-top: 50px;
}

.my-module {
    position: fixed;
    top: 0;
    left: 0;
}

किसी भी विचार यह क्यों है या मैं इसे ठीक करने के लिए क्या कर सकता हूं?

javascript  css  twitter-bootstrap  modal-dialog 
— natlines
स्रोत
यदि कोई व्यक्ति खुले टैग्स आदि के लिए कुछ समय खोजता है, तो यह पता लगाने की कोशिश कर रहा है कि यह क्यों हो रहा है, मेरे लिए यह फीडली क्रोम एक्सटेंशन था जिसने मेरे मॉडल्स को तोड़ दिया। एक्सटेंशन को अक्षम करने से व्यवहार सामान्य हो गया।
— तीन
इस मामले में समस्या आईओएस पर थी और overflow-x: hiddenमॉडल के कंटेनर पर लागू होने के कारण हुई ।
— इदानीम
1
3 संस्करणों में 3 उदाहरण बनाए गए। 3.3.1 ठीक काम करता है और अन्य नहीं करते हैं। संस्करण 3.3.1 jsfiddle संस्करण 3.3.5 jsfiddle संस्करण 3.3.6 jsfoddle
— दिमित्री
1
बूटस्ट्रैप टीम के साथ एक बग रिपोर्ट बनाई गई ऐसा लगता है कि यह वास्तव में बग नहीं है यहां तक ​​कि सोचा कि यह 3.3.1 में ठीक काम करता है। मेरे द्वारा पोस्ट की गई लिंक में आप इसके बारे में अधिक पढ़ सकते हैं।
— दिमित्री
इस समस्या का सामना करने वाले किसी व्यक्ति के लिए प्रासंगिक ब्लॉग पोस्ट weblog.west-wind.com/posts/2016/Sep/14/…

जवाबों:

628

यदि मोडल कंटेनर में एक निश्चित या सापेक्ष स्थिति होती है या निश्चित या सापेक्ष स्थिति वाले तत्व के भीतर होती है तो यह व्यवहार होगा।

सुनिश्चित करें कि मोडल कंटेनर और उसके सभी मूल तत्व समस्या को ठीक करने के लिए डिफ़ॉल्ट तरीका है।

ऐसा करने के लिए यहां कुछ तरीके दिए गए हैं:

  1. सबसे आसान तरीका सिर्फ मोडल डिव को स्थानांतरित करना है ताकि यह विशेष स्थिति वाले किसी भी तत्व के बाहर हो। बॉडी टैग बंद होने से ठीक पहले एक अच्छी जगह हो सकती है </body>।
  2. वैकल्पिक रूप से, आप position:सीएसएस गुणों को मोडल और उसके पूर्वजों से हटा सकते हैं जब तक कि समस्या दूर नहीं हो जाती। हालाँकि यह परिवर्तित हो सकता है कि पृष्ठ कैसा दिखता है और कार्य करता है।
— Muhd
स्रोत
23
अच्छी पकड़। FYI करें, न केवल "निश्चित", माता-पिता के "रिश्तेदार" इस ​​समस्या का कारण बनता है
— Giang Nguyen
3
@Muhd आप कैसे सुनिश्चित करते हैं कि यह और इसके सभी मूल तत्व डिफ़ॉल्ट तरीके से तैनात हैं?
— इण्डागो
4
एक विकल्प का उपयोग करना पसंद करें: "बस मोडल डिव को स्थानांतरित करें ताकि यह विशेष स्थिति वाले किसी भी तत्व के बाहर हो"। Thx
— एमपीन
9
मुझे यह उत्तर समझ में नहीं आता। बूटस्ट्रैप के उदाहरणों में "मोडल", "मोडल-फेड" आदि की रेखा के साथ कई वर्गों के साथ एक मोडल div दिखाया जाता है। इनमोडल यह अंदर की स्थिति निर्धारित करता है: और "मोडल-बॉडी" के अंदर यह स्थिति को सापेक्ष बनाता है। तो कैसे मोडल कंटेनर को स्थानांतरित करने के लिए कुछ भी बदलने जा रहा है, जब .modal स्थिति निर्धारित करता है: निश्चित?
— कार्लोस
4
मुझे यह समस्या अब भी है। मैं इसे पहले जोड़ देता हूं </body>और bodyकोई positionस्टाइल अट्रिब्यूट नहीं करता। कोई अन्य विचार?
— तुआन अन्ह ट्रान
383

समस्या को मूल कंटेनरों की स्थिति के साथ करना है। आप आसानी से प्रदर्शित करने से पहले इन कंटेनरों से अपने मोडल को "स्थानांतरित" कर सकते हैं। यहाँ है कि यदि आप showअपने मॉडल का उपयोग कर रहे हैं तो यह कैसे करें :

$('#myModal').appendTo("body").modal('show');

या, यदि आप बटन का उपयोग करके मोडल लॉन्च करते हैं, तो ड्रॉप करें .modal('show');और बस करें:

$('#myModal').appendTo("body")

यह सभी सामान्य कार्यक्षमता रखेगा, आपको एक बटन का उपयोग करके मोडल दिखाने की अनुमति देगा।

— एडम अलब्राइट
स्रोत
12
उस सामान्य घटना हैंडलर का उपयोग करें, जिसके लिए आप सभी पेजों पर एक पृष्ठ में हो सकते हैं @leandrotk समाधान कार्य करें $('.modal-dialog').parent().on('show.bs.modal', function(e){ $(e.relatedTarget.attributes['data-target'].value).appendTo('body'); })
— पैट्रिक एम।
2
@PatrickM। गजब का! कि मैं एक पुराने प्रोजेक्ट पर एक आकर्षण की तरह काम कर रहा हूँ और वे सभी जगह पर थे!
— डेनिसलेक्सिक
5
यह बहुत अच्छा काम करता है जब आप वास्तव में CSS पोजीशनिंग को ठीक नहीं कर सकते। धन्यवाद :)
— अलेक्ससलाबोनी
क्या ऐसा कारण है कि जब मैं ऐसा करता हूं तो मैं सभी CSS प्रारूपण को ढीला कर देता हूं? और एक आसान तय? :-)
— यूजीन वैन डेर मेरवे
1
Leandrotk उत्तर से, बस #myModal को .modal में बदलने के लिए इस तरह देखें: $ ('' tal '')। appendTo ("body")। यह सभी मॉडल्स के साथ काम करेगा क्योंकि उनके पास डिफ़ॉल्ट क्लास मोडल है।
— नगाटिया फ्रैंकलाइन
170

मैंने ऊपर दिए गए सभी विकल्पों की कोशिश की, लेकिन उन का उपयोग करके काम करने के लिए नहीं मिला।

क्या काम किया: -Modal-backdrop के z-सूचकांक को -1 पर सेट करना।

.modal-backdrop {
  z-index: -1;
}
— जन वैन डर बर्गट
स्रोत
10
यह पूरी तरह से काम किया और अब तक का सबसे आसान उपाय है। मैंने इस्तेमाल कियाz-index: 0;
— andrewcockerham
यह भी पुष्टि कर सकता है कि केवल यह विकल्प काम करता है! धन्यवाद!
— फेरी क्रैननबर्ग
धन्यवाद! क्या यह बीएस 3 पर बग है?
— मोरिअलिंट
1
यदि आप एक ऐसे विषय का उपयोग कर रहे हैं, जिसमें कई अलग-अलग z- सूचकांक हैं। उदाहरण के लिए, पृष्ठभूमि सेट करने से -1यह पृष्ठ पर अन्य तत्वों जैसे पैनल के पीछे दिखाई देगा । लेकिन इसे 3मोडल पॉपअप को छोड़कर हर चीज के ऊपर स्थापित करना ।
— जस्टिन स्काइल्स
1
मुझे यह सबसे तेज़ तरीका लगा और साथ ही साथ उत्तर में दिए गए सुझावों को समाप्त करने के बाद यह सबसे तेज़ तरीका है। मेरे मामले में 1060 के जेड-इंडेक्स के लिए मोडल-डायलॉग क्लास के साथ डिव को सेट करके इसे ओवरले के सामने पॉप किया गया। यदि आप नेवबार का उपयोग करते हैं, तो आप ओवरले के ऊपर वाले मोडल को स्थानांतरित करना चाहेंगे, न कि किसी अन्य तरीके से, अन्यथा आपका नेवले ओवरले के शीर्ष पर पॉप हो सकता है ... अराजकता के कारण ...
— माइक डीवेननी
152

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

उदाहरण के लिए:

खराब:

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

अच्छा:

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
— सिड
स्रोत
मेरे लिए भी यही था। धन्यवाद!
— पेड्रोतनका
बस एक ही समस्या थी, एक ही संस्करण स्टाइलशीट समाधान ने सभी की मदद की है! धन्यवाद
— HGB
धन्यवाद, यह मेरी सटीक समस्या थी
— माल्क
कोई समस्या नहीं है, जबकि मैंने इस बग का पता लगाने में बहुत समय बिताया है। जैसा कि हम देखते हैं कि '14 में था, अब '16 है, बग अभी भी मौजूद है। वास्तव में यह एक बग नहीं है, लेकिन बूटस्ट्रैप लेखकों में इसे अपने प्रलेखन या कुछ और में जोड़ना चाहिए ..
— सिड
यहाँ एक ही सौदा है, हम अपने SASS को जेनरेट करने के लिए बदल गए और पूरी तरह से js फाइल के बारे में ही भूल गए। यह शीर्ष उत्तर होने की आवश्यकता है .. जैसा कि हमारा मोडल हमेशा डिफ़ॉल्ट रूप से शामिल होता है शरीर के करीब टैग से पहले ...
— Angry 84
116

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

<div class="modal fade" id="createModal" data-backdrop="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4>Create Project</h4>
            </div>
            <div class="modal-body">Not yet made</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

नोट : data-backdropविशेषता को false( अन्य विकल्प : staticया true) पर सेट करने की आवश्यकता है ।

— PieterVK
स्रोत
2
अब तक का सबसे आसान उपाय, और एक आकर्षण की तरह काम करता है!
— learning_to_swim
प्रतिभाशाली! मुझे बूटस्ट्रैप की भी आवश्यकता थी - यह निश्चित नहीं था कि मेरे अन्य बूटस्ट्रैप की कार्यक्षमता ठीक क्यों है, लेकिन मुझे मोडल काम करने की आवश्यकता है।
— klein
उत्तम !!! एक दिन के लिए संघर्ष किया .. और यू ने मेरा एक और दिन बचाया। धन्यवाद फिर से .. +1 और चीयर्स
— भास्कर
1
सभी समाधानों को ध्यान से पढ़ने के बाद, मैंने इसे बूटस्ट्रैप और jQuery के संस्करण के रूप में सबसे समझदार पाया। धन्यवाद।
— एन्क्रिप्शन
3
धन्यवाद! इस सवाल के 140k से अधिक विचार हैं और मुझे समझ नहीं आता कि बूटस्ट्रैप इसे ठीक क्यों नहीं कर सकता है। ओह ठीक है, चीयर्स।
— चाड
58

मुझे इसे खोलने के लिए मोडल विंडो AFTER को एक उच्च z- इंडेक्स मूल्य देकर काम करने के लिए मिला । उदाहरण के लिए:

$("#myModal").modal("show");
$("#myModal").css("z-index", "1500");
— एंड्रयू Dyster
स्रोत
क्या यह काम कर रहा है (आदमी कहता है कि यह है), आप वोट क्यों करते हैं? जैसा कि मैं देख रहा हूं ऐसा लगता है कि यह होगा।
— Rolice
हाँ, किसी को भी समझा सकते हैं कि यह एक बुरा जवाब क्यों है? क्या यह सिर्फ इतना है कि यह एक तरह से हैकी है?
— ब्रांडोन्स
6
मैं नीचे के मतों को नहीं समझता। हां, यह हैकरी है, लेकिन अन्य समाधान मेरे लिए काम नहीं करते थे इसलिए मैंने सोचा कि मैं उन लोगों के लिए योगदान दूंगा जो "हैकी" समाधानों का उपयोग करने में कोई आपत्ति नहीं करते हैं बस काम करने के लिए लानत है।
— एंड्रयू डिस्टर
यह मेरे विशेष मुद्दे के लिए एक पूर्ण स्क्रीन तत्व पर एक मोडल लगाने के लिए प्रासंगिक अंतर्दृष्टि थी। +1
— जैक स्टोन
3
यह एक बुरा जवाब है क्योंकि यह एक हैक है और यह इंगित करने के लिए कोई प्रयास नहीं करता है। अन्य उत्तर कहते हैं, "अगर कुछ और काम नहीं करता तो आप कर सकते थे ..."। वास्तविकता यह है कि मोडल पूरे वेब में बहुत व्यापक रूप से उपयोग किया जाता है और यदि सही ढंग से लागू किया जाता है तो काम करना चाहिए। हैकी उत्तर लोगों को यह पता लगाने में मदद नहीं करते हैं कि चीजों को सही तरीके से कैसे किया जाए।
— लुकोस
35

@Muhd द्वारा प्रदान किया गया समाधान इसे करने का सबसे अच्छा तरीका है। लेकिन अगर आप ऐसी स्थिति में फंस गए हैं जहां पेज की संरचना बदलना कोई विकल्प नहीं है, तो इस ट्रिक का उपयोग करें:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="false" style="background-color: rgba(0, 0, 0, 0.5);">
<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>

यहाँ पर ट्रिक data-backdrop="false" style="background-color: rgba(0, 0, 0, 0.5);" डिफॉल्ट बैकड्रॉप को हटाकर एक डमी का निर्माण करती है, जिसमें कुछ अल्फा के साथ ही डायलॉग का बैकग्राउंड कलर सेट किया जाता है।

अद्यतन 1: जैसा कि @Gustyn द्वारा बताया गया है कि पृष्ठभूमि पर क्लिक करना संवाद को बंद नहीं करता है जैसा कि अपेक्षित है। तो इसे प्राप्त करने के लिए आपको कुछ जावा स्क्रिप्ट कोड जोड़ना होगा। यहां कुछ उदाहरण दिए गए हैं कि आप इसे कैसे प्राप्त कर सकते हैं। 

$('.modal').click(function(event){
    $(event.target).modal('hide');
});
— कृष्णेंदु
स्रोत
यह काम करता है सिवाय इसके कि पृष्ठभूमि पर क्लिक करना संवाद को बंद नहीं करता है जैसा कि अपेक्षित है।
— गुस्टन
कृष्णेंदु यू मेरे हीरो हैं। मैं कयामत और उदासी को ध्यान में रखकर काम करने आया था। मेरी अंतिम प्रस्तुति से 3 दिन पहले इस मुद्दे का सामना करना पड़ रहा था कि अचानक कम से कम कहने के लिए सभी परेशान थे। यू मेरे दोस्त के लायक १००००० अपवोट्स हैं अलस केवल यू दे सकते हैं :) एक अद्भुत धन्य दिन है।
— DotNetBeginner
जब मैं यह कोशिश करता हूं, तो यह पृष्ठ की पूरी पृष्ठभूमि को कवर नहीं करता है - बस दिव्य तत्व जिसे मॉडल घोषित किया गया है
— सैम
पूरी तरह से काम किया। धन्यवाद!
— जफर
पूरी तरह से काम किया। धन्यवाद!
— मयंक पांडेयज
16

इस पर देर से लेकिन यहाँ एक सामान्य समाधान है -

    var checkeventcount = 1,prevTarget;
    $('.modal').on('show.bs.modal', function (e) {
        if(typeof prevTarget == 'undefined' || (checkeventcount==1 && e.target!=prevTarget))
        {  
          prevTarget = e.target;
          checkeventcount++;
          e.preventDefault();
          $(e.target).appendTo('body').modal('show');
        }
        else if(e.target==prevTarget && checkeventcount==2)
        {
          checkeventcount--;
        }
     });

इस लिंक पर जाएं - बूटस्ट्रैप 3 - विवरण के लिए एक निश्चित साइडबार का उपयोग करते समय पृष्ठभूमि के नीचे गायब होने वाले मोडल ।

— रोहन
स्रोत
यह एक WordPress प्लगइन के लिए एक सही समाधान था जो मैं बना रहा था जहां मैं अन्य लोगों के विषयों पर मूल तत्वों को नियंत्रित नहीं कर सका।
— मार्क रोममेल
अब तक का सबसे अच्छा समाधान!
— digz6666
10

इसे अप्रोच करने का एक और तरीका है कि बूट .modal-backdrop-स्ट्रैप। Zs से z- इंडेक्स को हटा दिया जाए । यह पृष्ठभूमि आपके शरीर के बाकी हिस्सों के समान स्तर पर होगा (यह अभी भी फीका हो जाएगा) और आपका मोडल शीर्ष पर होगा।

.modal-backdrop इस तरह दिखता है

.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #000000;
}
— सैमुअल बर्जरॉन
स्रोत
10

बस सीएसएस की दो लाइनें जोड़ें:

.modal-backdrop{z-index: 1050;}
.modal{z-index: 1060;}

.मॉडल-बैकड्रॉप को नेवबार पर सेट करने के लिए 1050 मान होना चाहिए।

— वाहु प्रिमदि
स्रोत
अच्छा लगा, लेकिन अगर मॉडल के कंटेनर में position: fixedयह काम नहीं करेगा।
— CPHPython
10

यह किसी भी एनिमेशन या अपेक्षित व्यवहार को गड़बड़ाने के बिना सभी तरीकों को कवर करेगा। 

$(document).on('show.bs.modal', '.modal', function () {
  $(this).appendTo('body');
});
— कैम टुल्लोस
स्रोत
1
वैश्विक समाधान। हालांकि यह समस्या को खोजने के लिए बेहतर है।
— मिलाद अबोआली
मुझे नहीं लगता कि एक महान समाधान है, बहुत सारे मोडल वाले पृष्ठों के बारे में क्या? गड़बड़ हो सकती है।
— ग्लेन
क्या आप बता सकते हैं कि यह कैसे गड़बड़ हो जाएगा? यह सब वह कर रहा है जहां वर्तमान में डोम से बॉडी टैग के अंत तक मोडल चल रहा है। यह कुछ भी पैदा नहीं कर रहा है जो पहले से ही नहीं है, बस इसे आगे बढ़ाना और स्वचालित रूप से इसे शीर्ष z- सूचकांक देना।
— कैम टुल्लोस
सबसे अच्छा समाधान मुझे लगता है। किसी भी सीएसएस को संपादित करने और मोडल उपस्थिति को बदलने की आवश्यकता नहीं है
— मोस्लेम 7026
8

मैंने बस सेट किया है:

#myModal {
    z-index: 1500;
}

और यह काम करता है ...।

मूल प्रश्न के लिए: 

.my-module {
    z-index: 1500;
}
— AmintaCode
स्रोत
मेरा मुद्दा जेड-इंडेक्स भी था।
— जेम्स लॉक
8

पृष्ठभूमि या यहां तक ​​कि समझौते हेडर जैसी चीजों के लिए सीएसएस में ग्रेडिएंट जैसी चीजों का उपयोग करते समय अक्सर इस समस्या का अनुभव किया जा सकता है।

दुर्भाग्य से, कोर बूटस्ट्रैप सीएसएस को संशोधित या ओवरराइड करना अवांछनीय है, और इससे अवांछित दुष्प्रभाव हो सकते हैं। जोड़ने के लिए कम से कम घुसपैठ दृष्टिकोण है, data-backdrop="false"लेकिन आप देख सकते हैं कि फीका प्रभाव अब अपेक्षा के अनुरूप काम नहीं करता है।

बूटस्ट्रैप की हालिया रिलीज़ के बाद, संस्करण 3.3.5 इस मुद्दे को बिना किसी अवांछित प्रभाव के हल करता है।

डाउनलोड करें: https://github.com/twbs/bootstrap/releases/download/v3.3.5/bootstrap-3.3.5-dist.zip

3.3.5 से CSS फाइलों और जावास्क्रिप्ट फ़ाइलों को शामिल करना सुनिश्चित करें।

— रिचर्ड नेलज़िनस्की
स्रोत
6

नमस्ते, मेरे पास एक ही मुद्दा था तब मुझे एहसास हुआ कि जब आप बूटस्ट्रैप 3.1 का उपयोग कर रहे थे, तो बूटस्ट्रैप (2.3.2) के पुराने संस्करणों के विपरीत मोडल की HTML संरचना को बदल दिया गया था!

आपको अपने मोडल हैडर बॉडी और पाद को मोडल-डायलॉग और मोडल-कंटेंट के साथ लपेटना होगा 

<div class="modal hide fade">

  <div class="modal-dialog">
    <div class="modal-content">

    **here goes the modal header body and footer**

    </div>
  </div>

 </div>
— talsibony
स्रोत
+1 सुनिश्चित करें कि आप bootstrap.css और bootstrap.js के संगत संस्करणों का उपयोग कर रहे हैं और यह कि आपका मार्कअप आपके द्वारा उपयोग किए जा रहे संस्करण से मेल खाता है।
— srayner
हाँ यह वही है जो मेरा निष्कर्ष था और मैंने इसे यहाँ लिखा था यदि किसी के पास यह मुद्दा था।
— talsibony
जीसस क्राइस्ट, यह उत्तर गहरे दफन है। बूटस्ट्रैप के लिए एक ही मामला 4.
— रैंडल
6

ऊपर सुझाए गए किसी भी समाधान ने मेरे लिए काम नहीं किया लेकिन इस तकनीक ने इस समस्या को हल कर दिया:

$('#myModal').on('shown.bs.modal', function() {
   //To relate the z-index make sure backdrop and modal are siblings
   $(this).before($('.modal-backdrop'));
   //Now set z-index of modal greater than backdrop
   $(this).css("z-index", parseInt($('.modal-backdrop').css('z-index')) + 1);
});
— जावेद इकबाल
स्रोत
मैं इस तरह से पसंद करता हूं क्योंकि मैंने अन्य विधियों के साथ सीएसएस प्रारूपण खो दिया है।
— यूजीन वैन डेर मेरवे
6

मेरे पास यह मुद्दा था और इसे ठीक करने का सबसे आसान तरीका था कि मॉड-डायलॉग डिव पर 1040 से अधिक का z-index जोड़ें:

<div class="modal-dialog" style="z-index: 1100;">

मेरा मानना ​​है कि बूटस्ट्रैप एक div modal-backdrop फीका बनाता है जिसमें मेरे मामले में z-index 1040 है, इसलिए यदि आप इस के ऊपर modal-डायलॉग लगाते हैं, तो इसे अब और ग्रे नहीं होना चाहिए।

— क्रिस रोज़े
स्रोत
6

मेरे पास एक हल्का और बेहतर उपाय है ।।

यह आसानी से कुछ अतिरिक्त सीएसएस शैलियों के माध्यम से हल किया जा सकता है ..

  1. वर्ग छिपाएँ .modal-backdrop(बूटस्ट्रैप से उत्पन्न ऑटो। js)

    .modal-backdrop
{
display:none;
visibility:hidden; 
position:relative
}

  2. .modalपारभासी काली पृष्ठभूमि छवि की पृष्ठभूमि सेट करें ।

    .modal
{
background:url("http://bin.smwcentral.net/u/11361/BlackTransparentBackground.png")
// translucent image from google images 
z-index:1100; 
}

यह सबसे अच्छा काम करेगा यदि आपके पास एक आवश्यकता है जो एक तत्व के अंदर होने की आवश्यकता है और </body>टैग के पास नहीं है ।।

— जेएम टी
स्रोत
आपने मेरा दिन बचाया ... यह एक अच्छा विकल्प है!
— नॉट
@xunga, कोई चिंता नहीं। कृपया इस समाधान को अन्य लोगों के साथ साझा करें :)
— JM Tee
आप यहाँ संपादन देख सकते हैं ... stackoverflow.com/posts/42887253/revisions
— notme
धन्यवाद जेएम, आपका समाधान केवल एक ही था जिसने मेरे लिए काम किया।
— अहमद जे
5

z-index .modal को उच्चतम मान पर सेट करें

उदाहरण के लिए, .sidebarwrapper का z-index 1100 है, इसलिए .modal का z-index 11 पर सेट करें

.modal {
    z-index: 1101;
}
— ए मोहुदुम कामिल
स्रोत
5

मेरे मामले में इसे हल करें, इसे मेरी स्टाइलशीट में जोड़ें:

.modal-backdrop{
  z-index:0;
}
स्निपेट का विस्तार करें

Google डिबगर के साथ, तत्व BACKDROP और विशेषताओं को संशोधित कर सकता है। खुशकिस्मती।

— केकेविन ओवल
स्रोत
3

अपने नौसिखिया navbar-fixed-topजरूरत में z-index = 1041 और भी अगर यू bootstarp-combined.min.cssभी परिवर्तन का उपयोग करें .navbar-fixed-top, .navbar-fixed-bottom z-index to 1041

— मोहसिन
स्रोत
3

आप .modal-backdrop से z-index को भी हटा सकते हैं। परिणामी सीएसएस इस तरह दिखेगा।

.modal-backdrop {
}
  .modal-backdrop.in {
    opacity: .35;
    filter: alpha(opacity=35); }
— मैथ्यू गैलीगोस
स्रोत
3

मैंने मोडल बैकड्रॉप को हटा दिया।

.modal-backdrop {
    display:none;
}

यह बेहतर समाधान नहीं है, लेकिन मेरे लिए काम करता है।

— CodeBriefly
स्रोत
3

मुझे क्या मिल रहा है:

बूटस्ट्रैप 3.3.0 में यह सही नहीं है, लेकिन जब बूटस्ट्रैप 3.3.5 में यह सही है। कोड देखें। 3.3.0:

this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />')
    .prependTo(this.$element)

3.3.5

  this.$backdrop = $(document.createElement('div'))
        .addClass('modal-backdrop ' + animate)
        .appendTo(this.$body)
— ttong
स्रोत
3

इसे आप पृष्ठों में जोड़ें। यह मेरे लिए काम करता है।

<script type="text/javascript">
    $('.modal').parent().on('show.bs.modal', function (e) { $(e.relatedTarget.attributes['data-target'].value).appendTo('body'); })
</script>
— मैंने लिया
स्रोत
3

मुझे यह DIV टैग के नीचे शैली जोड़कर तय किया गया था

style="background-color: rgba(0, 0, 0, 0.5);"

और कस्टम css जोड़ें

.modal-backdrop {position: relative;}
— RaymondLe
स्रोत
3

मेरे लिए सबसे आसान उपाय यह था कि मैं अपने मोडल को पूरी तरह से स्थिति और z- इंडेक्स के साथ एक आवरण में रख दूं। चूंकि मॉडल-बैकड्रॉप (कम से कम मेरे मामले में) में जेड-इंडेक्स 1050 है:

.my-modal-wrapper {
  position: absolute;
  z-index: 1060;
}
<div class="my-modal-wrapper"></div>
स्निपेट का विस्तार करें

— sivi911
स्रोत
z-index ने मेरे लिए काम किया। बहुत बहुत धन्यवाद।
— आसिफ इकबाल
2

मेरे मामले में, मेरे पास निम्नलिखित के साथ एक आवरण था:

.wrapper { margin: 0 auto; position:relative; z-index:1;overflow:hidden;}

केवल z-index: 1 को हटा दिया और पता नहीं क्यों समस्या को ठीक किया। यह भी सुनिश्चित करने के लिए रिश्तेदार की स्थिति को हटा दिया, लेकिन मुझे इसकी आवश्यकता थी।

— hsobhy
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.