बूटस्ट्रैप मोडल तुरंत गायब हो जाता है

203

मैं बूटस्ट्रैप का उपयोग कर एक वेबसाइट पर काम कर रहा हूं।

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

बटन कोड:

<button type="button" 
    class="btn btn-warning btn-large" 
    data-toggle="modal"
    data-target="#myModal">Open Modal</button>

मोडल कोड:

<div class="modal hide fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">In Costruzione</h3>
  </div>
  <div class="modal-body">
    <p>Test Modal: Bootstrap</p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Chiudi</button>
    <button class="btn btn-warning">Salva</button>
  </div>
</div>

समस्या यह है कि जैसे ही मैं बटन पर क्लिक करता हूं, मोडल फीका पड़ जाता है और फिर तुरंत गायब हो जाता है।

मैं किसी भी मदद की सराहना करता हूँ।

इसके अलावा, ड्रॉपडाउन त्रिकोण के रंग को कैसे बदलना है (ऊपर इशारा करते हुए, कोई हॉवर नहीं)? मैं नारंगी और भूरे रंग पर आधारित एक वेबसाइट पर काम कर रहा हूं और वह नीली चीज वास्तव में कष्टप्रद है।

twitter-bootstrap modal-dialog

— gorokizu
स्रोत

1

आप twitter.github.com/bootstrap पर जा सकते हैं और इसके उदाहरणों का अनुसरण कर सकते हैं ।

— मॉरीशियो जिओरडनो 16

2

मैंने बटन टैग में onClick = "$ ('# myModal') का उपयोग करके इसे बनाया है। मोडल ()"।

— गोरोकिज़ू

आपके दृष्टिकोण का इस्तेमाल किया: onClick = "$ ('# myModal')। मोडल ()"

— nikolai.serdiuk

467

एक समान कारण

यह सामान्य व्यवहार है जब जावास्क्रिप्ट के लिए मोडल प्लगइन दो बार लोड होता है। कृपया यह सुनिश्चित करने के लिए जांच लें कि प्लगइन डबल लोड नहीं हो रहा है। आपके द्वारा उपयोग किए जा रहे प्लेटफॉर्म के आधार पर, मोडल कोड को कई स्रोतों से लोड किया जा सकता है। आम लोगों में से कुछ हैं:

bootstrap.js (पूर्ण बूटस्ट्रैप JS सुइट)
bootstrap.min.js (ऊपर के रूप में, बस छोटा किया गया)
बूटस्ट्रैप- modal.js (स्टैंडअलोन प्लगइन)
एक निर्भरता लोडर, जैसे, require('bootstrap')

डिबगिंग टिप्स

शुरू करने के लिए एक अच्छी जगह clickअपने ब्राउज़र में डेवलपर टूल का उपयोग करके पंजीकृत ईवेंट श्रोताओं का निरीक्षण करना है। उदाहरण के लिए, क्रोम जेएस स्रोत फ़ाइल को सूचीबद्ध करेगा जहां श्रोता को पंजीकृत करने के लिए कोड पाया जा सकता है। एक अन्य विकल्प है कि मोडल कोड में पाए जाने वाले वाक्यांश के लिए पृष्ठ पर स्रोतों को खोजने का प्रयास करें, जैसे var Modal।

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

ए (टूटा हुआ) डेमो

यहां बताया गया है कि बूटस्ट्रैप. js और बूटस्ट्रैप-मोडल.जेएस दोनों को लोड करने के दौरान क्या होता है (सिर्फ अपने अनुभव की पुष्टि के लिए):

Plunker

यदि आप उस पृष्ठ के स्रोत के नीचे स्क्रॉल करते हैं, तो आप बूटस्ट्रैप-मोडल.ज के<script> लिए लाइन को हटा या टिप्पणी कर सकते हैं और फिर सत्यापित कर सकते हैं कि अब मोडल अपेक्षित रूप से कार्य करेगा।

