ट्विटर बूटस्ट्रैप मोडल कैसे बंद करें (आरंभिक लॉन्च के बाद)

Question

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

<div class="modal visible-phone" id="myModal">
  <div class="modal-header">
    <button class="close" data-dismiss="modal">×</button>
    <h3>text introductory<br>want to navigate to...</h3>
 </div>
 <div class="modal-body">
    <ul class="nav">
      <li> ... list of links here </li>
    </ul>
   </div>
  </div>

Html के निचले हिस्से में मैंने jquery.js (पहला) और बूटस्ट्रैप.modal.js और bootstrap.transition.js डाला। वास्तव में बूटस्ट्रैप जेएस मॉड्यूल के सभी (एक शामिल याद नहीं करने के लिए)। मैं js के साथ अनुभवी नहीं हूँ ।।

कृपया मुझे क्षमा करें यदि मैंने वास्तव में मूर्खतापूर्ण प्रश्न प्रस्तुत किया। मुझे लॉग में इस विशिष्ट स्थिति का उत्तर नहीं मिला।

Answer 1

$('#myModal').modal('hide') करना चाहिए

Comments

हाँ, यह काम कर रहा है। लेकिन मेरे पास एक ही एनीमेशन नहीं है जो हमारे पास 'डेटा-खारिज = "मॉडल" का उपयोग कर रहा है? "

— क्रिस

ठीक है मेरी गलती। वास्तव में मुझे उस समय की बात याद नहीं है, मैं अब इसका उपयोग करता हूं और यह पूरी तरह से काम करता है। स्व-परीक्षा!

— क्रिस

यहां और जानें .. stackoverflow.com/questions/10944302/…

— संजय कुमार

यह अजीब है, $('#myModal').modal('show')मेरे लिए काम करता है, लेकिन छिपाना नहीं है।

— शार्लेट

@LittleBigBot $('#myModal').modal('toggle');इसके बजाय का उपयोग करने का प्रयास करें

— एडसन होरासियो जूनियर

Answer 2

मुझे बूटस्ट्रैप मोडल डायलॉग को बंद करने में समस्या थी, अगर इसे इसके साथ खोला गया था:

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

मैंने निम्नलिखित लिंक द्वारा संवाद खोलने की इस समस्या को हल किया:

<a href="#myModal" data-toggle="modal">Open my dialog</a>

आरंभीकरण को न भूलें:

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

मैंने समापन बटन के लिए निम्नलिखित विशेषताओं का भी उपयोग किया है:

data-dismiss="modal" data-target="#myModal"

Comments

हाय आर्टजोम। Thnx! इसे चलाएंगे और प्रतिक्रिया देंगे। आप मोडल खोलने के लिए à बटन का उपयोग नहीं कर रहे हैं? जैसा कि मैं हासिल करने की कोशिश कर रहा हूं। आरंभ में केवल मोबाइल लॉन्च करें और स्थान पर त्वरित नेविगेशन मेनू पेश करने के लिए मोबाइल पर (डेस्कटॉप पर सीधे प्रासंगिक नहीं) यही विचार है।

— मोनिक डे हास

हां डेटा-खारिज = "मोडल" डेटा-लक्ष्य = "# myModal" ने मेरी संभावना को हल किया! appriciate!

— धीरज थेडिजे

Answer 3

मोडल में वर्ग छिपाने को जोड़ें

<!-- Modal Demo -->
<div class="modal hide" id ="myModal" aria-hidden="true" >

जावास्क्रिप्ट कोड

 <!-- Use this to hide the modal necessary for loading and closing the modal-->
 <script>
     $(function(){
         $('#closeModal').click(function(){
              $('#myModal').modal('hide');
          });
      });
 </script>

 <!-- Use this to load the modal necessary for loading and closing the modal-->
 <script>
     $(function () {
         $('#myModal').modal('show');
     });
  </script>

Answer 4

.modal ('hide') मैन्युअल रूप से एक मोडल छुपाता है। अपने बूटस्ट्रैप मॉडल को बंद करने के लिए निम्न कोड का उपयोग करें

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

यहाँ काम कोडपेन पर एक नज़र डालें

या

यहाँ कोशिश करो

$(function () {
    $(".custom-close").on('click', function() {
        $('#myModal').modal('hide');
    });
});

<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.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>

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

<!-- 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" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        
          
          <a class="custom-close"> My Custom Close Link </a>
          
          
      </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><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Answer 5

वास्तव में मोडल निर्दिष्ट करने का प्रयास करें कि बटन डेटा-लक्ष्य के साथ बंद होना चाहिए। तो आपका बटन निम्नलिखित की तरह दिखना चाहिए -

