मैं बूटस्ट्रैप मॉडल को प्रोग्रामेटिक रूप से कैसे ट्रिगर कर सकता हूं?

204

अगर मैं यहां जाऊं

http://getbootstrap.com/2.3.2/javascript.html#modals

और 'डेमो मोडल लॉन्च करें' पर क्लिक करें यह अपेक्षित काम करता है। मैं अपने साइनअप प्रक्रिया के हिस्से के रूप में मोडल का उपयोग कर रहा हूं और इसमें सर्वर साइड सत्यापन शामिल है। यदि ऐसी समस्याएं हैं जो मैं अपने सत्यापन संदेशों के साथ उपयोगकर्ता को उसी मोडल पर पुनर्निर्देशित करना चाहता हूं। फिलहाल मैं यह पता नहीं लगा सकता कि उपयोगकर्ता से भौतिक क्लिक के अलावा प्रदर्शित करने के लिए मोडल कैसे प्राप्त करें। मैं प्रोग्राम को मॉडल कैसे लॉन्च कर सकता हूं?

javascript twitter-bootstrap

— होआ
स्रोत

365

मैन्युअल रूप से मोडल पॉप अप दिखाने के लिए आपको ऐसा करना होगा

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

आपको पहले इसे इनिशियलाइज़ करने की आवश्यकता है show: falseताकि यह तब तक न दिखे जब तक आप इसे मैन्युअल रूप से नहीं करते।

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

myModalमोडल कंटेनर की आईडी कहां है

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

धन्यवाद। वह काम कर गया। हालाँकि एक अवलोकन यह है कि जब मैं मोडल बॉक्स खोलता हूं, तो वह स्क्रॉलिंग को रीसेट करता है और अगर मैंने पेज के नीचे से मोडल बॉक्स को ट्रिगर किया, तो पेज स्क्रॉल हो जाता है। मैं उसे कैसे रोकूं?

— दिविवार्डन

@ डब: अजीब, यह काम करना चाहिए। नवीनतम मॉडल कोड देखें github.com/twitter/bootstrap/blob/master/js/bootstrap-modal.js । अब तक मैं देख रहा हूं, यह अभी भी काम करना चाहिए

— क्लाउडियो रेडी जूल

1

@ ClaudioRedi, मैंने कंसोल में दोनों की कोशिश की, मुझे पता चला कि क्रोमियम का उपयोग करके केवल एक ही काम करता है। $ ('# myModal')। मोडल ({शो: झूठी}) काम नहीं करता है, लेकिन $ ('# myModal')। मोडल ('छिपाने') काम करता है। यकीन नहीं क्यों

— Tyrone Wilson

1

क्या $ ('# myModel') जैसे विकल्प के रूप में एक कस्टम मूल्य या पैरामीटर पास करने का कोई तरीका है। मॉडल ({डेटा: 1, शो: असत्य})

— अनूप शर्मा

4

@divinedragon की उम्र बाद में मुझे पता है, लेकिन पृष्ठ के शीर्ष पर स्क्रॉल करने के साथ समस्या पॉपअप को ट्रिगर जैसे टैग के साथ ट्रिगर '<a href='#'>करने return falseया preventDefaultहैंडलर के अंदर या अंदर विफल होने के कारण होने की संभावना है । ब्राउज़र निर्देश के रूप में कर रहा है और डिफ़ॉल्ट एंकर को स्क्रॉल कर रहा है - पृष्ठ के शीर्ष। मैंने इसे कई बार काट लिया है क्योंकि हमारा सीएसएस कभी-कभी hrefस्टाइलिंग मैच के लिए सेट पर निर्भर करता है ।

— ब्रिचिन

54

आपको उस तत्व में डेटा-टॉगल = "मोडल" नहीं लिखना चाहिए जो मोडल को ट्रिगर करता है (एक बटन की तरह), और आप मैन्युअल रूप से इसके साथ मोडल दिखा सकते हैं:

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

और इसके साथ छिपाएँ:

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

— nandop
स्रोत