— मर्व
स्रोत

4

इसने मेरे लिए काम किया, मैंने bootstrap.js को हटा दिया और bootstrap.min.js को +1 में छोड़ दिया

— डैनियल सन यांग

1

मेरे लिए क्या ख़ुशी की बात है कि मैंने <head> </ head> पर और <footer> </ footer> के नीचे bootstrap.js घोषित किया, मैंने <head> </ head> पर एक हटा दिया

— CENT1PEDE

@PrinceTyke आप सही थे, bootstrap-modal.js के लिए url बासी था और इसलिए केवल एक लोड हो रहा था (यह काम कर रहा था)। मैंने इसे फिर से तोड़ने का फैसला किया।

— मर्व

ऐसा तब भी होता है जब आप एक ही समय में दो "bootstrap.js" को एक ही पेज पर रखते हैं

— Leandro RR

1

मेरे लिए यह समस्या थी, हालाँकि, क्योंकि मैं ASP.NET के बंडल के साथ संयोजन के रूप में इसका उपयोग कर रहा था, जो आपको तैनात सर्वरों के लिए एक CDN पता निर्दिष्ट करने की अनुमति देता है, इसका मतलब है कि मेरे तैनात सर्वर को यह समस्या हो रही थी लेकिन मेरे देवता ठीक थे। इसलिए सुनिश्चित करें कि आपने इससे बचने के लिए अपनी वेबसाइट पर सीडीएन से बूटस्ट्रैपिंग को हटा दिया है।

— वर्थ 7

85

मुझे एक ही समस्या थी लेकिन इसका एक अलग कारण था। मैंने प्रलेखन का पालन किया और एक बटन बनाया जैसे:

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

जब मैंने इसे क्लिक किया, तो यह दिखाई दिया कि कुछ भी नहीं होगा। हालाँकि, बटन <form>उसी में था जो अस्थायी रूप से उसी पृष्ठ को ला रहा था।

मैंने type="button"बटन तत्व में जोड़कर इसे ठीक किया , ताकि क्लिक करने पर यह फ़ॉर्म सबमिट न करे।

— रोरी हंटर
स्रोत

मेरे पास दो पुस्तकालय थे बूटस्ट्रैप.जेएस और बूटस्ट्रैप-एडिटेबल.जेएस, मुझे लगा कि वे एक ही पुस्तकालय थे इसलिए मैंने पहले हटा दिया और अब सब कुछ काम करता है।

— फेडेको

25

मेरे लिए जो काम करना था वो निकाल दिया

data-toggle="modal"

बटन से। बटन स्वयं कोई भी तत्व हो सकता है - एक लिंक, div, बटन आदि।

— miCRoSCoPiC_eaRthLinG
स्रोत

1

यह वही है जिसने मेरे लिए काम किया है। पूरी तरह से निश्चित नहीं है कि क्यों, मेरी साइट पर बाकी मोडल इसके साथ ठीक काम करते हैं, लेकिन एक विशेष रूप से नहीं! अजीब। कोई बात नहीं धन्यवाद!

— ब्लूप्रिंट

15

मैंने इस प्रश्न पर अन्य उपयोगी उत्तर के बाद, अपने mvc ऐप में डुप्लिकेट बूटस्ट्रैप संदर्भ के लिए कुछ समय के लिए देखा।

अंत में यह पाया - यह मैं उपयोग कर रहा था एक और पुस्तकालय में शामिल किया गया था, तो बिल्कुल स्पष्ट नहीं था! ( datatables.net)।

यदि आपको अभी भी यह समस्या है, तो अन्य पुस्तकालयों की तलाश करें, जो आपके लिए बूटस्ट्रैप सहित हो सकते हैं। ( datatables.netआपको बूटस्ट्रैप के साथ या बिना डाउनलोड को निर्दिष्ट करने की अनुमति देता है - अन्य ऐसा ही करते हैं)।