<button class="close" data-dismiss="modal" data-target="#myModal">×</button>

साथ ही, आपको केवल bootstrap.modal.js चाहिए, ताकि आप दूसरों को सुरक्षित रूप से हटा सकें।

संपादित करें: यदि यह काम नहीं करता है, तो दृश्य-फ़ोन वर्ग को हटा दें और फ़ोन के बजाय अपने पीसी ब्राउज़र पर परीक्षण करें। यह दिखाएगा कि क्या आपको जावास्क्रिप्ट त्रुटियां मिल रही हैं या यदि उदाहरण के लिए इसकी संगतता समस्या है।

संपादित करें: डेमो कोड

<html>
<head>
    <title>Test</title>
    <link href="/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="/Scripts/bootstrap.modal.js" type="text/javascript"></script>

    <script type="text/javascript">
      $(document).ready(function () {
        if( navigator.userAgent.match(/Android/i)
            || navigator.userAgent.match(/webOS/i)
            || navigator.userAgent.match(/iPhone/i)
            || navigator.userAgent.match(/iPad/i)
            || navigator.userAgent.match(/iPod/i)
            || navigator.userAgent.match(/BlackBerry/i)
          ) {
          $("#myModal").modal("show");
        }

        $("#myModalClose").click(function () {
          $("#myModal").modal("hide");
        });
      });
    </script>
</head>
<body>
    <div class="modal hide" id="myModal">
      <div class="modal-header">
        <a class="close" id="myModalClose">×</a>
        <h3>text introductory<br>want to navigate to...</h3>
     </div>
     <div class="modal-body">
        <ul class="nav">
          <li> ... list of links here </li>
        </ul>
   </div>
  </div>
</body>
</html>

Comments

हाय @Simon कनिंघम जवाब देने के लिए एक लाख Tnx! मैंने डेटा-लक्ष्य में रखा है। काम नहीं किया (दुर्भाग्य से) फिर मैंने दृश्यमान-फोन वर्ग को हटा दिया। फर्क नहीं पड़ा। code <div class = "modal दृश्य-फोन" id = "myModal"> <div class = "modal-header"> <बटन वर्ग = "करीब" डेटा-खारिज = "modal" डेटा-लक्ष्य = "# myModal"> × </ बटन> <h3> पाठ परिचायक <br> पर नेविगेट करना चाहते हैं ... </ h3> </ div> <div class = "modal-body"> <ul class = "nav"> <li> ।। यहाँ लिंक की सूची </ li> <li> लिंक 2 </ li> <li> लिंक 3 </ li> </ ul> </ div> </ div>code

<div class="modal visible-phone" id="myModal"> <div class="modal-header"> <button class="close" data-dismiss="modal" data-target="#myModal">×</button> <h3>text introductory<br>want to navigate to...</h3> </div> <div class="modal-body"> <ul class="nav"> <li> ... list of links here </li> <li> link2 </li> <li> link3 </li> </ul> </div> </div>

— मोनिक डे हास

पाठ गड़बड़ के लिए खेद है;) मैंने आपकी सलाह का पालन किया। करीबी बटन को सटीक डेटा-लक्ष्य देने के लिए तार्किक लगता है। लेकिन किसी तरह मैं अभी भी काम करने के लिए नहीं मिल रहा हूँ। दिखाई देने वाले फोन को अक्षम करने पर भी। बंद बटन को प्रभावित नहीं करता है। (जो एक अच्छी बात है)

— मोनिक डे हास

आप शुरू में अपना मोडल कैसे खोल रहे हैं? इसे नीचे दिए अनुसार खोलने का प्रयास करें - <a data-toggle="modal" href="#myModal" class="btn"> ओपन मोडल </a>

— साइमन कनिंघम

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

— साइमन कनिंघम

Answer 6

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

यहाँ देखें कि मैंने यह कैसे किया

$('#modal-id').modal('toggle'); //Hide the modal dialog
$('.modal-backdrop').remove(); //Hide the backdrop
$("body").removeClass( "modal-open" ); //Put scroll back on the Body

Comments

यह वास्तव में सही "ब्रूट फोर्स" उत्तर है .. लेकिन मैं इसे एनीमेशन को सही करने के लिए इसे फिर से लिखने का सुझाव देता $("#modal-id").modal("toggle"); $(".modal-backdrop").fadeOut('fast',function(){ $("body").removeClass( "modal-open" ); $(".modal-backdrop").remove(); });

— हूं

Answer 7

इस पर प्रयास करें ।।

$('body').removeClass('modal-open');

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

Answer 8

