बूटस्ट्रैप मोडल: बैकग्राउंड टॉप टू टॉगल पर कूदता है

111

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

मैंने एक समाधान / आदि खोजने के लिए सब कुछ किया है, लेकिन मैं वास्तव में खो गया हूं।

संपादित करें:

मैंने भी इसके साथ प्रयास किया है: $('#myModal').modal('show');लेकिन इसका ठीक वैसा ही प्रभाव है।

— FooBar
स्रोत

हैलो बेनी। हां, मैं रक्षा करता हूं। मैंने भी इसके साथ प्रयास किया है: $ ('# myModal')। मोडल ('शो'); लेकिन इसका ठीक वैसा ही प्रभाव है।

— फुआबर

1

क्या यह आपकी मदद कर सकता है, एक ही मुद्दा: stackoverflow.com/questions/12894570/…

— मार्क

@

— मर्क

मैंने देखा कि अगर मैं windowउस मोडल फायर में कहीं भी क्लिक करता हूँ । यह एक अप्रत्याशित लगता है। मैंने buttondevtools के माध्यम से हटा दिया , और पृष्ठ पर कहीं भी क्लिक करके अभी भी मोडल विंडो को खोला। क्या वह वांछित व्यवहार था? मुझे आश्चर्य है कि अगर आपके पास मोडल क्लिक इवेंट के लिए सही चयनकर्ता नहीं है।

— dward

174

जब मोडल खुलता है तो एक modal-openवर्ग <body>टैग पर सेट होता है । यह वर्ग overflow: hidden;शरीर में सेट होता है। Bootstrap.css शैली को ओवरराइड करने के लिए अपनी स्टाइलशीट में इस नियम को जोड़ें:

body.modal-open {
    overflow: visible;
}

अब स्क्रॉल को जगह में रहना चाहिए।

— pstenstrm
स्रोत

@pstenstrm, मुझे संदेह है। आपने .modal-open वर्ग के लिए css को ओवरराइड करने के लिए कहा था। लेकिन, क्या होगा यदि अतिरिक्त क्लोजिंग डिव हैं, और मेरे उत्तर में, मैंने अपने रिज़ॉल्यूशन में किसी भी वर्ग को ओवरराइड नहीं किया है? यह 2 अतिरिक्त div को हटाने के बाद ठीक काम करता है। bs मोडल जोड़ने वाला .modal-backdrop div जो भ्रमित हो जाएगा जहां इसे अतिरिक्त समापन टैग के कारण बंद करने की आवश्यकता है।

— रवीलाम फेरी

4

मेरे लिए काम नहीं करता है, मैं एक iframe के अंदर मॉडल है और यह शीर्ष करने के लिए स्क्रॉल कर रहा है ... किसी भी विचार?

— कैबक्सा.मापाचे

5

इसने मेरे लिए इसे ठीक कर दिया। बस मेरी समस्या की जड़ को जोड़ने के लिए 'शरीर {ऊंचाई: 100%}' था।

— पेटे जूल

23

मेरे लिए काम नहीं कर रहा है। मुझे एक वेनिला मोडल मिला है जिसे मैं खोल रहा हूं .modal('show')और यह अभी भी पृष्ठ के शीर्ष पर स्क्रॉल करता है। बूटस्ट्रैप

— v3.2.0

6

मुझे position: inheritइस वर्ग में जोड़ना था लेकिन उसके बाद एक आकर्षण की तरह काम किया।

— adrian3martin

28

अगर आप टैग के साथ मोडल बुला रहे हैं। Href विशेषता से '#' को हटाने का प्रयास करें। और डेटा विशेषताओं के साथ कॉल मोडल।

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

— गोखन
स्रोत

मैं इसे वैसे ही खोलता हूं जैसे आपने वहां पोस्ट किया है। लिंक की जाँच करें

— FooBar

5

यदि आप "<बटन>" का उपयोग नहीं करते हैं, लेकिन <a>, जैसा कि मेरे मामले में, आप ऑब्जेक्ट पर माउस कर्सर ले जाने पर आइकन "फिंगर बटन" खो देते हैं। इसे दूर करने के लिए, मैंने ऐसा किया है: ... href = "# mai_modal_id" डेटा-टॉगल = "मोडल" ... और मैंने डेटा-लक्ष्य

— पैरागिक्स का

3

@ पगुरिक्स - आपकी टिप्पणी ने मेरे परिदृश्य के लिए सबसे अच्छा काम किया।

— अल्फ्रेडब्र

मुझे लगता है, @pagurix को एक अलग उत्तर के रूप में अपनी टिप्पणी लिखनी चाहिए। केवल एक चीज जिसने मदद की। थम्स अप!

— विभोर दुबे

14

