दिलचस्प पोस्ट
Django आराम फ्रेमवर्क csrf निकालें क्या मैं डिस्पोज़ () डाटासेट और डाटाटेबल? स्ट्रिंग से विशिष्ट यूनिकोड श्रेणी के पात्रों को निकालते हैं क्या मुझे पृथक वातावरण बनाने के लिए आवारा या डॉकर का उपयोग करना चाहिए? छुपा UIViews के साथ AutoLayout? इकाई फ़्रेमवर्क बहुत धीमा है मेरे विकल्प क्या हैं? PostgreSQL अलग आदेश के साथ पर अलग सीएसएस: एक <div> तत्व के भीतर केंद्र तत्व जावास्क्रिप्ट स्विच बनाम अगर … और अगर … और नोड मॉड्यूल को स्थापित नहीं किया जा सकता जिसे Windows 7 x64 / VS2012 पर संकलन की आवश्यकता है मैं जासूस ++ चाहता हूं लेकिन मेरे पास विजुअल स्टूडियो नहीं है सुपर क्लास से उपवर्ग विधि को कॉल करना रिमोट रिपॉजिटरी पर इतिहासबद्ध करें अजगर में ऑब्जेक्ट एट्रिब्यूट्स को बदलना डेटाफ्रेम सेल के अंदर एक सूची को अलग-अलग पंक्तियों में कैसे विस्फोट करना

पृष्ठभूमि के नीचे प्रदर्शित बूटस्ट्रैप मोडल

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

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

वेब के समाधान से एकत्रित समाधान "पृष्ठभूमि के नीचे प्रदर्शित बूटस्ट्रैप मोडल"

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

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

ऐसा करने के दो तरीके हैं:

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

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

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

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

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

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

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

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

खराब:

 <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/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> 

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

क्या काम किया था: -1 के लिए। -मॉडल-बैकड्रॉप के z- अनुक्रमणिका सेट करना

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

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

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

ध्यान दें कि डाटा-बैकड्रॉप विशेषता को गलत पर सेट किया गया है

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

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

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

 <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: जैसा कि गस्टिन ने बताया है कि पृष्ठभूमि पर क्लिक करने से संवाद समाप्त नहीं होता है तो यह हासिल करने के लिए आपको कुछ जावा स्क्रिप्ट कोड जोड़ना होगा। यह कुछ उदाहरण है कि आप इसे कैसे प्राप्त कर सकते हैं

 $('.modal').click(function(event){ $(event.target).modal('hide'); }); 

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

  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 – विवरण के लिए एक निश्चित साइडबार का उपयोग करते समय पृष्ठभूमि के नीचे गायब होने वाला मोडल ।

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

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

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

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

 #myModal { z-index: 1500; } 

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

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

 .my-module { z-index: 1500; } 

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

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

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

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

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

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

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

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

एक उच्चतम मूल्य के लिए z-index.modal सेट करें

उदाहरण के लिए, .barbarwrapper में 1100 के z- इंडेक्स हैं, इस प्रकार से z-index को .1100

 .modal { z-index: 1101; } 

आपके नेवबार में navbar-fixed-top z-index = 1041 ज़रूरत होती है और अगर आप .navbar-fixed-top, .navbar-fixed-bottom bootstarp-combined.min.css का भी उपयोग करते हैं तो .navbar-fixed-top, .navbar-fixed-bottom z-index to 1041

नमस्ते मुझे एक ही मुद्दा था, तो मुझे पता है कि जब आप बूटसाप 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-backdrop { position: relative; /* ... */ } 

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

 .modal-backdrop { } .modal-backdrop.in { opacity: .35; filter: alpha(opacity=35); } 

अपने मॉडल में इसका प्रयोग करें:

 data-backdrop="false" 

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

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

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

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

  1. क्लास छुपाएं। .modal-backdrop (बूटस्ट्रैप .modal-backdrop उत्पन्न ऑटो)

     .modal-backdrop { display:none; visibility:hidden; position:relative } 
  2. एक पारभासी काले पृष्ठभूमि छवि के लिए। .modal की पृष्ठभूमि सेट करें।

     .modal { background:url("http://img.hiwab.com/javascript/BlackTransparentBackground.png") // translucent image from google images z-index:1100; } 

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

 $('.modal').insertAfter($('body')); 

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

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

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

मेरे मामले में, इसका कारण boostrap.min.css था 🙂 एक बार जब मैंने इसे हटा दिया, तो मेरी एचटीएमएल फ़ाइल को एक संदर्भ के रूप में बनाया गया था, तो संवाद ने मोडल साइड के फर्न में दिखाया था 🙂

मैंने मोडल पृष्ठभूमि को हटा दिया।

 .modal-backdrop { display:none; } 

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

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

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

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

 .modal-backdrop {position: relative;} 

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

 $(document).on('show.bs.modal', '.modal', function () { $(this).appendTo('body'); }); 

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

 .modal-open { overflow: visible; } 

इसे बाहर की कोशिश करें https://github.com/nakupanda/bootstrap3-dialog/releases/tag/v1.34.0

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

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