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




css twitter-bootstrap (20)

@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');
});

मैंने सीधे बूटस्ट्रैप उदाहरण से अपने मोडल के लिए कोड का उपयोग किया है, और केवल bootstrap.js (और bootstrap-modal.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;
}

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


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

उदाहरण के लिए, .sidebarwrapper में 1100 की जेड-इंडेक्स है, इसलिए। Modal के z-index को 1101 पर सेट करें

.modal {
    z-index: 1101;
}

आपके navbar navbar-fixed-top z-index = 1041 और यदि आप .navbar-fixed-top, .navbar-fixed-bottom उपयोग करते हैं तो यह भी बदलता है। .navbar-fixed-top, .navbar-fixed-bottom z-index to 1041


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

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

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

इसे आज़माएं https://github.com/nakupanda/bootstrap3-dialog/releases/tag/v1.34.0

बूटस्ट्रैप मॉडल 3.3.0 मुख्य तत्व के अंदर मोडल-बैकड्रॉप उत्पन्न करता है, जबकि पहले इसे शरीर तत्व में जोड़ा जाता है।

उम्मीद है की यह मदद करेगा।


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

$('#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);
}); 

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

दुर्भाग्य से, कोर बूटस्ट्रैप सीएसएस को संशोधित या ओवरराइड करना अवांछित है, और अवांछित साइड इफेक्ट्स का कारण बन सकता है। कम से कम घुसपैठ दृष्टिकोण 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 से सीएसएस फ़ाइलों और जावास्क्रिप्ट फ़ाइलों को शामिल करना सुनिश्चित करें।


बस सीएसएस की दो पंक्तियां जोड़ें:

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

.modal-backdrop को navbar पर सेट करने के लिए 1050 मान होना चाहिए।


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

$("#myModal").modal("show");
$("#myModal").css("z-index", "1500");

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

बूटस्ट्रैप 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)

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

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

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


मेरे पास हल्का और बेहतर समाधान है ..

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

  1. कक्षा को छुपाएं। .modal-backdrop (Bootstrap.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> टैग के नजदीक नहीं है ..


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

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

केवल जेड-इंडेक्स को हटा दिया: 1 और कोई समस्या नहीं है कि समस्या को ठीक क्यों किया गया है। निश्चित रूप से सापेक्ष स्थिति को हटाने के लिए भी मुझे इसकी आवश्यकता थी।


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

काम क्या हुआ: .modal-backdrop के z-index को -1 तक सेट करना।

.modal-backdrop {
  z-index: -1;
}

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

.modal-backdrop {
    display:none;
}

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


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

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

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

  1. सबसे आसान तरीका केवल मोडल div को स्थानांतरित करना है ताकि यह किसी विशेष तत्व के साथ किसी भी तत्व से बाहर हो। एक अच्छी जगह बंद शरीर टैग </body> से ठीक पहले हो सकती है।
  2. वैकल्पिक रूप से, आप position: को हटा सकते हैं position: मोडल और उसके पूर्वजों से सीएसएस गुण जब तक समस्या दूर नहीं हो जाती। यह बदल सकता है कि पृष्ठ कैसे दिखता है और कार्य करता है, हालांकि।

रिश्तेदार को पूर्ण स्थिति बदलें।

.modal-backdrop {
    position: relative;
    /* ... */
}

वर्ग को ओवरराइट करने का प्रयास करें। छुपा से दृश्यमान से मोडल-ओपन ओवरफ़्लो मान।

.modal-open {
    overflow: visible;
}

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

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

खराब:

<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>

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

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

<div class="modal hide fade">

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

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

    </div>
  </div>

 </div>




modal-dialog