यदि आप एंकर टैग का उपयोग कर रहे हैं <a href"#" ..> ... </a>और href="#"समस्या पैदा कर रहे हैं , तो उसे हटा दें। आप यहाँ पर अधिक पढ़ सकते हैं

— निमेश जैन
स्रोत

12

$('the thing you click on').click(function ($e) {
            $e.preventDefault();
});

यह आपको स्क्रॉल बार को शीर्ष पर जाने से रोकने में मदद करेगा। इसने मेरे लिए काम किया

— जॉर्जी मिर्चेव
स्रोत

5

संभवतः मोडल के साथ काम करना कहीं न कहीं कोड में निहित है:

body.modal-open {
    overflow: visible;
    position: absolute;
    width: 100%;
    height:100%;
}

मेरे लिए यह स्थिति, ऊंचाई और अतिप्रवाह का एक संयोजन था।

— डेनिस हेडेन
स्रोत

4

मुझे कोई विशिष्ट त्रुटि दिखाई नहीं दे रही है, लेकिन मैं आपको अपना html सिंटैक्स जांचने की सलाह दूंगा ।

आपके स्रोत के साथ एक छोटा सा परीक्षण मुझे त्रुटियों की तरह देता है

लाइन 127, कॉलम 34: अनकल्ड एलिमेंट डिवा।
              <div class="inner onlySides">

यह एक मुद्दा हो सकता है।

— billyJoe
स्रोत

धन्यवाद - मैं इस पर गौर करूंगा - भले ही मुझे यह विश्वास करना कठिन लगे कि इससे मैं जिस समस्या का सामना कर रहा हूं उसे ट्रिगर कर सकता हूं। ऐसा लगता है कि आप इसे ट्रैक करने के लिए एक प्लगइन का उपयोग कर रहे हैं - यदि हां; कौन कौन से?

— 14

मैं फ़ायरबग को छोड़कर प्लगइन का उपयोग नहीं करता। यह हमेशा अच्छी बात है कि अपने पेज की वैधता validator.w3.org पर देखें । यह एक मुद्दा होगा क्योंकि अगर आपने

— तलाक नहीं

4

जंपिंग बैकग्राउंड को हल करने का सबसे आसान तरीका दो मापदंडों को परिभाषित करना है:

body.modal-open {
  overflow: visible;
  padding-right: 0 !important;
}

— निल्स
स्रोत

3

मैंने अपने लोकलहोस्ट पर इस समस्या की प्रतिकृति बनाने की कोशिश की और जितना अजीब लग सकता है, बूटस्ट्रैप जेएस फाइल के साथ एक संघर्ष है जिसे आप उपयोग कर रहे हैं।

अपना कोड टिप्पणी करने का प्रयास करें:

<script src="/min/?f=bootstrap.min.js,modernizr.js,bootstrap-datetimepicker.js,nprogress.js,feedback.js,select2.min.js,jquery.unveil.js,equalheights.jquery.js,hogan-v2.0.0.min.edu-custom.js,jquery.visible.min.js,handlebars-v1.2.0.js,typeahead.bundle.min.js,jquery.gridster.js,cookie.jquery.js,jquery.autosize.min.js,application.js&ver=1392814384"></script>

और इसके बजाय बूटस्ट्रैप 2.3.2 का उपयोग करें:

<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>

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

मैंने इसे बूटस्ट्रैप संस्करण 3 के साथ आजमाया, लेकिन यह काम नहीं किया। मैं अभी भी मुसीबत के हिस्से को इंगित करने में असमर्थ हूं, लेकिन कहीं-कहीं फायरबग ने मुझे एक e.preventDefault() is not a functionत्रुटि दी - मैं अनुमान लगा रहा हूं कि यह मूल कारण होना चाहिए लेकिन मैं इसे अन्य जेएस फाइलों के साथ तुलना करना अभी बाकी हूं।

— AYB
स्रोत

3

मैंने स्क्रीन के केंद्र में .modal शीर्ष सेट करने का प्रयास किया।

.modal {
    position: absolute;
    top: 50%;
}

बस मेरे विचारों के 2cents।

— होल्गर थीबोसच
स्रोत

पर्याप्त नजदीक। मैं नीचे नहीं जाऊंगा क्योंकि मेरी समस्या कहीं और हो सकती है, लेकिन इससे स्क्रीन के निचले आधे हिस्से को मंद कर दिया गया था, लेकिन मॉडल केंद्र की ओर स्थित था।

— crafter

3

बूटस्ट्रैप 3.1.1 में मैंने इस समाधान के साथ हल किया:

body.modal-open {
    position: absolute !important;
}

— Filo
स्रोत

2

आपने मेरा दिन बचाया @Filo आपको बहुत धन्यवाद

— विनोथिनी

2

आपके पास divपहले <div id="footer">या बाद में 2 अतिरिक्त समापन टैग हैं<div id="mainFrame" class="group"> div के । मैं यह निरीक्षण करने के लिए दृश्य स्टूडियो 2012 एक्सप्रेस का उपयोग कर रहा हूं।

