बूटस्ट्रैप मोडल को बंद करें

Question

मेरे पास बूटस्ट्रैप मॉडल डायलॉग बॉक्स है जिसे मैं शुरू में दिखाना चाहता हूं, फिर जब उपयोगकर्ता पृष्ठ पर क्लिक करता है, तो वह गायब हो जाता है। मेरे पास निम्नलिखित हैं:

$(function () {
   $('#modal').modal(toggle)
});

 <div class="modal" id='modal'>
     <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">Error:</h3>
        </div>
        <div class="modal-body">
        <p>Please correct the following errors:</p>
        </div>
     </div>
 </div>

मोडल को शुरू में प्रदर्शित किया जाता है, लेकिन यह मोडल के बाहर क्लिक करने पर बंद नहीं होता है। इसके अलावा, सामग्री क्षेत्र को बाहर नहीं निकाला गया है .. मैं शुरू में प्रदर्शित करने के लिए मॉडल कैसे प्राप्त कर सकता हूं, फिर क्षेत्र के बाहर उपयोगकर्ता क्लिकों के बाद बंद हो सकता है? और कैसे मैं पृष्ठभूमि के रूप में धूसर हो पृष्ठभूमि पा सकते हैं?

Comments

क्या आप अपने मॉडल के साथ आरंभ कर रहे हैं $("#yourModal").modal()या $('.modal').modal()?

— मर्व

ऊपर और संदर्भ जोड़ा गया। किसी भी विचार के लिए धन्यवाद @ merv!

— निक बी

हाँ ... कि समस्या से पता चला है। @ तमील के पास आपका हल है।

— मर्व

Answer 1

के modal('toggle')बजाय रखोmodal(toggle)

$(function () {
   $('#modal').modal('toggle');
});

Comments

जिसमें 'टॉगल' शामिल है, बहुत ही शानदार है। बस यह सुनिश्चित करें कि मोडल डिव पर 'हाईड ’क्लास न हो। लेकिन हां, टाइपो मुद्दा बना रहा था। इसलिए +1

— मर्व

नहीं, यह इरादा के अनुसार काम नहीं करता है, यह मोडल तत्व को छुपाता है लेकिन पृष्ठभूमि ओवरले तत्व अभी भी मौजूद है, आपको @Subodth समाधान का उपयोग करना चाहिए।

— पारीक तिवारी

@ पियरे - अपनी टिप्पणी को हटाने पर विचार करें, .modal ()। Hide () .modal ('hide') के समान नहीं है, आप लोगों को भ्रमित करने वाले हैं।

— माइकल पीटरसन

जैसा कि पारीक ने कहा, सही उत्तर मोडल ('छिपाना') का उपयोग कर रहा है

— MidouCloud

यह सही उत्तर नहीं है, नीचे दिए गए उत्तर की जांच करें!

— user1467439

Answer 2

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

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

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

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

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

Comments

$ ( '# मोडल') मोडल ( 'टॉगल')। मोडल शैडो को छिपाने के लिए बेहतर है

— हैमेज़हैंडहैंड

@ हमज़ेह.धनन्ध, toggleओवरले रखता है और कोई हल नहीं है। आपको हमेशा showया तो उपयोग करना चाहिए या hide।

— ryanpcmcquen

Answer 3

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

या

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

कार्य करना चाहिए।

लेकिन अगर और कुछ नहीं काम करता है तो आप सीधे मोडल क्लोज बटन को कॉल कर सकते हैं:

$("#modal .close").click()

Comments

छिपाने वाला () मोडल बंद कर देता है लेकिन पृष्ठभूमि को धुंधला कर देता है। $ ("# modal .close")। क्लिक करें () यह पूरी तरह से करता है। धन्यवाद!

— शिल्पा

यह पहले से ही स्पष्ट रूप से प्रलेखित है, यहाँ एक क्लिक पर नकली की आवश्यकता नहीं है, जो कि बहुत ही अजीब लगता है। सही उत्तर है: $ ('# मोडल')। मोडल ('छिपाने');