मुझे iPhone या डेस्कटॉप में एक ही समस्या थी, बंद बटन दबाने पर संवाद बंद करने का प्रबंधन नहीं किया।

मुझे पता चला कि <button>टैग एक क्लिक करने योग्य बटन को परिभाषित करता है और एक तत्व का अनुसरण करने के लिए टाइप विशेषता निर्दिष्ट करने की आवश्यकता होती है:

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

बूटस्ट्रैप मॉडल्स के लिए उदाहरण कोड की जाँच करें: बूटस्ट्रैप जावास्क्रिप्ट पेज

Answer 9

यदि आपके पास कुछ मोडल एक साथ दिखाए गए हैं, तो आप विशेषताओं के साथ इन-मोडल बटन के लिए लक्ष्य मोडल निर्दिष्ट कर सकते हैं data-toggleऔर data-target:

<div class="modal fade in" id="sendMessageModal" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog modal-sm">
           <div class="modal-content">
                <div class="modal-header text-center">
                     <h4 class="modal-title">Modal Title</h4>
                     <small>Modal Subtitle</small>
                </div>
                <div class="modal-body">
                     <p>Modal content text</p>
                </div>
                <div class="modal-footer">
                     <button type="button" class="btn btn-default pull-left" data-toggle="modal" data-target="#sendMessageModal">Close</button>
                     <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#sendMessageModal">Send</button>
                </div>
           </div>
      </div>
 </div>

कहीं और मोडल कोड के बाहर आपके पास एक और टॉगल बटन हो सकता है:

<a href="index.html#" class="btn btn-default btn-xs" data-toggle="modal" data-target="#sendMessageModal">Resend Message</a>

उपयोगकर्ता इन बटन को छिपाते समय इन-मोडल टॉगल बटन पर क्लिक नहीं कर सकता है और यह "modal"विशेषता के लिए विकल्प के साथ काम करता है data-toggle। यह योजना ऑटोमैटिकली काम करती है!

Answer 10

यहाँ पेज रिफ्रेश के बिना न केवल मोडल को बंद करने का एक स्निपेट है, बल्कि इसे दबाने पर मोडल को जमा करता है और बिना रिफ्रेश किए बंद हो जाता है

मैंने इसे अपनी साइट पर स्थापित किया है, जहां मेरे पास कई मोडल हो सकते हैं और कुछ मॉडल्स सबमिट पर डेटा प्रोसेस करते हैं और कुछ नहीं। मैं जो भी करता हूं वह प्रत्येक मॉडल के लिए एक अद्वितीय आईडी बनाता है जो प्रसंस्करण करता है। मेरे वेबपेज में उदाहरण के लिए:

HTML (मोडल पाद लेख):

 <div class="modal-footer form-footer"><br>
              <span class="caption">
                <button id="PreLoadOrders" class="btn btn-md green btn-right" type="button" disabled>Add to Cart&nbsp; <i class="fa fa-shopping-cart"></i></button>     
                <button id="ClrHist" class="btn btn-md red btn-right" data-dismiss="modal" data-original-title="" title="Return to Scan Order Entry" type="cancel">Cancel&nbsp; <i class="fa fa-close"></i></a>
              </span>
      </div>

jQuery:

$(document).ready(function(){
// Allow enter key to trigger preloadorders form
    $(document).keypress(function(e) {       
      if(e.which == 13) {   
          e.preventDefault();   
                if($(".trigger").is(".ok")) 
                   $("#PreLoadOrders").trigger("click");
                else
                    return;
      }
    });
});

जैसा कि आप देख सकते हैं कि यह सबमिट प्रसंस्करण करता है, यही वजह है कि मेरे पास इस मोडल के लिए jQuery है। अब कहते हैं कि मेरे पास इस वेबपेज के भीतर एक और मोडल है, लेकिन कोई प्रोसेसिंग नहीं की जाती है और चूंकि एक मोडल एक समय में खुला होता है, इसलिए मैं एक और $(document).ready()वैश्विक php / js स्क्रिप्ट में डाल देता हूं, जो सभी पेजों को मिलता है और मैं मॉडल के करीब बटन को एक क्लास देता हूं ".modal-close":

HTML:

<div class="modal-footer caption">
                <button type="submit" class="modal-close btn default" data-dismiss="modal" aria-hidden="true">Close</button>
            </div>

jQuery (global.inc शामिल करें):

  $(document).ready(function(){
         // Allow enter key to trigger a particular button anywhere on page
        $(document).keypress(function(e) {
                if(e.which == 13) {
                   if($(".modal").is(":visible")){   
                        $(".modal:visible").find(".modal-close").trigger('click');
                    }
                }
         });
    });