तो मैं निकाल दिया bootstrap.min.jsमेरी से bundle.configऔर सभी काम ठीक।

— जॉन लुकास
स्रोत

बहुत बढ़िया, इसने मेरे मुद्दे को मोडल्स के साथ हल कर दिया। मैं मानता हूं कि यह बिल्कुल स्पष्ट नहीं था। धन्यवाद

— हारिस

13

एक ही लक्षण, bootstrap-sassमणि द्वारा प्रदान किए गए बूटस्ट्रैप के साथ एक रेल अनुप्रयोग के संदर्भ में , और @ मर्व के जवाब ने मुझे सही रास्ते पर डाल दिया।

मेरी application.jsफ़ाइल में निम्नलिखित थे:

//= require bootstrap
//= require bootstrap-sprockets

फ़िक्स को दो में से एक लाइन को हटाना था। दरअसल, मणि की रीडमी आपको इस त्रुटि के बारे में चेतावनी देती है। मेरी गलती।

— ग्यूसेप
स्रोत

9

मेरे कोड में किसी भी तरह बूटस्ट्रैप था। min.js में दो बार शामिल थे। मैंने उनमें से एक को हटा दिया और अब सब कुछ ठीक काम करता है।

— रिकार्डो पीपर
स्रोत

मेरे मामले में मैंने bootstrap.js और bootstrap.min.js दोनों जोड़े

— ImranNaqvi

इस उत्तर ने मेरी मदद की, किसी ने बूटस्ट्रैप js को cdn से शामिल किया था, भले ही यह पहले से ही

— npm के

8

e.preventDefault(); jquery ui के साथ

मेरे लिए यह समस्या jquery ui बटन पर क्लिक विधि ओवरराइड के साथ उत्पन्न हुई, जिससे डिफ़ॉल्ट रूप से क्लिक पर एक पृष्ठ पुनः लोड होता है।

— LX-3
स्रोत

8

समस्या तब भी हो सकती है जब jquery का उपयोग करके आप एक घटना श्रोता को दो बार संलग्न करते हैं। छूट के लिए आप बिना बंधन के सेट होंगे:

            $("body").on("click","#fixerror",function(event){
                $("#fixerrormodal").modal('toggle')
            })

यदि ऐसा होता है तो घटना को लगातार दो बार निकाल दिया जाता है और मोडल गायब हो जाता है।

            $("body").on("click","#fixerror",function(event){
                $("#fixerrormodal").modal()
                $("#fixerrormodal").modal('toggle')
            })

उदाहरण देखें: http://embed.plnkr.co/i5xB1WbX7zgXrbDMhNAW/preview

— gpasse
स्रोत

3

@ ओंकारदायी यह 'फिक्स' नहीं है, सिर्फ एक मामला है जहां इस तरह की समस्या हो सकती है।

— गपसे

7

मैं उसी लक्षण में भाग गया जो @gpasse ने अपने उदाहरण में दिखाया। यहाँ मेरा कोड था ...

<form...>
  <!-- various inputs with form submit --->

  <!-- button opens modal to show dynamic info -->
  <button id="myButton" class="btn btn-primary">Show Modal</button>
</form>

<div id="myModal" class="modal fade" ...>
</div>

<script>
  $( '#myButton' ).click( function() {
    $( '#myModal' ).modal();
  )};
</script>

जैसा कि @Bhargav ने सुझाव दिया था, मेरा मुद्दा बटन को फ़ॉर्म सबमिट करने का प्रयास करने और पृष्ठ को फिर से लोड करने के कारण था। मैंने बटन को बदल दिया a<a> लिंक में है:

<a href="#" id="myButton" class="btn btn-primary">Show Modal</a>

... और इसने समस्या को ठीक कर दिया।

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

— JDev
स्रोत

4

मेरे पास भी यही मुद्दा था, लेकिन मेरे लिए यह इसलिए हो रहा था क्योंकि मेरे पास मोडल फॉर्म के भीतर "सबमिट" टाइप का एक बटन था। मैं बदल गया

    <input  type='submit' name='submitname' id="partyBtn" value='Submit' title='Click to submit.'/>