मेरे पास एक URL है जो डेटा-टॉगल के साथ मोडल खोलता है। फिर मोडल के अंदर मेरे पास एक बटन होता है जो एक फ़ंक्शन को कॉल करता है जो आखिरी काम करता है जो आपके द्वारा सुझाए गए छिपाने के तरीके का उपयोग करके मोडल को बंद कर रहा है। महान!

— जयजय

17

यदि आप एक प्रोग्राम मोडल निर्माण की तलाश कर रहे हैं, तो आप इसे पसंद कर सकते हैं:

http://nakupanda.github.io/bootstrap3-dialog/

भले ही बूटस्ट्रैप का मॉडल मोडल निर्माण के लिए एक जावास्क्रिप्ट तरीका प्रदान करता है, फिर भी आपको पहले मॉडल के HTML मार्कअप को लिखना होगा।

— nakupanda
स्रोत

13

एचटीएमएल

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg">
  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-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </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>
  </div>
</div>

जे एस

$('button').click(function(){
$('#myModal').modal('show');
});

DEMO JSFIDDLE

— tvshajeer
स्रोत

9

आप jquery (जावास्क्रिप्ट) के माध्यम से मॉडल दिखा सकते हैं

$('#yourModalID').modal({
  show: true
})

डेमो: यहाँ

या आप सिर्फ कक्षा "छिपाएं" हटा सकते हैं

<div class="modal" id="yourModalID">
  # modal content
</div>

— HaNdTriX
स्रोत

4

मैं इस angular (2/4)तरह से करना चाहता था , यहाँ मैंने किया है:

<div [class.show]="visible" [class.in]="visible" class="modal fade" id="confirm-dialog-modal" role="dialog">
..
</div>`

ध्यान देने योग्य महत्वपूर्ण बातें :

visible घटक में एक चर (बूलियन) है जो मोडल की दृश्यता को नियंत्रित करता है।
showऔर inबूटस्ट्रैप कक्षाएं हैं।

एक उदाहरण घटक और html

अंग

@ViewChild('rsvpModal', { static: false }) rsvpModal: ElementRef;
..
@HostListener('document:keydown.escape', ['$event'])
  onEscapeKey(event: KeyboardEvent) {
    this.hideRsvpModal();
  }
..
  hideRsvpModal(event?: Event) {
    if (!event || (event.target as Element).classList.contains('modal')) {
      this.renderer.setStyle(this.rsvpModal.nativeElement, 'display', 'none');
      this.renderer.removeClass(this.rsvpModal.nativeElement, 'show');
      this.renderer.addClass(document.body, 'modal-open');
    }
  }
  showRsvpModal() {
    this.renderer.setStyle(this.rsvpModal.nativeElement, 'display', 'block');
    this.renderer.addClass(this.rsvpModal.nativeElement, 'show');
    this.renderer.removeClass(document.body, 'modal-open');
  }

एचटीएमएल

<!--S:RSVP-->
<div class="modal fade" #rsvpModal role="dialog" aria-labelledby="niviteRsvpModalTitle" (click)="hideRsvpModal($event)">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="niviteRsvpModalTitle">

                </h5>
                <button type="button" class="close" (click)="hideRsvpModal()" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary bg-white text-dark"
                    (click)="hideRsvpModal()">Close</button>
            </div>
        </div>
    </div>
</div>
<!--E:RSVP-->

— आनंद रॉकज़
स्रोत

2

ओपन कोड पर ओपन मोडल () फ़ंक्शन और क्लोजमॉडल पर बंद करने के लिए उपयोगी निम्न कोड ():

      function openModal() {
          $(document).ready(function(){
             $("#myModal").modal();
          });
      }

     function closeModal () {
          $(document).ready(function(){
             $("#myModal").modal('hide');
          });  
      }

/ * #myModal मोडल पॉपअप की आईडी है * /

— रोहित भाग
स्रोत

1

उत्तर पोस्ट करते समय कृपया बताएं कि कोड क्या करता है।

— आर्टेमिस अभी भी