ट्विटर बूटस्ट्रैप मोडल-बैकड्रॉप गायब नहीं होता है

Question

मैं ट्विटर बूटस्ट्रैप मोडल संवाद का उपयोग कर रहा हूं। जब मैं बूटस्ट्रैप मोडल डायलॉग के सबमिट बटन पर क्लिक करता हूं, तो यह AJAX अनुरोध भेजता है। मेरी समस्या यह है कि मॉडल-पृष्ठभूमि गायब नहीं होती है। मोडल संवाद सही ढंग से गायब हो जाता है, लेकिन इसके बजाय "मोडल-बैकड्रॉप" में स्क्रीन पर अस्पष्टता बनी रहती है

मैं क्या कर सकता हूँ?

Comments

क्या आप उपयोग कर रहे हैं $('#myModal').modal('hide')? क्या आप यहां कुछ कोड डाल सकते हैं?

— पूर्तगिरस

यदि आप एक प्रतिलिपि और पेस्ट का उपयोग कर रहे हैं तो गेटबॉस्ट्रैप साइट से स्वयं को एक HTML जनरेट किए गए चयनकर्ता में, सुनिश्चित करें कि आप टिप्पणी '<! - /.modal ->' को हटा दें। बूटस्ट्रैप भ्रमित हो जाता है और सोचता है कि टिप्पणी एक दूसरा मोडल तत्व है। यह इस "दूसरे" तत्व के लिए एक और बैक ड्रॉप बनाता है।

— जॉर्डन

@ जोर्डन: आपकी टिप्पणी का जवाब होना चाहिए! मेरे मामले में आपकी टिप्पणी सही समाधान थी!

— BlaM

निम्नलिखित देखें: stackoverflow.com/questions/22207377/…

— नूतन

मुझे पता है कि सवाल पुराना है, लेकिन आज मुझे एक ऐसी ही समस्या है, मेरी स्थिति में कक्षा "मोडल-एलजी" की एक मिस-रिमूवल थी, जिसे केवल "मोडल" के लिए छोड़ दिया गया था, जब आप मॉडल को बंद करने जा रहे थे वह कीबोर्ड के साथ / कहीं बाहर क्लिक करें।

— मत्तेयो

Answer 1

सुनिश्चित करें कि जब आप AJAX अनुरोध कर रहे हों, तो वास्तविक मोडल विंडो वाले कंटेनर को प्रतिस्थापित न करें, क्योंकि जब आप इसे बंद करने का प्रयास करते हैं, तो बूटस्ट्रैप इसका संदर्भ नहीं खोज पाएगा। अपने Ajax में पूर्ण हैंडलर मोडल को हटा दें और फिर डेटा को बदलें।

यदि वह काम नहीं करता है तो आप हमेशा इसे निम्न करके दूर जाने के लिए मजबूर कर सकते हैं:

$('#your-modal-id').modal('hide');
$('body').removeClass('modal-open');
$('.modal-backdrop').remove();

Comments

अगर मैं कर सकता तो यह जवाब +2 देता। बस मुझे घंटों बचाया!

— आंद्रे लोम्बार्ड

AJAX कॉल से पहले मोडल को छिपाना एक खराब समाधान है यदि आपको AJAX प्रतिक्रिया का मूल्यांकन करने और तदनुसार मोडल को अपडेट करने की आवश्यकता है।

— असीमो

मेरा मानना ​​है कि फीका एनीमेशन पूरी तरह से पूरा होने से पहले इसे मोडल ('छिपाने') के कारण भी हो सकता है। मोडल से फीका वर्ग को हटाने से मदद मिल सकती है।

— EvilPuppetMaster

। $ ( '। मोडल-पृष्ठभूमि') को हटाने (); मेरे लिए इसे हल किया, फीका वर्ग को हटाने की कोई आवश्यकता नहीं

— उमर एस।

$('.modal-backdrop').remove()लगता है कि भविष्य के मॉडल को ठीक से खोलना है।

— क्रॉक

Answer 2