— माइकल पीटरसन

यह -> $ ('# मोडल')। मोडल ()। छिपाने ();

— तारा

मेरे पास एक मॉडल है जो $('#modal').modal('hide')हालांकि मेरे साथ बंद नहीं होता है लेकिन मैं इसका उपयोग कर बंद कर सकता हूं $('#modal').modal('toggle')लेकिन यह बंद करने के बाद एक ऊर्ध्वाधर स्क्रॉल बार प्रदर्शित करता है। तो मेरे लिए $('#modal').hide()पूरी तरह से काम किया है, लेकिन मुझे पता है कि क्या कोई समस्या पैदा करेगा? और मैं अंदर कोडिंग कर $('#modal .close').click()रहा हूं इसलिए मुझे नहीं लगता कि मैं इसे मोडल को बंद करने के लिए उपयोग कर सकता हूं।

— अहिष्टम्

Answer 4

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

<span class="button" data-dismiss="modal" aria-label="Close">cancel</span>

इस लिंक का उपयोग मोडल पास

Answer 5

$("#your-modal-id").modal('hide');

इस कॉल को क्लास के माध्यम से चलाने से ($(".my-modal"))काम नहीं चलेगा।

Answer 6

इसे इस्तेमाल करे

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

Comments

मुझे लगता है कि यह प्रश्न का उत्तर प्रदान करता है।

— जकदेव

मैं सहमत हूँ। यह उत्तर प्रश्न के लिए अधिक सटीक है।

— mikeyq6

यह सबसे उत्थान की तुलना में बेहतर उत्तर है।

— 18

@ MarceloAgimóvel :-)

— प्रेम कुमार

Answer 7

यह एक बहुत अच्छा है और यह कोणीय 2 में भी काम करता है

$("#modal .close").click()

Comments

मेरे बजाय उसके लिए काम करता है $('#modal').modal('toggle');जिसका कोई प्रभाव नहीं है।

— टोडर टोडोरोव

Answer 8

इस पर मेरा पांच सेंट है कि मैं एक आईडी के साथ बूटस्ट्रैप मॉडल को लक्षित नहीं करना चाहता हूं और यह देखना है कि एक बार में केवल एक ही मोडल होना चाहिए, मोडल को हटाने के लिए निम्नलिखित पर्याप्त होना चाहिए क्योंकि टॉगल खतरनाक हो सकता है :

$('.modal').removeClass('show');

Comments

इरादे अच्छे हैं, लेकिन यह दृष्टिकोण हमेशा काम नहीं करेगा। सहित <body>, अन्य पृष्ठ तत्वों में उनके साथ जोड़े जाने वाले वर्ग शामिल हैं , जिन्हें वापस भी करना होगा। सबसे अच्छा जवाब 'hide'विधि का उपयोग करना है।

— जस्टिनस्टोले

Answer 9

कुछ परिस्थितियों में टाइपिंग की गलती अपराधी हो सकती है। उदाहरण के लिए, सुनिश्चित करें कि आपके पास:

data-dismiss="modal"

और नहीं

data-dissmiss="modal"

दूसरे उदाहरण में दोहरे "ss" पर ध्यान दें, जो बंद करें बटन के कारण विफल हो जाएगा।

Answer 10

हम निम्नलिखित तरीकों से मोडल पॉप-अप को बंद कर सकते हैं:

// We use data-dismiss property of modal-up in html to close the modal-up,such as

<div class='modal-footer'><button type='button' class="btn btn-default" data-dismiss='modal'>Close</button></div>

 // We can close the modal pop-up through java script, such as

 <div class='modal fade pageModal'  id='openModal' tabindex='-1' data-keyboard='false' data-backdrop='static'>

    $('#openModal').modal('hide'); //Using modal pop-up Id.
    $('.pageModal').modal('hide'); //Using class that is defined in modal html.

