টুইটার বুটস্ট্র্যাপ মডেল বন্ধে একটি ফাংশন বাঁধুন

Question

আমি একটি নতুন প্রকল্পে টুইটার বুটস্ট্র্যাপ লিব ব্যবহার করছি এবং আমি পৃষ্ঠার অংশটি মডেল বন্ধের সর্বশেষ জেসন ডেটা রিফ্রেশ এবং পুনরুদ্ধার করতে চাই। আমি ডকুমেন্টেশনে এটি কোথাও দেখতে পাচ্ছি না কেউ আমার কাছে এটি নির্দেশ করতে পারে বা সমাধানের পরামর্শ দিতে পারে।

নথিভুক্ত পদ্ধতি ব্যবহার করে দুটি সমস্যা

 $('#my-modal').bind('hide', function () {
   // do something ...
 });

আমি মডেলের সাথে ইতিমধ্যে একটি "লুকান" শ্রেণি সংযুক্ত করি যাতে এটি পৃষ্ঠা লোডে প্রদর্শিত না হয় যাতে দুবার লোড হয়

এমনকি যদি আমি গোপন শ্রেণিটি সরিয়ে ফেলা এবং উপাদান আইডি সেট করি display:noneএবং console.log("THE MODAL CLOSED");উপরের ফাংশনে যুক্ত করি তবে আমি যখন আঘাত করি তখন কিছুই ঘটে না।

Answer 1

বুটস্ট্র্যাপ 3 এবং 4

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

বুটস্ট্র্যাপ 3: getbootstrap.com/ javascript / #modals-events

বুটস্ট্রেপ 4: getbootstrap.com/docs/4.1/components/modal/#events

বুটস্ট্র্যাপ 2.3.2

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

দেখুন getbootstrap.com/2.3.2/javascript.html#modals → ঘটনাবলী

Comments

এটি মডেল ফুটারে একটি বোতামের উপর ঝাঁকুনির পরেও অগ্নিসংযোগের জন্য ব্যতীত কাজ করে বলে মনে হচ্ছে। বোতামটি একটি নিয়মিত জমা বোতাম: <ইনপুট টাইপ = "সাবমিট" ক্লাস = "বিটিএন বিটিএন-ইনফরম" মান = "যান" /> কোনও ধারণা কীভাবে লুকিয়ে থাকা ইভেন্টে আগুন লাগবে না? বা, আমি কীভাবে সনাক্ত করতে পারি যে এটি হোভারের কারণে চালিত হয়েছিল? বিটিডাব্লু: যদিও ইভেন্টটি বহিস্কার করা হলেও মডেল ডায়ালগটি বন্ধ হয় না।

— গাই

আমি বুটস্ট্র্যাপ 3 এর সাথে এই আচরণটি দেখছি না, আপনি কি কোনও ঝাঁকুনি তৈরি করতে পারেন?

— sp00n

এই উত্তরে সম্ভবত লুকানো.বস.মোডাল এবং লুকিয়ে থাকা.বিএস.মডালের মধ্যে পার্থক্য উল্লেখ করা উচিত। সিএসএস অ্যানিমেশনগুলি সম্পূর্ণ হয়ে গেলে লুকানো হয়, তবে আমার পরীক্ষায় যদি কোনও অ্যানিমেশন না থাকে তবে তা কখনই আগুন দেয় না (যদিও এটি একটি বাগ হতে পারে)। আপনি যদি ডেটা ম্যানেজমেন্টের সাথে কাজ করছেন তবে এর পরিবর্তে আড়াল.বিএস.মডাল ব্যবহার করা আরও নিরাপদ হতে পারে, যা .মডাল ('লুকান') বলা হওয়ার সাথে সাথে বরখাস্ত করা হয়। getbootstrap.com/javascript/#modals-usage - ইভেন্টের সাবকশন দেখুন।

— ইভান স্টিঙ্কারচনার

বুটস্ট্র্যাপ 3: এটি কার্যকর হয় যখন আমি চিহ্নিত মডেল ট্যাগটিতে ক্লিক করি data-dismiss="modal"(ঘনিষ্ঠ বোতামের মতো), তবে মোডালের আশেপাশের কালো ব্যাকগ্রাউন্ড এরিয়ায় ক্লিক করলে এটি কার্যকর হয় না । মডেলটি খারিজ করা হয়েছে তবে পৃষ্ঠাটি রিফ্রেশ না হওয়া পর্যন্ত এটি পুনরায় খোলা যাবে না। আমি উভয় চেষ্টা করেছি 'hidden.bs.modal'এবং 'hide.bs.modal'কোন লাভ হয়নি।

