টুইটার বুটস্ট্র্যাপে মডেল সমাপনী ইভেন্টটি কীভাবে পরিচালনা করবেন?


191

টুইটার বুটস্ট্র্যাপে, মডেলের ডকুমেন্টেশনগুলির দিকে তাকিয়ে । মডেলের ঘনিষ্ঠ ইভেন্টটি শোনার এবং কোনও ফাংশন সম্পাদন করার উপায় আছে কিনা তা আমি খুঁজে বের করতে পারিনি।

উদাহরণস্বরূপ এই মডেলটিকে উদাহরণ হিসাবে নিতে দাও:

<div class="modal-header">
    <button type="button" class="close close_link" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3>Modal header</h3>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
    <a href="#" class="btn close_link" data-dismiss="modal">Close</a>   
</div>

উপরের এক্স বোতাম এবং নীচে বন্ধ বোতাম উভয় কারণে মোডালকে আড়াল / বন্ধ করতে পারে data-dismiss="modal"। তাই আমি ভাবছি, যদি আমি কোনওভাবে এটি শুনতে পারি?

বিকল্পভাবে আমি এটি নিজেই এটির মতো করতে পারতাম, আমার ধারণা ...

$("#salesitems_modal").load(url, data, function() { 
     $(this).modal('show'); 
     $(this).find(".close_link").click(modal_closing);
});

আপনি কি মনে করেন?


উত্তর:


369

বুটস্ট্র্যাপ 3 এবং 4 এর জন্য আপডেট হয়েছে

বুটস্ট্র্যাপ 3 এবং বুটস্ট্র্যাপ 4 ডক্স আপনি ব্যবহার করতে পারেন এমন দুটি ইভেন্ট উল্লেখ করে।

hd.bs.modal : যখন লুকানোর উদাহরণ পদ্ধতিটি ডাকা হয় তখনই এই ইভেন্টটি তত্ক্ষণাত্ বরখাস্ত করা হয়।
লুকানো.বস.মোডাল : মডেলটি ব্যবহারকারীর কাছ থেকে লুকানো শেষ হয়ে গেলে এই ইভেন্টটি বরখাস্ত করা হয় (সিএসএস রূপান্তরগুলি সম্পূর্ণ হওয়ার জন্য অপেক্ষা করবে)।

এবং সেগুলি কীভাবে ব্যবহার করতে হয় তার একটি উদাহরণ সরবরাহ করুন:

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

উত্তরাধিকার বুটস্ট্র্যাপ ২.৩.২ উত্তর

বুটস্ট্র্যাপের ডকুমেন্টেশনগুলি আপনি ব্যবহার করতে পারেন এমন দুটি ইভেন্ট বোঝায়।

আড়াল করুন : লুকানোর উদাহরণ পদ্ধতিটি কল করার পরে এই ইভেন্টটি তাত্ক্ষণিকভাবে গুলি করা হয়।
লুকানো : মডেলটি ব্যবহারকারীর কাছ থেকে লুকানো শেষ হয়ে গেলে এই ইভেন্টটি বরখাস্ত করা হয় (সিএসএস রূপান্তর সম্পূর্ণ হওয়ার জন্য অপেক্ষা করবে)।

এবং সেগুলি কীভাবে ব্যবহার করতে হয় তার একটি উদাহরণ সরবরাহ করে:

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

1
কোনও কারণেই এটি আমার জন্য গুলি ছোঁড়াচ্ছে যখন আমি মোডালটিতে থাকা একটি বোতামটি মাউসআউট করি। এবং যখন আমি মডেলটিতে একটি ফর্ম জমা দিই (অন-সাবমিট ইভেন্টটি আগুনের আগেই)। কেউ কীভাবে এই আচরণ বন্ধ করতে জানেন?
গাই

2
কিছু অতিরিক্ত প্রসঙ্গ সরবরাহ করার জন্য, আমি $ (ডকুমেন্ট) .on ('লুকানো', '# মাইমোডাল', ফাংশন () something // কিছু করুন}) ব্যবহার করার পরামর্শ দেব; এটি নির্দিষ্ট পরিস্থিতিতে কাজ না করা থেকে বিরত রাখার জন্য, যেমন এটি যখন within (নথি) এর মধ্যে থাকে তখন প্রস্তুত ফাংশন ঘোষণা।
গ্যারেথ ডেইন

হ্যালো, আমি মডেল লুকানো jquery প্রয়োগ করতে চান। এবং আমি আমার প্রকল্পে একই কোড প্রয়োগ করেছি কিন্তু এটি কাজ করছে না। আপনার কি এর জন্য কোনও পরামর্শ আছে?
হার্ডি শাহ

@ হার্দিশাহ, আপনার কোড এবং / অথবা ত্রুটি সহ নতুন প্রশ্ন জিজ্ঞাসা করা উচিত।
আলবার্তেভিগো

68

যদি আপনার মডেল ডিভিটি গতিশীলভাবে যুক্ত হয় তবে ব্যবহার করুন (বুটস্ট্র্যাপ 3 এর জন্য)

$(document).on('hide.bs.modal','#modal-id', function () {
                alert('');
 //Do stuff here
});

এটি অ-গতিশীল সামগ্রীগুলির জন্যও কাজ করবে।


লুকানো বনাম লুকানো মধ্যে পার্থক্য ??
মাহি

3
@ মাহি। গোপন ইভেন্ট পদ্ধতিটি ডাকা হওয়ার সাথে সাথেই লুকানোর ঘটনাটি বরখাস্ত করা হয়। যখন মডেলটি ব্যবহারকারীর কাছ থেকে লুকানো শেষ হয়ে যায় তখন লুকানো ইভেন্টটি নিক্ষেপ করা হয় (সিএসএস রূপান্তরগুলি সম্পূর্ণ হওয়ার জন্য অপেক্ষা করবে)।
বিভ্রান্ত

18

দুটি মডেল ইভেন্ট রয়েছে, একটি হ'ল "শো" এবং "দেখানো", অন্যটি "লুকানো" এবং "লুকানো"। নাম থেকে আপনি দেখতে পাচ্ছেন, মডেলটি প্রায় কাছাকাছি থাকলে ইভেন্টের অগ্নি লুকান, যেমন উপরের ডানদিকের কোণায় ক্রস বা ক্লিক বাটন বন্ধ করা ইত্যাদি। মডেলটি আসলে কাছাকাছি হওয়ার পরে লুকানো থাকে। আপনি এই ইভেন্টগুলি নিজের পরীক্ষা করতে পারেন। উদাহরণের জন্য:

$( '#modal' )
   .on('hide', function() {
       console.log('hide');
   })
   .on('hidden', function(){
       console.log('hidden');
   })
   .on('show', function() {
       console.log('show');
   })
   .on('shown', function(){
      console.log('shown' )
   });

এবং, আপনার প্রশ্ন হিসাবে, আমি মনে করি আপনি আপনার মডেলের 'লুকান' ইভেন্টটি শোনা উচিত।


1

বুটস্ট্র্যাপ মডেল ইভেন্টগুলি:

  1. hide.bs.modal => ঘটে যখন মডেলটি লুকিয়ে থাকবে।
  2. লুকানো.বস.মোডাল => ঘটে যখন মডেলটি পুরোপুরি গোপন থাকে (সিএসএস রূপান্তর শেষ হওয়ার পরে)।
<script type="text/javascript">
    $("#salesitems_modal").on('hide.bs.modal', function () {
        //actions you want to perform after modal is closed.
    });
</script>

আমি আশা করি এটি সাহায্য করবে

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.