कृपया इन 2 अतिरिक्त विभाजनों को हटा दें और हमें बताएं कि यह कैसे काम करता है। मैंने अतिरिक्त divs को हटा दिया और सभी कस्टम स्क्रिप्ट्स को हटा दिया। पादरी पर केवल jquery कोर और बूटस्ट्रैप बनाए रखा। यहाँ अंतिम उत्पादन का sreenshot है। यहाँ आप के लिए jsbin खेल का मैदान है जो ठीक काम कर रहा है।

मेरा सुझाव है कि आप सभी लिपियों और सीएसएस फ़ाइलों को लोड करने के लिए हेडज का उपयोग करें। यह भी दो बार किसी भी स्क्रिप्ट को लोड करने का अच्छा अभ्यास नहीं है।

यहां छवि विवरण दर्ज करें

— Ravimallya
स्रोत

4

डाउनवोट किए गए उत्तरों को कारणों के साथ उचित टिप्पणी की आवश्यकता है।

— रविमिला

2

मोडल खोलने के लिए इसका उपयोग करके देखें कि क्या होता है:

<a href="#generalModal" class="btn btn-primary btn-lg" data-toggle="modal">
  Launch demo modal 
</a>

— scooterlord
स्रोत

2

body.modal-open {
overflow: visible !important;
}

मुझे इसे ठीक करने के लिए महत्वपूर्ण विशेषता की आवश्यकता थी

— Dizzle
स्रोत

इसने मेरे लिए काम किया, और मेरे पास पेन्स्टस्ट्रम के उत्तर से @ मंडम का मुद्दा (टिप्पणियों में) था: "मेरे लिए काम कर रहा है। मुझे एक वेनिला मोडल मिला है जिसे मैं .modal ('शो') के साथ खोल रहा हूं और यह अभी भी स्क्रॉल करता है। पृष्ठ के शीर्ष पर बूटस्ट्रैप v3.2.0 "। इसका एकमात्र अजीब प्रभाव यह है कि अब पृष्ठभूमि स्क्रॉल करेगी यदि आप एक मोडल को स्क्रॉल करते रहते हैं जो खिड़की से लंबा है, लेकिन यह मेरे लिए एक मामूली मुद्दा है। धन्यवाद।

— dgig

1

मैं बूटस्ट्रैप 2.3.2 का उपयोग करते हुए एक ही मुद्दा था

यह एक लिंक पर क्लिक करने के लिए एक समस्या थी:

चाल थी: झूठी वापसी;

<a href="#" class="btn" onclick="openPositionPopup(${positionReport[0]}); return false;">
     <i class="icon-map-marker"></i>
</a>

और जेएस:

function openModal() {
    $('#myModal').modal('show');
}

— mpccolorado
स्रोत

1

मैंने यहां और हर जगह इस कोशिश में घंटों बिताए। कोणीयज-मटेरियल उपयोग के लिए, मुझे पता चला कि मुझे uibModal.open config ऑब्जेक्ट arg पर एनीमेशन को निष्क्रिय करना था।

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

  $uibModal.open(
    {
      animation: false,
      component: 'myDialogComponent',
      size: 'lg',
      resolve: {
        details: function() {
          return detailsCollection;
        }
      }
    }
  );

मनाइए कि यह किसी और के लिए सहायक हो।

— नाथन बीच
स्रोत

1

यदि आप एक कोणीय कार्यक्रम में इस समस्या का सामना कर रहे हैं तो .scss फ़ाइल की पहली पंक्ति में नीचे कोड जोड़ें।

::ng-deep {   
     body.modal-open {
          overflow: visible !important;
          position: absolute !important;   
     } 
}

— sibashankar पांडा
स्रोत

0

मुझे भी यही समस्या थी और मुझे लगता है कि मैं इसका पता लगाता हूं। आपको बस बॉडी टैग के सीधे बच्चे के रूप में मोडल एचटीएमएल को रखना होगा ! आप मोडल को ट्रिगर करने वाले बटन के लिए HTML कोड रख सकते हैं, जहाँ भी आपको आवश्यकता हो। मेरा मानना है कि यह सीएसएस विरासत और स्थिति के मुद्दों से बचा जाता है जो इस समस्या को ट्रिगर करते हैं।

उदाहरण:

<body>
    <!-- All your other HTML code -->
    <div>
        <!-- Button trigger modal -->
        <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
            Launch demo modal
        </button>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <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>
</body>

— nunoarruda
स्रोत

0

अंत में यह एक बाहर लगा। एंकर टैग में मोडल को लक्षित करने वाले बटन को न लपेटें।

खराब

<a href"#">
    <button type="button" class="btn"