— মারকুইটো

@ মার্কুইটো আপনি যা করতে পারেন (আমি যা করি) এটি এটি ব্যবহার করে: $('#myModal').modal({ backdrop: 'static', keyboard: false });এইভাবে, ধূসর অঞ্চলটিতে ক্লিক করার পরে, বা এসকে কী টিপানোর সময় মডেলটি বন্ধ হবে না।

— aesede

Answer 2

বুটস্ট্র্যাপ 4

$('#my-modal').on('hidden.bs.modal', function () {
  window.alert('hidden event fired!');
});

কার্যকারী উদাহরণের জন্য এই জেএসফিডেলটি দেখুন:

https://jsfiddle.net/6n7bg2c9/

ডক্সের মডেল ইভেন্টস বিভাগটি এখানে দেখুন:

https://getbootstrap.com/docs/4.3/components/modal/#events

Comments

এই পোস্টটি এই ধরণের কলব্যাকটি

— বাস্তবায়নের জন্য

@ রিকার্ডো লিমার প্রতিক্রিয়া নীচে এখন jQuery / বুটস্ট্র্যাপে ইভেন্টগুলি পর্যবেক্ষণের সঠিক পদ্ধতি

— সোনামি

@ মিটবলগুলি এখনও কার্যকরী উদাহরণের পক্ষে একটি ভোট দেয় .. যদিও বাইন্ডটিকে অবমূল্যায়ন করা হয়েছে।

— স্টিফেন প্যাটেন

@ 100acrewood ডুড, এখন এটি একটি সন্ধান! ধন্যবাদ! পুনরায়: bootboxjs.com

— স্টিফেন প্যাটেন

Answer 3

বুটস্ট্র্যাপ 3 শুরু করা ( সম্পাদনা করুন: বুটস্ট্র্যাপ 4 এ এখনও একই রকম ) 2 টি দৃষ্টান্ত রয়েছে যাতে আপনি ইভেন্টগুলিতে আগুন জ্বালিয়ে দিতে পারেন:

1. যখন মডেল "লুকান" ইভেন্ট শুরু হয়

$('#myModal').on('hide.bs.modal', function () { 
    console.log('Fired at start of hide event!');
});  

2. যখন মডেল "লুকান" ইভেন্টটি শেষ হয়

$('#myModal').on('hidden.bs.modal', function () {
    console.log('Fired when hide event has finished!');
});

রেফার: http://getbootstrap.com/javascript/#js-events

Comments

এটি আমাকে আমার বুটস্ট্র্যাপ মডেল বাগটি ঠিক করতে সহায়তা করেছিল যেখানে এটি কোনও মডালের কাছাকাছি দেহে 15px প্যাডিং-ডান যুক্ত করে। ধন্যবাদ!

— স্যাম মালেক

2 টি ইভেন্ট দেখানোর জন্য ভাল। আমার মতো নতুনদের জন্য এটি লক্ষ্য করা ভাল যে ইভেন্টটি বহিস্কারের জন্য এটি মডেলের নীচে স্থাপন করা দরকার।

— লিনেল এমানুয়েল নেরি

Answer 4

"লাইভ" এর স্থলে আপনাকে "অন" ইভেন্টটি ব্যবহার করতে হবে তবে এটি নথির অবজেক্টে অর্পণ করুন:

ব্যবহার করুন:

$(document).on('hidden.bs.modal', '#Control_id', function (event) {
// code to run on closing
});

Comments

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

— ডিলান ভ্যান্ডার বার্গ

Answer 5

$(document.body).on('hidden.bs.modal', function () {
    $('#myModal').removeData('bs.modal')
});

Answer 6

বুটস্ট্র্যাপ ঘটনা প্রদান যে আপনি মধ্যে হুক করতে পারেন মোডাল , মত আপনি একটি ফায়ার করতে চান ঘটনা যখন মোডাল গোপন থাকবে সমাপ্ত হয়েছে ব্যবহারকারীর কাছ থেকে আপনি ব্যবহার করতে পারেন hidden.bs.modal ভালো ঘটনা

    /* hidden.bs.modal event example */
    $('#myModal').on('hidden.bs.modal', function () {
          window.alert('hidden event fired!');
    })