सुनिश्चित करें कि $.modal()मोडल व्यवहार को लागू करने के लिए आपका प्रारंभिक कॉल आपके इच्छित उद्देश्य से अधिक तत्वों में नहीं गुजर रहा है। यदि ऐसा होता है, तो यह संग्रह में EACH तत्व के लिए, बैकग्राउंड एलिमेंट के साथ, एक मोडल इंस्टेंस बनाते हुए समाप्त हो जाएगा। नतीजतन, ऐसा लग सकता है कि पृष्ठभूमि पीछे छोड़ दी गई है, जब वास्तव में आप डुप्लिकेट में से एक को देख रहे हैं।

मेरे मामले में, मैं इस तरह से कुछ कोड के साथ मॉडल-ऑन-द-फ्लाई बनाने का प्रयास कर रहा था:

myModal = $('<div class="modal">...lots of HTML content here...</div><!-- end modal -->');
$('body').append(myModal);
myModal.modal();

यहां, समापन </div>टैग के बाद HTML टिप्पणी का मतलब था कि myModal वास्तव में दो तत्वों का एक jQuery संग्रह था - div, और टिप्पणी। उन दोनों को कर्तव्यपरायणता से तौर-तरीकों में बदल दिया गया, जिनमें से प्रत्येक की अपनी पृष्ठभूमि तत्व थी। बेशक, टिप्पणी से बना मोडल पृष्ठभूमि के अलावा अदृश्य था, इसलिए जब मैंने असली मोडल (div) को बंद किया तो ऐसा लग रहा था कि पृष्ठभूमि पीछे रह गई है।

Comments

यह आदमी पैसे पर था। मैंने उन मोडल की टिप्पणियों को हटा दिया जो मुझे $ .html () के साथ मिल रही थीं और अब यह काम करती हैं। फ्रीकिन अजीब है।

— मैट्रियम

मेरे लिए भी यही मुद्दा था।

— बॉब ब्लैक

मूर्ख बूटस्ट्रैप! उनका अपना उदाहरण मार्कअप (शुरू और अंत में टिप्पणियों के साथ) इस प्रतिमान को तोड़ता है। टिप्पणी निकालें और यह काम करता है!

— goofballLogic

मुझे भी। टिप्पणियों को हटाने से समस्या हल हो गई। सिर्फ एक सवाल। मैं $ ('बॉडी') के साथ इसे डोम में शामिल किए बिना मॉडल के काम को पूरी तरह से देखता हूं। एपेंड (myModal)। क्या DOM को पेज डोम में जोड़ना है?

— विक्टरएस्पिना

मेरे पास एक बेमेल टैग था। एक ही परिणाम। धन्यवाद!

— jozxyqk

Answer 3

मैंने अभी इस समस्या पर बहुत लंबा रास्ता तय किया :)

जबकि उपलब्ध कराए गए अन्य उत्तर सहायक और मान्य हैं, लेकिन बूटस्ट्रैप से मोडल छिपाने की कार्यक्षमता को प्रभावी ढंग से पुनर्व्यवस्थित करने के लिए यह मुझे थोड़ा गड़बड़ लग रहा था, इसलिए मुझे एक क्लीनर समाधान मिला।

समस्या यह है कि जब आप कॉल करते हैं तो घटनाओं की एक श्रृंखला होती है

$("#myModal").modal('hide');
functionThatEndsUpDestroyingTheDOM()

जब आप तब AJAX अनुरोध के परिणाम के रूप में HTML का एक गुच्छा बदलते हैं, तो मोडल-हाइडिंग ईवेंट समाप्त नहीं होते हैं। हालाँकि, बूटस्ट्रैप एक घटना को ट्रिगर करता है जब सब कुछ समाप्त हो जाता है , और आप उस तरह से हुक कर सकते हैं:

$("#myModal").modal('hide').on('hidden.bs.modal', functionThatEndsUpDestroyingTheDOM);

आशा है कि यह उपयोगी है!

Comments