data-toggle="modal" data-target="#myModal">See Detail</button>
</a>

अच्छा

<button type="button" class="btn"
    data-toggle="modal" data-target="#myModal">See Detail</button>

— ALFmachine
स्रोत

0

यह एक मेरे लिए किया था

body.modal-open {
    overflow: inherit;
    padding-right: 0 !important;
}

— warkitty
स्रोत

मैं नेवबार और कंटेनर के साथ एक समान मुद्दा रहा था जब मोडल खोला गया था। यह वही है जो मैं देख रहा था।

— awhitey98

यह मदद की खुशी है!

— वारिकटी

0

कई घंटों में दर्जनों उत्तर पढ़ने के बाद मैंने बूटस्ट्रैप फ़ाइल से मूल कोड को फिर से कॉपी किया और चरण दर चरण डिबग किया कि यह देखने के लिए कि मैं हमेशा शीर्ष पर क्यों जाता हूं। क्योंकि बूटस्ट्रैप 3 का वास्तविक नवीनतम संस्करण उस स्थिति में मोडल दिखा रहा है, जैसे आप अभी देख रहे हैं। मुझे पता चला था कि -webkit-transform: translate3d(0,0,0);और height: 100%मेरे सीएसएस बॉडी-टैग में इस व्यवहार का कारण था। शायद यह कुछ मदद करता है।

— AlexioVay
स्रोत

0

मेरे लिए काम करता है जब मैंने संस्करण को 3.1.1 से 3.3.7 में बदल दिया

यदि आपको संस्करण 3.3.1 का उपयोग करने की आवश्यकता नहीं है, तो प्रतिस्थापित करने का प्रयास करें।

परिवर्तन के बाद, यह जांचना अच्छा है कि बाकी फ़ंक्शन सही तरीके से काम करता है।

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

— Pyot
स्रोत

0

body.modal-open { position: inherit; }

यह मेरे लिए एक आकर्षण की तरह काम करता था।

— निमिष गोयल
स्रोत

0

मैंने उपरोक्त सभी उदाहरणों की कोशिश की - यह केवल एक चीज है जो मेरे लिए काम करती है:

.modal-open {

            padding-right: 0 !important;

        }

मॉडल के दाईं ओर से पैडिंग को हटाना - कूद को रोकता है।

— Stnfordly
स्रोत

0

ऊंचाई: 100% समस्या हल है, लेकिन आपको सही "div" जोड़ना होगा

— अनार अली
स्रोत

0

मुझे एक ही मुद्दा मिला और किसी भी उत्तर ने मेरी मदद नहीं की। एक वर्कअराउंड मिला जो बेवकूफ लगता है लेकिन यह कम से कम मेरे मामले में काम करता है।

मैंने पाया कि पृष्ठ केवल एक बार शीर्ष करने के लिए स्क्रॉल कर रहा है और उसके बाद अगले खुले हुए मोडल अपेक्षा के अनुरूप काम करते हैं। मुझे लगता है कि DOM में किसी भी तत्व के छुपाने से एक ही तरह का स्क्रॉल शुरू होता है। इसलिए मैं सिर्फ पृष्ठ लोड करने के बाद एक डमी div बना रहा हूं, इसे छिपाने और हटाने से और इस मुद्दे को हल किया।

var $dummy= $("<div>");
$("body").append($dummy);
$dummy.hide().remove();

— बोरज़िलो एंड्री
स्रोत

0

मैं उसी मुद्दे का सामना कर रहा था। समस्या यह थी कि मैं .modal- ओपन क्लास को html और बॉडी एलिमेंट्स के साथ जोड़ रहा था। बस इस वर्ग को शरीर में जोड़ें और सब कुछ उम्मीद के मुताबिक काम करें।

— general666
स्रोत

-1

यह पूरी तरह से काम करता है की कोशिश करो

/* fix body.modal-open overflow:hidden */
body.modal-open {
    height: auto;
}

— minimit
स्रोत

-1

यह तय करने के लिए अच्छा विचार है, यह जॉक की तरह लग रहा है!

बस पर्याप्त है, अपनी शैली में दो सीएसएस कोड में से एक जोड़ा

.body.modal-open { overflow:visible;padding-right:0px !important;}
.body.modal-open { height:auto;padding-right:0px !important;}

https://github.com/jschr/bootstrap-modal/issues/131#issuecomment-153405449

— अली शरीफी
स्रोत

-3

यदि आपके लिए pstrstrm का उत्तर काम नहीं करता है, तो इसे इस प्रतिस्थापन बटन के साथ संयोजित करने का प्रयास करें HTML:

<a class="btn btn-primary btn-lg" data-toggle="modal" data-target="#generalModal" id="launchbutton" href="#launchbutton"> Launch demo modal </a>

यह बटन ऑन-स्क्रीन रखना चाहिए।

— बेन
स्रोत