Answer 11

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

यदि आप एक पृष्ठ में कई मोडल पॉप का उपयोग कर रहे हैं तो मोडल की पृष्ठभूमि को छिपाने के लिए उपरोक्त कोड का उपयोग करें।

Comments

या केवल $('.modal').modal('hide');करेंगे।

— मैट रॉय

Answer 12

<!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/2.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(window).load(function(){
      $('#myModal').modal('show');
});
$(function () {
   $('#modal').modal('toggle');
});
</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">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
</div>

</body>
</html>

Comments

त्रुटि: "संदेश": "

— बिना पढ़ा हुआ टाइपर

हाँ। यदि क्रोम (लिनक्स मिंट) में "रन कोड स्निपेट" है, तो मुझे त्रुटि है। लेकिन यह फ़ायरफ़ॉक्स में काम करता है।

— इवान बर्लुत्स्की

@ इवान बर्लुत्सिकी, मुझे सूचित करने के लिए धन्यवाद, ये एक समस्या है जिसमें jquery शामिल है, इसलिए मैंने इसे ठीक किया। अब यह सभी ब्राउज़रों में ठीक काम करता है।

— गणेश पुट्टा

Answer 13

   function Delete(){
       var id = $("#dgetid").val();
       debugger
       $.ajax({
           type: "POST",
           url: "Add_NewProduct.aspx/DeleteData",
           data: "{id:'" + id + "'}",
           datatype: "json",
           contentType: "application/json; charset=utf-8",
           success: function (result) {
               if (result.d == 1) {
                   bindData();
                   setTimeout(function(){ $('#DeleteModal').modal('hide');},1000);
               }
           }
       });
   };

Comments

नमस्कार, आपके जवाब के लिए धन्यवाद। मैंने इसे कोड के रूप में स्वरूपित किया है (जो काफी सरल था - बस पहली पंक्ति को थोड़ा और अधिक इंडेंट करें)। हालाँकि मुझे लगता है कि केवल $('#DeleteModal').modal('hide');यहाँ प्रासंगिक है?

— Rup

Answer 14

आप उपयोग कर सकते हैं;

$('#' + $('.modal.show').attr('id')).modal('hide');

Answer 15

Modal.hide का प्रयोग केवल modal को छिपाएगा। यदि आप मोडल के नीचे ओवरले का उपयोग कर रहे हैं, तो यह अभी भी वहाँ होगा। वास्तव में मोडल को बंद करने और ओवरले को हटाने के लिए क्लिक कॉल का उपयोग करें।

$("#modalID .close").click()

Answer 16

ऐसा करने का एक और तरीका यह है कि पहले आप क्लास मोडल-ओपन को हटा दें, जो मोडल को बंद कर देता है। फिर आप क्लास मोडल-बैकड्रॉप को हटाते हैं जो मोडल के ग्रेईश कवर को हटाता है।

निम्नलिखित कोड का उपयोग किया जा सकता है:

$('body').removeClass('modal-open')
$('.modal-backdrop').remove()  

Comments

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

— फ्राई

ठीक है, इसलिए मूल रूप से यह जो करता है वह क्लास मोडल-ओपन को हटा देता है, जो मोडल को बंद कर देता है। इसके बाद क्लास मोडल-बैकड्रॉप को हटा देता है जो मोडल के भूरे रंग के आवरण को हटा देता है

— ओरोज़कॉर्प

Answer 17

मैंने इस ट्रिक के साथ modal Programming को बंद कर दिया है

मोडल के साथ एक बटन जोड़ें और बटन को data-dismiss="modal"छिपाएँ display: none। यहाँ है कि यह कैसा दिखेगा

<div class="modal fade" id="addNewPaymentMethod" role="dialog">
  <div class="modal-dialog">
   .
   .
   .
   <button type="button" id="close-modal" data-dismiss="modal" style="display: none">Close</button>
  </div>
