जावास्क्रिप्ट के साथ बूटस्ट्रैप मोडल कैसे छिपाएं?

Question

मैं यहाँ पोस्ट पढ़ रहा हूँ, बूटस्ट्रैप साइट, और पागल की तरह गुगली - लेकिन मुझे यकीन है कि एक आसान जवाब है नहीं मिल सकता है ...

मेरे पास एक बूटस्ट्रैप मोडल है जिसे मैं इस तरह से एक link_to सहायक से खोलता हूं:

<%= link_to "New Contact", new_contact_path, {remote: true, 'data-toggle' => 'modal', 'data-target' => "#myModal",  class: "btn btn-primary"} %>

मेरी ContactsController.createकार्रवाई में, मेरे पास कोड है जो Contactतब बनाता है जो बंद हो जाता है create.js.erb। में create.js.erb, मेरे पास कुछ त्रुटि हैंडलिंग कोड (रूबी और जावास्क्रिप्ट का मिश्रण) है। यदि सबकुछ ठीक हो जाता है, तो मैं मोडल को बंद करना चाहता हूं।

यहीं से मुझे परेशानी हो रही है। जब सब ठीक हो जाता है तो मैं मोडल को खारिज नहीं कर सकता।

मैंने कोशिश की है $('#myModal').modal('hide');और इसका कोई असर नहीं हुआ। मैंने भी कोशिश की है $('#myModal').hide();जो मोडल को खारिज करने का कारण बनता है लेकिन पृष्ठभूमि को छोड़ देता है।

मॉडल को बंद करने और / या पृष्ठभूमि को भीतर से खारिज करने के बारे में कोई मार्गदर्शन create.js.erb?

संपादित करें

यहाँ myModal के लिए मार्कअप है:

<div class="modal hide" id="myModal" >
  <div class="modal-header">
    <a class="close" data-dismiss="modal">×</a>
    <h3>Add Contact</h3>
    <div id="errors_notification">
    </div>
  </div>
  <div class="modal-body">
    <%= form_for :contact, url: contacts_path, remote: true do |f| %>  
      <%= f.text_field :first_name, placeholder: "first name" %>
      <%= f.text_field :last_name, placeholder: "last name" %>
      <br>
      <%= f.submit "Save", name: 'save', class: "btn btn-primary" %>
      <a class="close btn" data-dismiss="modal">Cancel</a>
    <% end %>
  </div>
  <div class="modal-footer">
  </div>
</div>

Comments

$('#myModal').modal('hide');आईडी के साथ मॉडल को बंद / छिपाने के लिए सही सिंटैक्स है myModal(आप इसे बूटस्ट्रैप प्रलेखन पृष्ठ पर परीक्षण कर सकते हैं )। क्या आप वाकई अपने पृष्ठ पर इस आईडी के साथ एक तत्व हैं? इसके अलावा, आप इस कॉल के साथ क्या करने की कोशिश कर रहे हैं? आपका वर्तमान कार्यान्वयन एक अजाक्स अनुरोध करता है new_contact_pathऔर एक ही समय में सामग्री के साथ मॉडल खोलता है #myModal- क्या यह आप चाहते हैं?

— जूलियन डी।

हाय, जूलियन। मैंने अपना मैडल मार्कअप ऊपर पोस्ट किया है और वास्तव में, आईडी के साथ एक डिव है myModal। मैंने फिर से कोशिश की $('myModal').modal('hide')और फिर भी अच्छा नहीं रहा। एचएम। जो मैं पूरा करने की कोशिश कर रहा हूं, उसके संदर्भ में, मुझे लगता है कि लिंक_पर हेल्पर का उपयोग करना गलत हो सकता है। मैंने इसे बदल दिया है: <a data-toggle="modal" href="#myModal" class="btn btn-primary">Add Contact</a>क्योंकि मुझे वास्तव में कॉल की आवश्यकता नहीं है new_contact_path। मैं केवल मॉडल को खोलना चाहता हूं और फिर उपयोगकर्ता इनपुट से निपटना चाहता हूं। प्रतिउत्तर हेतु समय लेने के लिए धन्यवाद। मैं देखूंगा कि क्या मैं इसे हल नहीं कर सकता।