सेवा

    <input  type='button' name='submitname' id="partyBtn" value='Submit' title='Click to submit.'/>

और उस गायब मुद्दे को ठीक कर दिया।

— डौग
स्रोत

3

मेरे मामले में, मेरे पास केवल एक ही बूटस्ट्रैप था। js, jquery.js फ़ाइल शामिल थी, लेकिन फिर भी इस प्रकार की त्रुटि हो रही थी, और बटन के लिए मेरा कोड कुछ इस तरह था:

<script type="text/javascript">
$(document).ready(function(){
   $("#bttn_<?php echo $rnt['id'];?>").click(function(){
      $("#myModal_<?php echo $rnt['id'];?>").modal('show');
   });
});
</script>

मैंने साधारण जोड़ा e.preventDefault (); यह और यह आकर्षण की तरह काम किया।

तो, मेरा नया कोड नीचे की तरह था:

<script type="text/javascript">
$(document).ready(function(){
  e.preventDefault();
  $("#bttn_<?php echo $rnt['id'];?>").click(function(){
     $("#myModal_<?php echo $rnt['id'];?>").modal('show');
  });
});
</script>

— मीके सलारिया
स्रोत

1

हां, यह मुझे थोड़ा सा लगता है। धन्यवाद।

— जेरेमी हैरिस

3

मैं आज खुद इस मुद्दे पर आया और यह केवल क्रोम में हुआ। मुझे एहसास हुआ कि यह एक प्रतिपादन मुद्दा हो सकता है। विशिष्ट मोडल को स्वयं रेंडरिंग लेयर पर ले जाने से इसे हल किया गया।

#myModal {
  -webkit-transform: translate3d(0, 0, 0);
}

— gmaliar
स्रोत

3

मेरे मामले में, बटन पर क्लिक करने से पृष्ठ का पुनः लोड (नहीं चाहता) हो जाता है।

यहाँ मेरा फिक्स है:

<button class="btn btn-success" onclick="javascript: return false;" 
data-target="#modalID" data-toggle="modal">deaktivieren</button>

— Akop
स्रोत

यदि आप एकाधिक JS लाइब्रेरीज़ लोड करते हैं तो यह सबसे अच्छा रास्ता है।

— डेनियल वुकसोविच

2

मेरे मामले में मेरे पास actionlinkएमवीसी में बटन का उपयोग है और मैंने इस मुद्दे का सामना किया है, मैंने ऊपर और अन्य कई समाधानों की कोशिश की है, लेकिन फिर भी उस मुद्दे का सामना कर रहा हूं, फिर मुझे कोड में अपनी त्रुटि का एहसास हुआ।

मैंने जावास्क्रिप्ट का उपयोग करके मोडल को बुलाया है

 $('#ModalId').modal('show');

त्रुटि से पहले मैं इस बटन का उपयोग कर रहा हूं

<a href="" onclick="return Edit();" class="btn btn-primary">Edit</a>

इस बटन में href प्रॉपर्टी के लिए मेरा कोई मूल्य नहीं है इसलिए मुझे समस्या का सामना करना पड़ रहा है।

फिर मैं इस बटन कोड को इस तरह से संपादित करता हूं

 <a href="#" onclick="return Edit();" class="btn btn-primary">Edit</a>

तब समस्या केवल पहले # में नहीं # की वजह से हल हो जाती है।

देखें कि क्या यह आपके लिए उपयोगी होगा।

— सौरभ सोलंकी
स्रोत

2

फिर भी एक और कारण / समाधान! मैं अपने JS कोड में था:

$("#show_survey").click(function() {
  $("#survey_modal").modal("show")
})

लेकिन मेरा HTML कोड पहले से ही लिखा था:

<a class="small-text link" data-target="#survey_modal" data-toggle="modal" href="#" id="show_survey">Take a quick 7 question survey!</a>

तो यह एक और क्रमांकन है कि कैसे दोहराव ने कोड में प्रवेश किया और मोडल को खोलने के लिए बंद कर दिया। मेरे मामले में, data-targetऔर data-toggleबूटस्ट्रैप डॉक्स के अनुसार html में पहले से ही काम करने के लिए मोडल ट्रिगर है। जेएस कोड इसलिए बेमानी है, और जब हटाया जाता है, तो यह काम करता है।

— जेम्स
स्रोत

1

मैं asp.NET के साथ एक परियोजना पर काम करने में एक ही समस्या थी। मैं बूटस्ट्रैप का उपयोग कर रहा था 3.1.0 ने इसे बूटस्ट्रैप 2.3.2 में अपग्रेड करने के लिए हल किया।

— पूर्व
स्रोत

1

मैं भी मुद्दा था, अगर बटन एक अंदर है टैग तब मोडल एक बार दिखाई देता है और जल्द ही गायब हो जाता है, बटन को फॉर्म से निकालता है जो कि ईश्यू तय करता है। धन्यवाद मैं इस धागे में समाप्त हो गया! सभी को +1।

— Satheeshwaran
स्रोत

1

मैं मोबाइल उपकरणों पर परीक्षण के दौरान इसी समस्या का सामना कर रहा था और इस चाल ने मेरे लिए काम किया

<a type="submit" class="btn btn-primary" data-toggle="modal" href="#myModal">Submit</a>

बटन को एंकर टैग में बदलें, इसे काम करना चाहिए, समस्या इसके प्रकार के बटन के कारण होती है क्योंकि यह सबमिट करने की कोशिश कर रहा है ताकि मोडल तुरंत गायब हो जाए। और मोडल छिपाने वाले फीके से छिपाने को भी हटा दें। <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> आशा है कि यह आपके लिए काम करेगा।

— भार्गव
स्रोत

ऊपर @RoryHunter सुझाव के अनुसार, केवल इस मुद्दे type="submit"को type="button"हल करने के लिए बटन को बदलना ।

— रिचर्ड हाउर

1

मेरे मामले में, मैंने CD.html को application.html.erb के प्रमुख में शामिल किया था और 'jquery-rails' मणि भी स्थापित किया था, जिसका मैं अनुमान लगा रहा हूं कि ऊपर दिए गए दस्तावेज़ों और पदों के लिए यह निरर्थक है।

मैंने बस application.html.erb के प्रमुख से CDN (नीचे) टिप्पणी की और मॉडल उचित रूप से खुला रहता है।

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

— brntsllvn
स्रोत

1

मेरा भी यही मुद्दा था। मेरे साथ समस्या यह थी कि मैं लिंक को दबाने और jquery के साथ पुष्टि के लिए संकेत देने के लिए मोडल प्रदर्शित कर रहा था।

नीचे दिए गए कोड ने मोडल प्रदर्शित किया और जो तुरंत गायब हो गया:

<a href="" onclick="do_some_stuff()">Hey</a>

मैंने href में '#' को जोड़ना समाप्त किया ताकि लिंक कहीं भी न जाए और इससे मेरी समस्या हल हो गई।

<a href="#" onclick="do_some_stuff()">Hey</a>

— यूटिचस
स्रोत

1

क्या आपने हटाने की कोशिश की है

data-dismiss="modal"

— JeffNhan
स्रोत

0

मुझे पता है कि यह पुराना है, लेकिन यहां एक और बात की जांच करनी है - सुनिश्चित करें कि आपके पास केवल एक डेटा-लक्ष्य = विशेषता है। मैंने इसे डुप्लिकेट कर दिया था और परिणाम इस धागे के अनुसार था।

— पीट
स्रोत

0