मैंने बहुत लंबा समय बिताया! इस जवाब ने मुझे सुराग दिया - कुछ मेरे डोम (कोणीय) को बंद कर रहा था। बूटस्ट्रैप कोड को देखते हुए, आप केवल पहले फीका वर्ग को हटाकर पृष्ठभूमि को तत्काल हटाने के लिए मजबूर कर सकते हैं:$('#myModal').removeClass('fade');$(myModal').modal('hide')'

— रॉस आर

स्वीकृत उत्तर होना चाहिए - यह बूटस्ट्रैप API का उपयोग करता है और शरीर को .modal-open के साथ हैक नहीं करता है

— हारून Hudon

यह सबसे परिश्रमी और कर्तव्यनिष्ठ उत्तर है।

— याकूब

शानदार जवाब, मेरी समस्या डोम की जगह एक अजाक्स कॉल के कारण भी थी - मुझे लगता है कि मोडल ('छिपाने') स्वयं या मोडल संदर्भ देता है ताकि हम 'hidden.bs.modal' को संलग्न कर सकें?

— माइकल हार्पर

इस कथन को मोडल छिपाने वाली घटनाओं ने खत्म नहीं किया, मुझे यह विचार दिया कि मैं अपना काम कैसे शुरू करूं

— शमूएलदेव

Answer 4

अपने एक्शन बटन में यह डालें:

data-backdrop="false"

तथा

data-dismiss="modal" 

उदाहरण:

<button type="button" class="btn btn-default" data-dismiss="modal">Done</button>

<button type="button" class="btn btn-danger danger" data-dismiss="modal" data-backdrop="false">Action</button>

यदि आप यह डेटा दर्ज करते हैं, तो .modal-backdrop नहीं दिखाई देगा। इस लिंक पर इसके बारे में प्रलेखन: http://getbootstrap.com/javascript/#modals-usage

Comments

यह एक सही जवाब है। किसी भी परिस्थिति में बूटस्ट्रैप की सामग्री को मैन्युअल रूप से करने का प्रयास करें। यदि यह आपका समाधान होगा तो आप इसे गलत तरीके से लागू कर रहे हैं। मुझे लगता है कि बूटस्ट्रैप साइट पर बॉयलरप्लेट HTML थोड़ी अधूरी है और इसीलिए कई लोग वर्णित (incl। Me) का अनुभव कर रहे हैं। धन्यवाद! +1

— बेन फ्रांसेन

क्या होगा अगर आप एक बटन से नहीं मोडल को ट्रिगर करना चाहते हैं?

— shinzou

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

— वेस्ले स्मिथ

Answer 5

यदि आप getboostrap साइट से एक कॉपी और पेस्ट का उपयोग कर रहे हैं, तो एक HTML जनरेट किए गए चयनकर्ता में, सुनिश्चित करें कि आप टिप्पणी को हटा दें <-! /.Modal -> '। बूटस्ट्रैप भ्रमित हो जाता है और सोचता है कि टिप्पणी एक दूसरा मोडल तत्व है। यह इस "दूसरे" तत्व के लिए एक और बैक ड्रॉप बनाता है।

Comments

मैं अभिशप्त हो जाऊंगा ... यह वास्तव में मेरी समस्या थी। टिप्पणी को हटा दिया और यह काम किया। कैसे एक HTML टिप्पणी बूटस्ट्रैप अप यात्रा करता है !?

— टर्नर हेस

मेरा मानना ​​है कि यह एक गणना प्राप्त करने के लिए HTML तत्वों की तलाश कर रहा है। चूंकि टिप्पणियों को तत्व माना जाता है, यह गणना उस टिप्पणी के साथ गलत है।

— जॉर्डन

मेरे साथ हुआ जब मूंछ के टेम्पलेट में यह फाइल थी

— Pavel 'PK' Kaminsky

DOM में टिप्पणियाँ इस तरह से मौजूद हैं कि इसने मॉडेल कंपोनेंट के जावास्क्रिप्ट को आधा कर दिया। मैं बिल्कुल भूल जाता हूं। यह कुछ समय पहले की बात है।

— जॉर्डन

पवित्र तिल - वास्तव में काम करता है! ऐसा अजीब बग है।

— Dr S. S.

Answer 6

मुझे पता है कि यह बहुत पुरानी पोस्ट है लेकिन यह मदद कर सकता है। यह मेरे द्वारा किया गया एक बहुत छोटा सा काम है

$('#myModal').trigger('click');

Thats यह, इस मुद्दे को हल करना चाहिए

Comments

इसने मेरे लिए पूरी तरह से काम किया। यहाँ बूटस्ट्रैप 4 का उपयोग करना।

— एडी टेक्सेरा

यह डिफ़ॉल्ट उत्तर होना चाहिए। धन्यवाद

— Makamu इवांस

क्या myModalहोना चाहिए? और यह संवाद को बंद क्यों करेगा? मोडल संवाद केवल करीबी बटन पर क्लिक करके या संवाद के बाहर क्लिक करके बंद कर देते हैं। यह कोई समाधान नहीं लगता है।

— मुशीप्स

MyModal क्या माना जाता है? -> यह मुख्य मोडल की आईडी है। और यह संवाद को बंद क्यों करेगा? -> यह काम करता है क्योंकि डिफ़ॉल्ट रूप से जब आप मोडल के बाहर क्लिक करते हैं, तो कार्रवाई उसके माता-पिता के लिए प्रचारित करती है, और इसे वहां संभाला जाता है।

— चैतन्य बांकानहल

Answer 7

मुझे एक समान समस्या का सामना करना पड़ा: मेरी मोडल विंडो में, मेरे पास दो बटन हैं, "रद्द करें" और "ओके"। मूल रूप से, दोनों बटन मोडल विंडो को बंद करके $('#myModal').modal('hide')("ओके" पहले कुछ कोड निष्पादित करने के साथ) बंद करेंगे और परिदृश्य निम्नलिखित होगा:

1. मोडल विंडो खोलें
2. कुछ संचालन करें, फिर "ओके" पर क्लिक करें उन्हें मान्य करें और मोडल को बंद करें
3. मोडल फिर से खोलें और "रद्द करें" पर क्लिक करके खारिज करें
4. मोडल को फिर से खोलें, "रद्द करें" == पर फिर से क्लिक करें> पृष्ठभूमि अब सुलभ नहीं है!

ठीक है, मेरे साथी नेक्स्ट डेस्क ने मेरा दिन बचाया: आह्वान करने के बजाय $('#myModal').modal('hide'), अपने बटनों को विशेषता दें data-dismiss="modal"और अपने "सबमिट" बटन पर "क्लिक" इवेंट जोड़ें। मेरी समस्या में, बटन के लिए HTML (अच्छी तरह से, TWIG) कोड है:

<button id="modal-btn-ok" class="btn" data-dismiss="modal">OK</button>
<button id="modal-btn-cancel" class="btn" data-dismiss="modal">Cancel</button>

और मेरे जावास्क्रिप्ट कोड में, मेरे पास है:

$("#modal-btn-ok").one("click", null, null, function(){
    // My stuff to be done
});

जबकि कोई "क्लिक" घटना "रद्द" बटन के लिए जिम्मेदार नहीं है। मोडल अब ठीक से बंद हो जाता है और मुझे "सामान्य" पृष्ठ के साथ फिर से खेलने देता है। यह वास्तव में ऐसा लगता है कि यह data-dismiss="modal"संकेत करने का एकमात्र तरीका होना चाहिए कि एक बटन (या जो भी DOM तत्व है) बूटस्ट्रैप मोडल को बंद कर दे। इस .modal('hide')विधि को काफी नियंत्रित तरीके से व्यवहार नहीं किया गया है।

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

Comments

यहाँ एक ही है, क्या होगा यदि आप एक बटन से मोडल को ट्रिगर नहीं करना चाहते हैं?

— shinzou

Answer 8

यह समस्या तब भी हो सकती है जब आप छुपते हैं और फिर फिर से तेजी से मोडल विंडो दिखाते हैं। यह प्रश्न के लिए कहीं और उल्लेख किया गया था, लेकिन मैं नीचे कुछ और विवरण प्रदान करूंगा।

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

यदि यह आपकी समस्या का सही कारण है, तो समस्या को कम करने के लिए यहां कुछ विकल्प दिए गए हैं। विकल्प # 1 यह निर्धारित करने के लिए एक त्वरित और आसान परीक्षण है कि फीका संक्रमण का समय वास्तव में आपकी समस्या का कारण है।

1. मॉडल के लिए फीका एनीमेशन अक्षम करें (संवाद से "फीका" वर्ग निकालें)
2. इसे छिपाने और फिर से दिखाने के बजाय मोडल के टेक्स्ट को अपडेट करें।
3. समय को ठीक करें ताकि यह तब तक मोडल को न दिखाए जब तक कि यह पिछले मोडल को छुपा न दे। ऐसा करने के लिए मोडल की घटनाओं का उपयोग करें। http://getbootstrap.com/javascript/#modals-events

यहां कुछ संबंधित बूटस्ट्रैप समस्या ट्रैकर पोस्ट हैं। यह संभव है कि मैंने नीचे सूचीबद्ध की तुलना में अधिक ट्रैकर पोस्ट हैं।

• https://github.com/twbs/bootstrap/issues/735
• https://github.com/twbs/bootstrap/issues/2839
• https://github.com/twbs/bootstrap/issues/19385

Answer 9

.modal ( 'छिपाएं')

मैन्युअल रूप से एक मोडल छुपाता है। मोडल से पहले कॉल करने वाले को लौटाया जाता है, वास्तव में छिपाया गया है (यानी हिडन से पहले (it.bs.modal घटना होती है)।

इसलिए इसके बजाय

$('#myModal').modal('hide');
$('#someOtherSelector').trigger('click');

करना

$('#myModal').modal('hide');
$('#myModal').on('hidden.bs.modal', function() {
   $('#someOtherSelector').trigger('click');
});

तो आप "छिपी" घटना समाप्त होने तक प्रतीक्षा करना सुनिश्चित करते हैं।

Comments

यह निश्चित रूप से एक बेहतर समाधान है। इस तरह से आपको न तो उन मोडल क्लासेस के साथ खिलवाड़ करना होगा जो शायद इस मुद्दे को ठीक करने का अधिक सही तरीका है।

— डीनवॉक

Answer 10

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

सुनिश्चित करें कि आपने bootstrap.jsअपने पृष्ठ में एक से अधिक बार स्क्रिप्ट शामिल नहीं की है !

Answer 11

यहां तक ​​कि मैं एक समान समस्या में भाग गया, मेरे पास निम्नलिखित दो बटन थे

<button id="confirm-delete-btn" >Yes, Delete this note.</button>
<button id="confirm-delete-cancel" data-dismiss="modal">No</button>

मैं कुछ ajax ऑपरेशन करना चाहता था और उस ajax ऑपरेशन की सफलता पर मोडल को बंद कर देता था। तो मैंने यह किया।

$.ajax({
        url: '/ABC/Delete/' + self.model.get("Id")
            , type: 'DELETE'
            , success: function () {                    
                setTimeout(function () {
                    self.$("#confirm-delete-cancel").trigger("click");
                }, 1200);
            }
            , error: function () {}
        });

मैंने 'नहीं' बटन के क्लिक इवेंट को ट्रिगर किया जिसमें data-dismiss="modal"संपत्ति थी। और यह काम किया :)

Comments

मैन्युअल रूप से ट्रिगरिंग इवेंट मेरे लिए IE9 / IE10 में मोडल को बंद नहीं करता है। समाधान खोजने की कोशिश की जा रही है।

— एंटनी हार्डर

कोई बात नहीं, समस्या थोड़ी अलग थी - मेरे पास उस बटन से जुड़ी डेटा-सक्षम स्थिति थी, और यद्यपि IE ने ऑनक्लिक घटनाओं के साथ आगे बढ़ना शुरू कर दिया, लेकिन यह डेटा-खारिज attr को ध्यान में नहीं रखता था।

— एंटनी हार्डर

Answer 12

उपयोग:

$('.modal.in').modal('hide') 

स्रोत

Answer 13

यह समाधान रूबी ऑन रेल्स 3.x और एक जेरेब फाइल के लिए है जो कि मॉडल सहित DOM के हिस्से का पुनर्निर्माण करता है। यह काम करता है अगर ajax कॉल मोडल या पृष्ठ के किसी अन्य भाग से आया हो।

if ($("#my-modal").attr("aria-hidden") === "false") {
  $("#my-modal").modal('hide').on('hidden.bs.modal', function (event) {
    functionThatEndsUpDestroyingTheDOM();
  });
} else {
  functionThatEndsUpDestroyingTheDOM();
}

शुरुआती बिंदु के लिए @BillHuertas का धन्यवाद।

Answer 14

। $ ( '# MyModal') ट्रिगर ( 'पर क्लिक करें');

इसने मेरे लिए काम किया। इसका समापन नहीं है क्योंकि जब आप पॉपअप खोलते हैं तो यह 2 या 3 मोडल-बैकड्रॉप को ट्रिगर करता है। इसलिए जब आप $ ('# myModal')) करते हैं। मोडल ('छिपाने'); यह केवल एक मोडल-बैकड्रॉप को प्रभावित करता है और बाकी रहता है।