</div>

अब जब आप मोडल को बंद करना चाहते हैं तो प्रोग्रामिक रूप से उस बटन पर क्लिक इवेंट को ट्रिगर करें, जो उपयोगकर्ता को दिखाई नहीं देता है

जावास्क्रिप्ट में आप इस तरह उस बटन पर क्लिक कर ट्रिगर कर सकते हैं:

document.getElementById('close-modal').click();

Answer 18

इस कोड ने मेरे लिए एक मोडल को बंद करने के लिए पूरी तरह से काम किया (मैं बूटस्ट्रैप 3.3 का उपयोग कर रहा हूं)

$('#myModal').removeClass('in')

Answer 19

मेरे मामले में, मुख्य पृष्ठ जहाँ से बूटस्ट्रैप मोडल ट्रिगर किया गया था $("#modal").modal('toggle');, जिस तरह से उपयोग करने के बाद जवाब नहीं देना शुरू किया , लेकिन निम्नलिखित में जवाब देना शुरू कर दिया:

$("#submitBtn").on("click",function(){
  $("#submitBtn").attr("data-dismiss","modal");
});

Answer 20

यह अच्छा काम करता है

$(function () {
   $('#modal').modal('toggle');
});

हालाँकि, जब आपके पास एक-दूसरे के ऊपर ढेर सारे मोडल होते हैं, तो यह प्रभावी नहीं होता है, इसलिए इसके बजाय यह काम करता है

data-dismiss="modal"

Answer 21

कुछ परीक्षण के बाद, मैंने पाया है कि के लिए बूटस्ट्रैप मोडल जरूरत को क्रियान्वित करने से पहले कुछ समय के लिए प्रतीक्षा करने $(.modal).modal('hide')को क्रियान्वित करने के बाद $(.modal).modal('show')। और मैंने अपने मामले में पाया कि मुझे दोनों के बीच कम से कम 500 मिलीसेकंड अंतराल की आवश्यकता है।
तो यह मेरा परीक्षण मामला और समाधान है:

$('.modal-loading').modal('show');
setTimeout(function() {
  $('.modal-loading').modal('hide');
}, 500);

Comments

यह उन मुद्दों को हल करता है जिनके साथ मैंने मोडल को बंद नहीं किया था क्योंकि मैं एक और एक को खोलता हूं, धन्यवाद

— हेल ​​9000

Answer 22

आप इस संदर्भ को देख सकते हैं लेकिन यदि यह लिंक हटा दिया गया है, तो इस विवरण को पढ़ें:

जावास्क्रिप्ट के एक लाइन के साथ आईडी myModal के साथ एक मोडल कॉल करें:

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

विकल्प

विकल्प डेटा विशेषताओं या जावास्क्रिप्ट के माध्यम से पारित किया जा सकता है। डेटा विशेषताओं के लिए, डेटा का विकल्प नाम संलग्न करें- जैसा कि डेटा-बैकड्रॉप = "" में है ।

|-----------|-------------|--------|---------------------------------------------|
| Name      | Type        | Default| Description                                 |
|-----------|-------------|--------|---------------------------------------------|
| backdrop  | boolean or  | true   | Includes a modal-backdrop element.          |
|           | the string  |        | Alternatively, specify static for a         |
|           | 'static'    |        | backdrop which doesn't close the modal      |
|           |             |        | on click.                                   |
|           |             |        |                                             |
| keyboard  | boolean     | true   | Closes the modal when escape key is pressed.|   
|           |             |        |                                             |
| focus     | boolean     | true   | Puts the focus on the modal when initialized|       
|           |             |        |                                             |
| show      | boolean     | true   | Shows the modal when initialized.           |
|-----------|-------------|--------|---------------------------------------------|

तरीके

अतुल्यकालिक तरीके और संक्रमण