मैंने bootstrapअपने प्रोजेक्ट के माध्यम से जोड़ा था bower, फिर मैंने bootstrap.min.jsफ़ाइल और फ़ाइल के बाद आयात किया modal.js। (मोडल खोलने वाला बटन एक फॉर्म के अंदर है)। मैं सिर्फ इसके लिए आयात हटाता हूं modal.jsऔर यह मेरे लिए काम करता है।

— pableiros
स्रोत

0

अगर किसी के पास कोडाइटिटर 3 बूटस्ट्रैप का उपयोग करने योग्य है।

नीचे विन्यास / ci_boostrap.php में मेरा फिक्स है

//'assets/dist/frontend/lib.min.js',
//lib.min.js has conflict with datatables.js and i removed it replace with jquery.js
'assets/dist/frontend/jquery-3.3.1.min.js',
'assets/dist/frontend/app.min.js',
'assets/dist/datatables.js'

— ब्रावो नेट
स्रोत

0

उसी मुद्दे का सामना करना पड़ा। इसका कारण समान है @merv। समस्या पृष्ठ में जोड़े गए कैलेंडर घटक के साथ थी। घटक स्वयं कैलेंडर पॉपअप में उपयोग की जाने वाली मोडल सुविधा को जोड़ता है।

तो मॉडल पॉपअप को तोड़ने के कारण निम्नलिखित में से एक या अधिक होंगे

एक से अधिक बूटस्ट्रैप js संस्करण लोड हो रहे हैं / फ़ाइलें (मिनीकृत ...)
उस पृष्ठ पर एक बाहरी कैलेंडर जोड़ना जहाँ बूटस्ट्रैप का उपयोग किया जाता है
पृष्ठ पर कस्टम अलर्ट या पॉपअप लाइब्रेरी जोड़ना
कोई भी अन्य पुस्तकालय जो पॉपअप व्यवहार जोड़ता है

— शांता कुमारा
स्रोत

0

कोणीय (5) के साथ काम करते समय, मैं उसी मुद्दे का सामना करता हूं, लेकिन मेरे मामले में मैंने निम्नानुसार हल किया:

component.html

<button type="button" class="btn btn-primary"  data-target="#myModal" 
(click)="showresult()">fff</button>

<div class="modal" id="myModal" role="dialog"  tabindex="-1" data-backdrop="false">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Modal title</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <p>Modal body text goes here.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary">Save changes</button>
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>

component.ts

ध्यान दें: ts फ़ाइल में jquery को आयात करने की आवश्यकता है "जैसा कि var $ घोषित करें: कोई भी;"

  showresult(){
    debugger
    $('#myModal').modal('show');
  }

मेरे द्वारा किए गए परिवर्तन:

बटन टैग से "डेटा-टॉगल =" मोडल "हटा दिया गया (धन्यवाद @miCRoSCoPiC_eaRthLinG इस उत्तर से मुझे यहाँ मदद मिलती है) मेरे मामले में इसका मोडल दिखा रहा है इसलिए मैंने बनाया (क्लिक करें) =" शो-ऑफ (=) "
अंदर घटक। जेकरी ($) की घोषणा करने की जरूरत है और अंदर बटन क्लिक विधि showresult () कॉल "$ ('# myModal')। मोडल ('शो');"

— भगवत लांडे
स्रोत

0

मेरे पास एक ही मुद्दा था क्योंकि मैं अपने मॉडल को दो बार दिखा रहा था जैसा कि नीचे दिखाया गया है:

statusCode: {
    410: function (request, status, error) { //custom error code

        document.getElementById('modalbody').innerHTML = error;
        $('#myErrorModal').modal('toggle')
    }
},
error: function (request, error) {

    document.getElementById('modalbody').innerHTML = error;
    $('#myErrorModal').modal('toggle')
}

मैंने एक घटना को हटा दिया:

$ ( '# MyErrorModal')। मोडल ( 'टॉगल')

और यह जादू की तरह काम किया!

— फोलसो मेमस
स्रोत