আমি কীভাবে প্রোগ্রামটিমে বুটস্ট্র্যাপ মডেলটি ট্রিগার করতে পারি?

204

আমি যদি এখানে যাই

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

এবং 'লঞ্চ ডেমো মডেল' ক্লিক করুন এটি প্রত্যাশিত কাজটি করে। আমি আমার সাইনআপ প্রক্রিয়ার অংশ হিসাবে মডেলটি ব্যবহার করছি এবং এতে সার্ভার সাইডের বৈধতা জড়িত রয়েছে। যদি সমস্যা হয় তবে আমি আমার বৈধতা বার্তাগুলি প্রদর্শিত একই মডেলে ব্যবহারকারীকে পুনর্নির্দেশ করতে চাই। এই মুহুর্তে আমি বুঝতে পারি না কীভাবে ব্যবহারকারীর কাছ থেকে শারীরিক ক্লিক ছাড়া অন্য মডেলগুলি প্রদর্শন করতে পারি। আমি কীভাবে প্রোগ্রামটিকে মডেলটি চালু করতে পারি?

javascript twitter-bootstrap

— hoa
সূত্র

365

স্বয়ংক্রিয়ভাবে মডেল পপ আপ দেখানোর জন্য আপনাকে এটি করতে হবে this

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

আপনাকে পূর্বে এটি শুরু show: falseকরতে হবে যাতে আপনি ম্যানুয়ালি এটি না করা পর্যন্ত এটি প্রদর্শিত হবে না।

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

myModalমডেল ধারকটির আইডি কোথায় ।

— ক্লোদিও রেডি
সূত্র

ধন্যবাদ। যে কাজ করে। তবে একটি পর্যবেক্ষণটি হ'ল, যখন আমি মডাল বাক্সটি খুলি, এটি স্ক্রোলিংটি পুনরায় সেট করে এবং যদি আমি পৃষ্ঠার নীচ থেকে মডেল বাক্সটি ট্রিগার করি, পৃষ্ঠাটি শীর্ষে স্ক্রোল হয়ে যায়। আমি কীভাবে এটি বন্ধ করব?

— ডিভাইনড্রাগন

@ টিটবস: অদ্ভুত, এটি কাজ করা উচিত। সর্বশেষ মডেল কোড github.com/twitter/bootstrap/blob/master/js/bootstrap-modal.js দেখুন । আমি এখনও অবধি দেখছি, এটি এখনও কাজ করা উচিত

— ক্লোদিও রেডি

1

@ ক্লডিওরেডি, আমি কনসোলে উভয়ই চেষ্টা করে দেখেছি যে ক্রোমিয়াম ব্যবহার করে কেবল একজনই কাজ করে। $ ('# মাইমোডাল') mod মডেল ({দেখান: মিথ্যা}) কাজ করে না তবে $ ('# মাইমোডাল')। মোডাল ('লুকান') কাজ করে। কেন নিশ্চিত নয়

— টায়রন উইলসন

1

। ({মিথ্যা:: 1, ডেটা দেখান}) সেখানে $ মত বিকল্প হিসাবে কোনো কাস্টম মান বা প্যারামিটার পাস কোন ভাবেই ( '# myModel') মডেল

— অনুপ শর্মা

4

@ ডিভাইনড্রাগন যুগে যুগে পরে আমি জানি, তবে পৃষ্ঠার শীর্ষে স্ক্রোলিংয়ের বিষয়টি সম্ভবত পপআপটিকে একটি ট্যাগ দিয়ে ট্রিগার করা '<a href='#'>এবং হ্যান্ডলারের ভিতরে return falseবা preventDefaultভিতরে ব্যর্থ হওয়ার কারণে হতে পারে । ব্রাউজারটি নির্দেশ হিসাবে এবং ডিফল্ট অ্যাঙ্কর - পৃষ্ঠার শীর্ষে স্ক্রোল করছে doing আমার সিএসএস মাঝে মাঝে hrefস্টাইলিংয়ের জন্য একটি সেট রাখার উপর নির্ভর করে বলে আমি বেশ কয়েকবার আমাকে এই কামড় ফেলেছি ।

— brichins

54

আপনাকে সেই উপাদানটিতে ডেটা-টগল = "মডেল" লিখতে হবে না যা মডেলটি ট্রিগার করেছিল (একটি বোতামের মতো), এবং আপনি ম্যানুয়ালি এর সাথে মডেলটি প্রদর্শন করতে পারেন:

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

এবং এর সাথে লুকান:

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

— nandop
সূত্র

আমার একটি ইউআরএল আছে যা ডেটা-টগল করে মডেলটি খুলবে। তারপরে মোডালের অভ্যন্তরে আমার একটি বোতাম রয়েছে যা কোনও ফাংশনকে কল করে যা সর্বশেষে এটি করে যা আপনি প্রস্তাবিত গোপন পদ্ধতিটি ব্যবহার করে মডেলটি বন্ধ করে দিচ্ছেন। গ্রেট!

— জয়জে

17

আপনি যদি কোনও প্রোগ্রামেটিকাল মডেল তৈরির সন্ধান করেন তবে আপনি এটি পছন্দ করতে পারেন:

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

যদিও বুটস্ট্র্যাপের মডেলগুলি মডেল তৈরির জন্য জাভাস্ক্রিপ্টের পথ সরবরাহ করে, তবুও আপনাকে প্রথমে মডেলের এইচটিএমএল মার্কআপ লিখতে হবে।

— 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');
});

ডেমো জেএসফিডল

— 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বুটস্ট্র্যাপ ক্লাস হয়।

একটি উদাহরণ উপাদান & এইচটিএমএল

উপাদান

@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');
          });  
      }

/ * # মাইমোডাল হল মডেল পপআপের আইডি * /

— রোহিত পার্ট
সূত্র

1

উত্তর পোস্ট করার সময় কোডটি কী করে দয়া করে তা ব্যাখ্যা করুন।

— আর্টেমিস এখনও