Answer 15

अद्यतन मुद्दा।

मेरा मुद्दा अपडेट करने वाले प्लेसमेंट के कारण था। मेरे पास अपडेटपेल में पूरा मोडल था। यदि आप अपडेटपैन के बाहर मोडल की घोषणा करते हैं और बस कहते हैं, मोडल बॉडी, अपडेट पैनल में, तो $ ('# myModalID')। मोडल ('छिपाने'); काम किया।

Comments

यह मेरी समस्या थी। मेरे पास एक AjaxManager था जो अपने यूज़र कॉन्ट्रॉल के चारों ओर अपडेट पैनल बना रहा था जिसमें पूरा मोडल था। मैंने केवल उपयोगकर्ता के शरीर को उपयोगकर्ता-केंद्र में छोड़ दिया और मुख्य पृष्ठ में सब कुछ स्थानांतरित कर दिया और सब कुछ अपेक्षित रूप से काम करना शुरू कर दिया, इसलिए अपनी <div id = "# mymodal"> भाग को अजाक्सिफाई न करें!

— अलेक्जेंडर

Answer 16

इस सवाल पर एक और नजरिया। (मैं बूटस्ट्रैप। जेएस संस्करण 3.3.6 का उपयोग कर रहा हूं)

मैंने जावास्क्रिप्ट को मैन्युअल रूप से जावास्क्रिप्ट में दोनों से गलत किया है:

$('#myModal').modal({
   keyboard: false
})

और का उपयोग करके

data-toggle="modal"

नीचे दिए गए उदाहरण की तरह इस बटन में (दस्तावेज़ में दिखाया गया है)

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

इसलिए परिणाम इसके दो उदाहरण बनाते हैं

<div class="modal-backdrop fade in"></div>

मोडल खोलने पर मेरे html के बॉडी पर अपेंड करें। फ़ंक्शन का उपयोग करके मोडल को बंद करते समय यह कारण हो सकता है:

$('#myModal').modal('hide');

यह केवल एक पृष्ठभूमि का उदाहरण निकालता है (जैसा कि ऊपर दिखाया गया है) ताकि पृष्ठभूमि गायब न हो जाए। लेकिन यह गायब हो गया अगर आप data-dismiss="modal"html पर ऐड का इस्तेमाल बूटस्ट्रैप डॉक में शो के रूप में करते हैं।

तो मेरी समस्या का समाधान केवल जावास्क्रिप्ट को मैन्युअल रूप से जावास्क्रिप्ट में शुरू करना है और डेटा विशेषता का उपयोग नहीं करना है। इस तरह से मैं मैन्युअल रूप से और data-dismiss="modal"सुविधाओं का उपयोग करके दोनों मोडल को बंद कर सकता हूं ।