ডকুমেন্টেশনে মডেল পদ্ধতিগুলি এবং ইভেন্টগুলি সম্পর্কে আরও পড়ুন এখানে একটি কাজের ভারসাম্য পরীক্ষা করুন

Answer 7

বুটস্ট্র্যাপ 4:

$('#myModal').on('hidden.bs.modal', function (e) {
   // call your method
})

hd.bs.modal : যখন লুকানোর উদাহরণ পদ্ধতিটি ডাকা হয় তখনই এই ইভেন্টটি তত্ক্ষণাত্ বরখাস্ত করা হয়।

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

Comments

এই উপায়টি BS3 এর জন্যও বৈধ। দয়া করে BS2 (অবমানিত) উপায়ে গৃহীত উত্তর দেখুন।

— রোল্যান্ড

Answer 8

আমি এটি এইভাবে করব:

$('body').on('hidden.bs.modal', '#myModal', function(){ //this call your method });

বাকীটি ইতিমধ্যে অন্যেরা লিখেছেন। আমি ডকুমেন্টেশন পড়ারও পরামর্শ দিচ্ছি: পড়ারও পদ্ধতিতে জ্যুচুরি

Answer 9

আমি যেমন বুটস্ট্র্যাপ ইভেন্ট সংক্রান্ত অনেক উত্তর দেখেছি hide.bs.modal মডেলগুলি বন্ধ হয়ে গেলে কোনটি ট্রিগার করে।

এই ইভেন্টগুলির সাথে একটি সমস্যা আছে: মডেলের যে কোনও পপআপগুলি (পপওভারস, সরঞ্জামদণ্ডগুলি, ইত্যাদি) ইভেন্টটিকে ট্রিগার করবে।

কোনও মডেল বন্ধ হয়ে গেলে ইভেন্টটি ধরার আরও একটি উপায় রয়েছে।

$(document).on('hidden','#modal:not(.in)', function(){} );

inমোডাল খোলা থাকলে বুটস্ট্র্যাপ ক্লাস ব্যবহার করে । hiddenইভেন্টটি ব্যবহার করা খুব গুরুত্বপূর্ণ কারণ ইভেন্টটি যখন ক্লাস inএখনও সংজ্ঞায়িত করা হয়hide ট্রিগার করা হয়।

এই সমাধান আইই 8 তে কাজ করবে না যেহেতু আই 88 জ্যাকারি :not()নির্বাচনকারীকে সমর্থন করে না ।

Answer 10

কারও কারও সাথে আমার একই সমস্যা ছিল

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

আপনার এটিকে পৃষ্ঠার নীচে স্থাপন করা দরকার, এটিকে শীর্ষে স্থাপন করা কখনই ইভেন্টটিকে দমন করে না।

Comments

প্রকৃতপক্ষে. এটি ভাল যে আপনি উল্লেখ করেছেন যে ইভেন্টটি চালানোর জন্য এটি মডেলের নীচে স্থাপন করা দরকার।

— লিনেল ইমানুয়েল নেরি

আমি তার থেকে কিছুটা কঠোর নিয়ম সংজ্ঞায়িত করব। যখন jQuery সিলেক্টরটি $("#myModal")এইচটিএমএল এলিমেন্টটি ডিওমে myModalউপস্থিত থাকা প্রয়োজন তখন একটি আইডি সহ ডাকে। সুতরাং পৃষ্ঠার শীর্ষে আপনার এই কোডটি থাকতে পারে তবে একটিতে $(document).on("ready", function(){ ... });(বা অনুরূপ ফাংশন যা ডোমকে এলিমেন্টের সাথে জনপ্রিয় করার পরে ডাকা হয়)।

— অ্যান্ডি জি

Answer 11

আপনি যদি প্রতিটি মডেলের নিকটে কোনও ফাংশন চালাতে চান তবে আপনি এই পদ্ধতিটি ব্যবহার করতে পারেন,

$(document).ready(function (){
    $('.modal').each(function (){
        $(this).on('hidden.bs.modal', function () {
            //fires when evey popup close. Ex. resetModal();
        });
    });
});

সুতরাং আপনাকে প্রতিবার মডেল আইডি নির্দিষ্ট করতে হবে না।