— jvillian

मुझे लगता है कि यह सिर्फ एक टाइपो है, लेकिन कॉल होना चाहिए $('#myModal').modal('hide');( #आपकी टिप्पणी में एक लापता है)।

— जूलियन डी।

वास्तविक कोड से कॉपी करने के बजाय टाइप करने के लिए मेरा बुरा। वास्तविक कोड पढ़ता है $('#myModal').modal('hide'):। जे

— जिलियन

आप bootboxjs

— md

Answer 1

ब्राउज़र विंडो में मोडल ओपन होने के साथ, ब्राउज़र के कंसोल को आज़माने के लिए उपयोग करें

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

यदि यह काम करता है (और मोडल बंद हो जाता है) तो आप जानते हैं कि आपका करीबी जावास्क्रिप्ट सर्वर से ब्राउज़र में सही तरीके से नहीं भेजा जा रहा है।

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

ब्राउज़र का कंसोल: फ़ायरफ़ॉक्स के लिए फ़ायरबग, क्रोम या सफारी के लिए डिबगिंग कंसोल, आदि।

Comments

दूसरा पैराग्राफ वह था जिसकी मुझे तलाश थी। डुप्लिकेट आईडी मेरे मॉडल्स को दूसरी बार सही तरीके से नहीं दिखाने के लिए बना रही थी।

— मत्ती

यह मेरे लिए मुद्दा तय किया। धन्यवाद।

— Finchy70

Answer 2

बूटस्ट्रैप मोडल को बंद करने के लिए आप विकल्प के रूप में मोड के रूप में 'हाईड' पास कर सकते हैं

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

कृपया यहां काम करने वाली फिडल पर एक नज़र डालें

बूटस्ट्रैप उन घटनाओं को भी प्रदान करता है, जिन्हें आप मोडल कार्यक्षमता में हुक कर सकते हैं , जैसे यदि आप किसी ईवेंट को फायर करना चाहते हैं, जब मोडल समाप्त हो गया है उपयोगकर्ता से छिपा हुआ है तो आप हिडन का उपयोग कर सकते हैं। नोडल इवेंट आप मोडल तरीकों और घटनाओं के बारे में अधिक पढ़ सकते हैं। प्रलेखन

यदि उपरोक्त विधि काम नहीं करती है, तो अपने नज़दीकी बटन को आइडी दें और क्लोज़ बटन पर क्लिक करें।

Comments

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

— विल

Answer 3

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

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

हताशा में, मैंने ऐसा किया:

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

शायद यह सुरुचिपूर्ण नहीं है, लेकिन यह काम करता है

Comments

यह बेहतर होगा यदि आप $ का उपयोग करते हैं ("। मोडल-बैकड्रॉप")।

— रक्तध्वज

यह नए बग का परिचय देगा। कृपया अनुशंसा के तरीकों का उपयोग करें,

— बेंजामिन एकस्टीन

jQuery ( 'औसत-पृष्ठभूमि।') पर क्लिक करें ()।;

छोटी छोटी गाड़ी लेकिन निश्चित रूप से काम करता है। नीचे मैनुअल फर्नांडो मेरे लिए पूरी तरह से काम किया है।

— मुनम यूसुफ

@ यूमिंगो कृपया एक विधि की सिफारिश करें यदि यहाँ उल्लेखित कोई अच्छा नहीं है और आप एक को जानते हैं।

— अवधि

Answer 4

बूटस्ट्रैप के साथ एक मॉडल को छिपाने और दिखाने के लिए सबसे अच्छा रूप है

// SHOW
$('#ModalForm').modal('show');
// HIDE
$('#ModalForm').modal('hide');

Comments

अब तक का सबसे अच्छा जवाब। क्लिक्स, jQuery के फ़ेडऑट या सीएसएस के साथ व्यवहार को लंबे समय में मिसलिग्न्मेंट बना सकते हैं।

— जियोर्जियो टेम्पस्टास्टा

Answer 5

मैं उसी त्रुटि के साथ अनुभव कर रहा था और कोड की यह लाइन वास्तव में मेरी मदद करती है।

$("[data-dismiss=modal]").trigger({ type: "click" });

Comments

मैंने एक और मुद्दा पढ़ा है जो सुझाव देता है कि समस्या तत्व पर डेटा-खारिज विशेषता हो सकती है, फिर इस के शीर्ष पर इसे जावास्क्रिप्ट से ट्रिगर करने का प्रयास कर रहा है

— Femtosecond

बहुत से कई धन्यवाद मैनुअल, यह बहुत खोज के बाद मेरी समस्या को हल कर गया, $ ('# MyModelId')। modal ('hide'); $ ("[डेटा-खारिज = मोडल]")। ट्रिगर ({प्रकार: "क्लिक"}); कि मैं ajax सफलता पर मॉडल को बंद करना चाहता था .... बहुत बहुत धन्यवाद मेरे प्यारे

— abdelrhman raafat

Answer 6

$('#modal').modal('hide'); 
//hide the modal

$('body').removeClass('modal-open'); 
//modal-open class is added on body so it has to be removed

$('.modal-backdrop').remove();
//need to remove div with modal-backdrop class

Comments

यह काम किया है, लेकिन मैं नीचे मोडल तोड़ दिया अगर मैं इसे फिर से खोलना मोडल अब और स्क्रॉल नहीं करता है

— कोसस

Answer 7

मुझे सही समाधान मिला आप इस कोड का उपयोग कर सकते हैं

$('.close').click(); 

Comments

अब तक का सबसे अच्छा समाधान

— kosas

शानदार बस सबसे अच्छा +1 है

— मूवो

Answer 8

मुझे विश्वास है कि मैं एक समान मुद्दा था। $('#myModal').modal('hide');कि समारोह के माध्यम से होने की संभावना चल रहा है और लाइन हिट

if (!this.isShown || e.isDefaultPrevented()) return

मुद्दा यह है कि मान सामान्य है, भले ही मोडल प्रदर्शित हो और मूल्य सही होना चाहिए। मैंने बूटस्ट्रैप कोड को थोड़ा निम्नलिखित में संशोधित किया है

if (!(typeof this.isShown == 'undefined') && (!this.isShown || e.isDefaultPrevented())) return

यह अधिकांश भाग के लिए समस्या को हल करने के लिए लग रहा था। यदि पृष्ठभूमि अभी भी बनी हुई है तो आप हमेशा कॉल को छिपाने के बाद मैन्युअल रूप से हटाने के लिए जोड़ सकते हैं $('.modal-backdrop').remove();। आदर्श नहीं है, लेकिन काम करता है।

Answer 9

(बूटस्ट्रैप 3 का जिक्र करते हुए), मोडल उपयोग को छिपाने के लिए $('#modal').modal('hide'):। लेकिन पृष्ठभूमि (मेरे लिए) के आसपास पृष्ठभूमि का कारण यह था क्योंकि मैं 'छिपाने' से पहले मॉडल के लिए डोम को नष्ट कर रहा था।

इसे हल करने के लिए, मैंने DOM हटाने के साथ छिपी हुई घटना का पीछा किया। मेरे मामले में:this.render()

var $modal = $('#modal');

//when hidden
$modal.on('hidden.bs.modal', function(e) { 
  return this.render(); //DOM destroyer
});

$modal.modal('hide'); //start hiding

Comments

लेकिन क्या आप मुझे मेरे क्रोम कंसोल में this.render()इसके प्रदर्शन के बारे में बता सकते हैं undefined is not a function।

— अनिल कुमार पांडेय

Answer 10

"बेहतर" कॉलबैक होने के बाद मुझे कॉल करने का सौभाग्य मिला:

$('#myModal').on('shown', function () {
      $('#myModal').modal('hide');
})

यह सुनिश्चित किया गया कि मोडल को छिपाने () कॉल करने से पहले लोड किया गया था।

Answer 11

हमने जो पाया वह यह था कि हमारे सर्वर कोड पर कॉल और सफलता कॉल बैक पर लौटने के बीच बस थोड़ी देरी थी। यदि हम सर्वर को $("#myModal").on('hidden.bs.modal', function (e)हैंडलर में लपेटते हैं और फिर $("#myModal").modal("hide");विधि को कहते हैं , तो ब्राउजर मोडल को छिपा देगा और फिर सर्वर रेट कोड को लागू करेगा।

फिर से, सुरुचिपूर्ण लेकिन कार्यात्मक नहीं।

 function myFunc(){
        $("#myModal").on('hidden.bs.modal', function (e) {
            // Invoke your server side code here.
        });
        $("#myModal").modal("hide");
 };

जैसा कि आप देख सकते हैं, जब myFuncआह्वान किया जाता है, तो यह मोडल को छिपाएगा और फिर सर्वर साइड कोड को लागू करेगा।

Answer 12

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

$("a.close").on("click", function(e){
  $("#modal").modal("hide");
  e.stopPropagation();
});

Answer 13

यहाँ डॉक्टर है: http://getbootstrap.com/javascript/#modals-methods

यहाँ विधि है: $ ('# myModal')। मोडल ('छिपाएँ')

यदि आपको अलग-अलग सामग्री के साथ कई बार मोडल खोलने की आवश्यकता होती है, तो मैं आपको (मुख्य js में) जोड़ने का सुझाव देता हूं:

$('body').on('hidden.bs.modal', '.modal', function () {
      $(this).removeData('bs.modal');
    });

तो आप अगले उद्घाटन के लिए सामग्री को साफ करेंगे और एक तरह के कैशिंग से बचेंगे

Answer 14

$('.modal-backdrop').hide(); // for black background
$('body').removeClass('modal-open'); // For scroll run
$('#modal').modal('hide'); 

Answer 15

यहां तक ​​कि मेरे पास एक ही तरह के मुद्दे हैं। इसने मेरी बहुत मदद की

$("[data-dismiss=modal]").trigger({ type: "click" });

Answer 16

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

$("#MyModal .close").click();

Answer 17

$('#modal').modal('hide');और इसके वेरिएंट ने मेरे लिए तब तक काम नहीं किया जब तक मेरे पास data-dismiss="modal"कैंसिल बटन पर एक विशेषता के रूप में नहीं था । आप की तरह, मेरी ज़रूरतें कुछ अतिरिक्त तर्क के आधार पर संभवतः / संभवतः बंद नहीं थीं - इसलिए data-dismiss="modal"एकमुश्त लिंक पर क्लिक करना ऐसा नहीं होगा। मेरे पास एक छिपा हुआ बटन था जिसके साथ data-dismiss="modal"मैं प्रोग्रामर को क्लिक हैंडलर से आमंत्रित कर सकता था, इसलिए

<a id="hidden-cancel" class="hide" data-dismiss="modal"></a>
<a class="close btn">Cancel</a>

और फिर रद्द करने के लिए क्लिक हैंडलर्स के अंदर जब आपके पास आपके लिए आवश्यक मोडल को बंद करने की आवश्यकता हो

$('#hidden-cancel').click();

Comments

मेरे मामले में (एस्प नेट रेजर पेज) मेरे पास यह ओपी के अनुरूप था: मेरे पास क्लास "मोडल" के साथ कुछ हद तक खाली डिव था और गतिशील रूप से इसमें एक cshtml फ़ाइल जोड़ी गई, जैसे मोडल बॉडी और इस के एक बटन पर एक क्लिक जोड़ा गया; जैसे ही मोडल दिखाया जाएगा शरीर। कॉलिंग ".मॉडल ('छिपाना)" केवल पर्याप्त नहीं था, जैसा कि आपने बताया: "डेटा-खारिज =" मोडल "" इनवोकिंग बटन पर सौदा था !!! ty

— Csharpest

Answer 18

हमें इवेंट बबलिंग का ध्यान रखने की आवश्यकता है। कोड की एक पंक्ति जोड़ने की आवश्यकता है

$("#savechanges").on("click", function (e) {
        $("#userModal").modal("hide");
        e.stopPropagation(); //This line would take care of it
    });

Answer 19

मुझे लगता है कि यह एक पुराना प्रश्न है, लेकिन मैंने पाया कि इनमें से कोई भी वास्तव में ऐसा नहीं था जो मैं वास्तव में खोज रहा था। ऐसा लगता है कि मोडल को बंद करने से पहले दिखाने की कोशिश करने के कारण ऐसा होता है।

मेरा समाधान @ schoonie23 के उत्तर पर आधारित था लेकिन मुझे कुछ चीजों को बदलना पड़ा।

सबसे पहले, मैंने अपनी स्क्रिप्ट के शीर्ष पर एक वैश्विक चर घोषित किया:

<script>
    var closeModal = false;
    ...Other Code...

फिर मेरे मोडल कोड में:

$('#myModal').on('show.bs.modal', function (event) {
    ...Some Code...
    if (someReasonToHideModal) {
        closeModal = true;
        return;
    }
    ...Other Code...

फिर यह: (नोट नाम 'show.bs.modal' दर्शाता है कि मोडल ने 'शो' के विपरीत पूरी तरह से दिखाया है जो शो इवेंट कहे जाने पर ट्रिगर करता है। (मैंने मूल रूप से सिर्फ 'दिखाए' की कोशिश की थी लेकिन यह काम नहीं किया। )

$('#myModal').on('shown.bs.modal', function (event) {
    if (closeEditModal) {
        $('#myModal').modal('hide');
        closeModal = false;
    }
});

आशा है कि यह किसी दिन किसी अतिरिक्त शोध को बचाता है। इससे पहले कि मैं इस के साथ आने के लिए एक समाधान की तलाश में थोड़ा बिताया।

Answer 20

मैंने इस कोड का उपयोग किया है -

फीका आउट का उपयोग करके चिकनी प्रभाव के साथ मोडल छिपाएं।

$('#myModal').fadeOut();

$('.modal-backdrop').fadeOut();

$('.modal-open').css({'overflow': 'visible'});

Answer 21

यदि आप अपने मॉडल्स में क्लोज क्लास का उपयोग कर रहे हैं, तो निम्नलिखित काम करेगा। आपके उपयोग के मामले पर निर्भर करते हुए, मैं आमतौर पर केवल दृश्यमान मोडल को फ़िल्टर करने की सलाह देता हूं अगर करीबी वर्ग के साथ एक से अधिक मोडल हों।

$('.close:visible').click();

Answer 22

document.getElementById ( 'closeButton') पर क्लिक करें ()।; // मॉडल में एक तत्व के लिए एक डेटा-खारिज = "मोडल" विशेषता जोड़ें और इसे यह आईडी दें

Answer 23

यह बुरा अभ्यास है लेकिन आप इस तकनीक का उपयोग जावास्क्रिप्ट में क्लोज बटन कॉल करके मोडल को बंद करने के लिए कर सकते हैं। यह 3 सेकंड के बाद मोडल को बंद कर देगा।

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script>
window.onload=function()
{
setInterval(function(){ 

$("#closemodal").click();
}, 3000);

}
</script> 
</head>
<body>

   <div class="container">
 <h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal"   data-target="#myModal">Open Modal</button>

<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">

    <!-- Modal content-->
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">&times;</button>
      <h4 class="modal-title">Modal Header</h4>
    </div>
    <div class="modal-body">
      <p>Some text in the modal.</p>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal" id="closemodal">Close</button>
    </div>
  </div>

</div>
</div>

 </div>

</body>
</html>

Answer 24

यह सिर्फ HTML में किया जा सकता है:

data-dismiss="modal"

<button type="button" class="btn btn-secondary" data-dismiss="modal">Save</button>

Comments

@KevinFrancis क्योंकि प्रश्न नियंत्रक से यह करने के लिए एक प्रोग्रामेटिक तरीके की तलाश में है, न कि यह कैसे एक बटन बनाने के लिए।

— ग्रीनएजजादे