आशा है कि यह मदद करेगा यदि आपने मेरे जैसी ही समस्या का सामना किया।

Answer 17

FYI करें अगर कोई व्यक्ति अभी भी इसमें भाग लेता है ... मुझे यह पता लगाने में लगभग 3 घंटे लगे हैं कि इसे करने का सबसे अच्छा तरीका इस प्रकार है:

$("#my-modal").modal("hide");
$("#my-modal").hide();
$('.modal-backdrop').hide();
$("body").removeClass("modal-open");

मोडल को बंद करने का कार्य बहुत ही अनपेक्षित है।

Comments

एक जादू की तरह काम किया।

— पट्टू

Answer 18

data-dismiss="modal"मेरे मोडल के किसी भी बटन को जोड़ना मेरे लिए काम करता है। मैं चाहता था कि मेरे बटन को एंजेक्स कॉल के साथ एंजेक्स कॉल को आग लगाने और मोडल को बंद करने के लिए एक फ़ंक्शन कॉल करना चाहिए, इसलिए मैंने .toggle()फ़ंक्शन के भीतर जोड़ा और यह अच्छी तरह से काम किया। (मेरे मामले में मैंने एक bootstrap modalका उपयोग किया और कुछ का उपयोग किया angular, न कि एक वास्तविक मोडल नियंत्रक का)।

<button type="button" class="btn btn-primary" data-dismiss="modal"
ng-click="functionName()"> Do Something </button>

$scope.functionName = function () {
angular.element('#modalId').toggle();
  $.ajax({ ajax call })
}

Answer 19