सभी एपीआई तरीके अतुल्यकालिक हैं और एक संक्रमण शुरू करते हैं। संक्रमण शुरू होते ही वे कॉलगर्ल के पास लौट आते हैं लेकिन समाप्त होने से पहले। इसके अलावा, एक संक्रमण घटक पर एक विधि कॉल को अनदेखा किया जाएगा।

अधिक जानकारी के लिए हमारे जावास्क्रिप्ट प्रलेखन देखें।

.modal (विकल्प)

एक मोडल के रूप में अपनी सामग्री को सक्रिय करता है। एक वैकल्पिक विकल्प वस्तु को स्वीकार करता है।

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

.modal ( 'टॉगल')

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

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

.modal ( 'शो')

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

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

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

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

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

.modal ( 'handleUpdate')

यदि मोडल की ऊंचाई खुली रहती है, तो यह मॉडल की स्थिति को मैन्युअल रूप से रीडायरेक्ट करता है (यानी स्क्रॉलबार दिखाई देने पर)।

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

.modal ( 'निपटाने')

एक तत्व के मोडल को नष्ट कर देता है।

आयोजन

बूटस्ट्रैप का मोडल वर्ग मोडल कार्यक्षमता में हुकिंग के लिए कुछ घटनाओं को उजागर करता है। सभी मोडल घटनाओं को मोडल में ही निकाल दिया जाता है (यानी ** पर)। टाइप करें विवरण

|----------------|--------------------------------------------------------------|
| Event Type     | Description                                                  |
|----------------|--------------------------------------------------------------|
| show.bs.modal  | This event fires immediately when the **show** instance      |
|                | method is called. If caused by a click, the clicked element  |
|                | is available as the **relatedTarget** property of the event. | 
|                |                                                              |
| shown.bs.modal | This event is fired when the modal has been made visible to  |
|                | the user (will wait for CSS transitions to complete). If     |
|                | caused by a click, the clicked element is available as the   | 
|                | **relatedTarget** property of the event.                     |
|                |                                                              |
| hide.bs.modal  | This event is fired immediately when the **hide** instance   |
|                | method has been called.                                      |
|                |                                                              |
| hidden.bs.modal| This event is fired when the modal has finished being hidden |
|                | from the user (will wait for CSS transitions to complete).   |
|----------------|--------------------------------------------------------------|

$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

Answer 23

इसके अलावा, आप एक 'x' पर "क्लिक" कर सकते हैं, जो संवाद को बंद कर देता है। उदाहरण के लिए:

$(".ui-dialog-titlebar-close").click();

Answer 24

मेरे मामले में, मैंने मोडल दिखाने के लिए एक बटन का उपयोग किया

<button type="button" class="btn btn-success" style="color:white"
    data-toggle="modal" data-target="#my-modal-to-show" >
    <i class="fas fa-plus"></i> Call MODAL
</button>

इसलिए मेरे कोड में, मोडल को बंद करने के लिए (जिसमें id = 'my-modal-to-show') मैं उस फ़ंक्शन को (कोणीय टाइपस्क्रिप्ट में) कहता हूं:

closeById(modalId: string) {
  $(modalId).modal('toggle');
  $(modalId+ ' .close').click();
}

अगर मैं $ (modalId) .modal ('छिपाएँ') कहता हूँ तो यह काम नहीं करता है और मुझे नहीं पता कि क्यों

पुनश्च: मेरे मोडल में मैंने .close वर्ग के साथ उस बटन तत्व को भी कोडित किया है

<button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
    <span aria-hidden="true">&times;</span>
</button>

Answer 25

कुछ बार समाधान ऊपर काम नहीं करता है, इसलिए आपके पास कक्षा में निकालने और सीएसएस डिस्प्ले जोड़ने के लिए ठीक से काम नहीं करना चाहिए: कोई भी मैन्युअल रूप से नहीं।

$("#modal").removeClass("in");
$("#modal").css("display","none");