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

Question

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

এখন আমি এটি বুটস্ট্র্যাপের মডেল ব্যবহার করে করতে চাই। নীচে এইচটিএমএল কোডটি রয়েছে:

<div id="code" class="modal hide fade">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3>Modal header</h3>
    </div>
    <div class="modal-body">
        <pre>
print 'Hello World'

এবং মোডালটি খোলার বোতামটি:

 <a href="#code" data-toggle="modal" class="btn code-dialog">Display code</a>

আমি বোতামটির অনক্লিক শ্রোতা ব্যবহার করার চেষ্টা করেছি, তবে মোডালটি উপস্থিত হওয়ার আগে সতর্কতা বার্তাটি প্রদর্শিত হয়েছিল :

$( ".code-dialog" ).click(function(){
    alert("I want this to appear after the modal has opened!");
});

Comments

shown.bs.modalইভেন্টটি ঘটে যখন এইচটিএমএল নথিতে অন্তত <div class="modal fade"><div class="modal-dialog"></div></div>কাঠামো থাকে।

— রাসায়নিক প্রোগ্রামার

dublicate stackoverflow.com/questions/12190119/bootstrap-modal-show-event

— gtzinos

মন্তব্য করুন কেমিক্যাল প্রোগ্রামার, এটির উত্তরটি উপস্থিত হওয়া উচিত

— তারেক

Answer 1

আপনি যা প্রয়োজন তার উপর ভিত্তি করে দেখানো ইভেন্ট / শো ইভেন্টটি ব্যবহার করতে পারেন :

$( "#code" ).on('shown', function(){
    alert("I want this to appear after the modal has opened!");
});

ডেমো: প্লাঙ্কার

বুটস্ট্র্যাপ 3.0 এর জন্য আপডেট

বুটস্ট্র্যাপ 3.0 এর জন্য আপনি এখনও প্রদর্শিত ইভেন্টটি ব্যবহার করতে পারেন তবে আপনি এটি এটির মতো ব্যবহার করতে পারেন:

$('#code').on('shown.bs.modal', function (e) {
  // do something...
})

"ইভেন্টস" এর অধীনে বুটস্ট্র্যাপ 3.0 ডক্স দেখুন ।

Comments

$("#code").on("shown.bs.modal", function(e) {})বুটস্ট্র্যাপ 3.0 ব্যবহার করুন ।

— 23:34

রাসায়নিক প্রোগ্রামার <ডি ক্লাস = "মডেল ফেইড"> <ডি ক্লাস = "মডেল-ডায়ালগ"> </ ডিভি> </ ডিভি> কাঠামোটির কমপক্ষে এই কোডটি কল করার জন্য কাঠামোর প্রয়োজনীয়তার বিষয়ে যা বলেছিল তা আমলে নেওয়ার বিষয়টি নিশ্চিত করুন

— কেন 17

#code: JQuery নির্বাচক, jQuery জন্য মৌলিক উপাদানের এক বোঝায় w3schools.com/jquery/jquery_selectors.asp

— DdW

আমি $(document).on("shown.bs.modal", ...সামগ্রিক

— শ্রোতার

কমপক্ষে দেখানো হয়েছে.বস.মোডালটি মোডালটি দেখানোর আগে আসলে সম্পাদন করে। এটি আমার ক্ষেত্রে কোনও সমস্যা নয় তবে এটি জেনে রাখা ভাল।

— জনি

Answer 2

কাজ করবে না .. $(window)পরিবর্তে ব্যবহার করুন

প্রদর্শনের জন্য

$(window).on('shown.bs.modal', function() { 
    $('#code').modal('show');
    alert('shown');
});

লুকানোর জন্য

$(window).on('hidden.bs.modal', function() { 
    $('#code').modal('hide');
    alert('hidden');
});

Comments

$ ("# মডেল") .ও ('দেখানো', ফাংশন () {সতর্কতা ("মডেলটি খোলার পরে আমি এটি উপস্থিত হতে চাই!"); me আমার পক্ষে কাজ করছে না তবে $ (উইন্ডো) কাজ করেছে !! ধন্যবাদ @ ভাইপার_টেকডি

— ক্রুতাল মোদী

আমার যে কোনও মডেলটি খোলার / বন্ধ হওয়াতে আবদ্ধ হওয়া দরকার , এবং কোনও নির্দিষ্ট নির্বাচক দ্বারা নয়। এই উত্তরটি সে ক্ষেত্রে আমার পক্ষে ভালভাবে কাজ করেছে।

— জাইস্ফ

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

— ফ্রেঙ্কিবি

এটি আমার পক্ষে কাজ করেছিল তবে আমি নির্দিষ্ট একটি মডেলকে লক্ষ্য করতে হ্যান্ডলারের মধ্যে একটি চেক যুক্ত করেছি: if( $('#code').is( e.relatedTarget ) ) { ... }যেহেতু পৃষ্ঠাটিতে আমার একাধিক ছিল।

— allicarn

সঠিক ইভেন্ট নামের জন্য ধন্যবাদ, তবে, $ (উইন্ডো) এর জন্য উপাদান আইডি প্রতিস্থাপন করার দরকার নেই। Jquery 3.4 সহ বিএস 4 ব্যবহার করে।

— Jcc.Sanabria

Answer 3

তুমি ব্যবহার করতে পার show পরিবর্তে shownফাংশন মোডাল খোলা পরে পরিবর্তে শুধু মোডাল খোলা সামনে লোড তৈরীর জন্য।

$('#code').on('show.bs.modal', function (e) {
  // do something...
})

Answer 4

বুটস্ট্র্যাপ মডেল ইভেন্টগুলি প্রকাশ করে। shownইভেন্টটির মতো শুনুন

$('#my-modal').on('shown', function(){
  // code here
});

Answer 5

কারও এখনও যদি সমস্যা হয় তবে (লোডড.বিএস.মডাল) ব্যবহার করে আমার পক্ষে নিখুঁতভাবে কাজ করার একমাত্র জিনিস:

 $('#editModal').on('loaded.bs.modal', function () {
       console.log('edit modal loaded');

       $('.datepicker').datepicker({
            dateFormat: 'yy-mm-dd',
            clearBtn: true,
            rtl: false,
            todayHighlight: true,
            toggleActive: true,
            changeYear: true,
            changeMonth: true
        });
});

Answer 6

বুটস্ট্র্যাপ মডেলটি প্রদর্শন এবং লুকানোর জন্য আপনি বেলউ কোড ব্যবহার করতে পারেন।

$('#my-model').on('shown.bs.modal', function (e) {
  // do something here...
})

এবং আপনি যদি মডেলটি আড়াল করতে চান তবে নীচের কোডটি ব্যবহার করতে পারেন।

$('#my-model').on('hidden.bs.modal', function() {
    // do something here...
});

আমি আশা করি এই উত্তরটি আপনার প্রকল্পের জন্য দরকারী।

Comments

কপির্যাট আবার ... ব্যবহারকারীর অন্যান্য উত্তর দেখুন

— লরেন্ট বি