मुझे भी यही समस्या थी। मुझे पता चला कि यह बूटस्ट्रैप और JQueryUI के बीच संघर्ष के कारण था।

दोनों वर्ग "करीब" का उपयोग करते हैं। कक्षा को एक या दूसरे में बदलना इसे ठीक करता है।

Answer 20

छिपाने के बजाय टॉगल का उपयोग करके, मेरी समस्या को हल किया

Comments

एक संभावित उत्तर (उदाहरण) साझा करें। इससे दूसरों को अच्छी तरह से समझने में मदद मिलेगी

— सचिन मुहांडिरम

Answer 21

सुनिश्चित करें कि आप एक ही तत्व आईडी / वर्ग का उपयोग कहीं और नहीं कर रहे हैं, एक घटक के लिए जो मॉडल घटक से असंबंधित है।

यह है कि .. यदि आप अपने बटनों की पहचान कर रहे हैं जो वर्ग नाम 'myModal' का उपयोग करके मोडल पॉपअप को ट्रिगर करते हैं, तो सुनिश्चित करें कि समान वर्ग नाम वाले कोई असंबंधित तत्व नहीं हैं।

Answer 22

टॉप रेटेड समाधान को लागू करने के बाद मुझे एक समस्या हुई है कि यह भविष्य के मॉडल को ठीक से खोलने में टूट जाता है। मुझे अपना समाधान मिल गया है जो अच्छा काम करता है

        element.on("shown.bs.modal", function () {
            if ($(".modal-backdrop").length > 1) {
                $(".modal-backdrop").not(':first').remove();
            }
            element.css('display', 'block');
        });

Answer 23

फॉर्म जमा करने की कोशिश करते समय मुझे यही समस्या थी। समाधान से बटन प्रकार बदलने के लिए था submitकरने के लिए buttonऔर उसके बाद तो जैसे बटन क्लिक करें घटना संभाल:

'click .js-save-modal' () {
    $('#myFormId').submit();
    $('#myModalId').modal('hide');
}

Answer 24

.Net MVC4 प्रोजेक्ट में मुझे Ajax.BeginForm (OnComplete = "addComplete" [अतिरिक्त कोड हटा दिया गया]) के अंदर मोडल पॉप अप (बूटस्ट्रैप 3.0) था। "AddComplete" जावास्क्रिप्ट के अंदर मेरे पास निम्नलिखित कोड था। इससे मेरी समस्या हल हो गई।

$ ( '# MoreLotDPModal') छिपाने ()।;

$ ("# moreLotDPModal")। डेटा ('bmmodal')। ishhown = false;

$ ( 'शरीर') removeClass ( 'औसत से खोलने')।

। $ ( '। मोडल-पृष्ठभूमि') को हटाने ();

$ ( '# MoreLotDPModal') removeClass ( "में")।;

$ ('# moreLotDPModal')। attr ('aria-hidden', "true");

Answer 25

मेरा भी यही मुद्दा था।

हालाँकि मैं bootbox.js का उपयोग कर रहा था, इसलिए इसके साथ कुछ किया जा सकता था।

किसी भी तरह से, मुझे एहसास हुआ कि इस मुद्दे को एक ही वर्ग के साथ एक तत्व होने के कारण हो रहा था क्योंकि यह माता-पिता है। जब इन तत्वों में से एक का उपयोग मोडल प्रदर्शित करने के लिए एक क्लिक फ़ंक्शन को बांधने के लिए किया जाता है, तो समस्या होती है।

यानी यही समस्या का कारण बनता है:

<div class="myElement">
    <div class="myElement">
        Click here to show modal
    </div>
</div>

इसे बदल दें ताकि जिस तत्व पर क्लिक किया जा रहा है उसकी कक्षा समान नहीं है क्योंकि यह माता-पिता, बच्चों या किसी अन्य पूर्वजों का है। सामान्य रूप से ऐसा करना अच्छा होता है जब क्लिक फ़ंक्शंस को बाइंड किया जाता है।

Answer 26

मैं उल्का के साथ काम कर रहा हूं और मुझे बस यही समस्या है। मेरी बग का कारण यह था:

{{#if tourmanager}}
    {{>contactInformation tourmanager}}
{{else}}
    <a href="#addArtistTourmanagerModal" data-toggle="modal"><i class="fa fa-plus"></i> Tourmanager toevoegen</a>
    {{>addArtistTourmanagerModal}}
{{/if}}

जैसा कि आप देख सकते हैं कि मैंने मोडल को दूसरे में जोड़ा है, इसलिए जब मेरे मोडल ने कॉन्टैक्टिनफॉर्म को अपडेट किया था, यदि कोई अन्य राज्य था। यह बंद होने से ठीक पहले मोडल टेम्पलेट को DOM से बाहर छोड़ दिया जाता था।

समाधान: मोडल को इफ-से बाहर ले जाएं:

{{#if tourmanager}}
    {{>contactInformation tourmanager}}
{{else}}
    <a href="#addArtistTourmanagerModal" data-toggle="modal"><i class="fa fa-plus"></i> Tourmanager toevoegen</a>
    {{>addArtistTourmanagerModal}}
{{/if}}

Answer 27

//Create modal appending on body
myModalBackup = null;
$('#myModal').on('hidden.bs.modal', function(){
       $('body').append(myModalBackup.clone());
    myModalBackup = null;
});

//Destroy, clone and show modal
myModalBackup = $('#myModal').clone();
myModalBackup.find('.modal-backdrop').remove();
$('#myModal').modal('hide').remove();
myModalBackup.find('.info1').html('customize element <b>1</b>...');
myModalBackup.find('.info2').html('customize element <b>2</b>...');                             
myModalBackup.modal('show');

फिडल -> https://jsfiddle.net/o6th7t1x/4/

Answer 28

आपके डेटा-बैकड्रॉप विशेषता का प्रारंभिक मूल्य हो सकता है

"स्थिर", "सत्य", "असत्य"।

स्थैतिक और सच्चा मोडल छाया को जोड़ते हैं, जबकि झूठी छाया को अक्षम करते हैं, इसलिए आपको केवल इस मूल्य को पहले झूठ के साथ बदलने की आवश्यकता है। इस तरह:

$(document).on('ready',function(){
	
	var count=0;
	
$('#id-which-triggers-modal').on('click',function(){
		
		if(count>0){
		
			$(this).attr('data-backdrop','false')
		}
		count++;
});


});

Answer 29

मुझे मोडल बैकड्रॉप स्क्रीन फ्रीज़ की समस्या थी लेकिन थोड़े अलग परिदृश्य में: जब 2 बैक टू बैक मोडल प्रदर्शित हो रहे थे। उदाहरण: पहले कुछ करने के लिए पुष्टि करने के लिए कहेंगे और 'पुष्टि' बटन पर क्लिक किए जाने के बाद, कार्रवाई में त्रुटि आएगी और त्रुटि संदेश पॉपअप करने के लिए 2 मोडल प्रदर्शित होने वाला था। 2 मोडल बैकग्राउंड स्क्रीन को फ्रीज कर देगा। तत्वों के वर्ग के नाम या आईडी में कोई संघर्ष नहीं थे।

जिस तरह से समस्या को ठीक किया गया था, वह मोड्यूल बैकड्रॉप से ​​निपटने के लिए ब्राउज़र को पर्याप्त समय देना था। 'पुष्टिकरण' पर क्लिक होने के तुरंत बाद कार्रवाई करने के बजाय, ब्राउज़र को 1 मोडल को छिपाने और बैकग्राउंड आदि को साफ करने के लिए 500ms कहें - फिर वह कार्रवाई करें जो त्रुटि मोडल दिखाने में समाप्त हो जाएगी।

<button type="button" class="btn btn-red" data-dismiss="modal" on-tap="_dialogConfirmed">Confirm</button>
...

_DialogConfirmed () फ़ंक्शन में निम्न कोड हैं:

    var that = this;

    setTimeout(function () {
      if (that.confirmAction) {
        (that.confirmAction)();
        that.confirmAction = undefined;
      }
    }, 500);

मुझे लगता है कि अन्य समाधान काम कर रहे हैं क्योंकि उन्होंने ब्राउज़र को आवश्यक सफाई समय देने के लिए पर्याप्त अतिरिक्त समय लिया है।

Answer 30

ASP.NET में, jquery कमांड के बाद कोड में UpdatePanel के लिए एक अपडेट जोड़ें। उदाहरण:

    ScriptManager.RegisterStartupScript(Page, Page.GetType(), "myModal", "$('#myModal').modal('hide');", true);
    upModal.Update();