টুইটার বুটস্ট্র্যাপ মডেল-ব্যাকড্রপ অদৃশ্য হয় না

Question

আমি টুইটার বুটস্ট্র্যাপ মডেল ডায়ালগটি ব্যবহার করছি। আমি যখন বুটস্ট্র্যাপ মডেল ডায়ালগের জমা বোতামে ক্লিক করি তখন এটি একটি এজেএক্স অনুরোধ প্রেরণ করে। আমার সমস্যাটি হল মডেল-ব্যাকড্রপটি অদৃশ্য হয় না। মডেল ডায়ালগটি সঠিকভাবে অদৃশ্য হয়ে যায়, তবে পরিবর্তে "মডেল-ব্যাকড্রপ ইন" যা স্ক্রিনে অস্বচ্ছতা তৈরি করে তা থেকে যায়

আমি কি করতে পারি?

Comments

আপনি ব্যবহার করছেন $('#myModal').modal('hide')? আপনি এখানে কিছু কোড রাখতে পারেন?

— পিগুইরেস

যদি আপনি নিজেই এইচটিএমএল উত্পাদিত নির্বাচক হিসাবে গেটবুস্ট্র্যাপের সাইট থেকে একটি অনুলিপি এবং পেস্ট করছেন তবে নিশ্চিত হয়ে নিন যে আপনি মন্তব্যটি << - / / মডেল -> 'মুছে ফেলেছেন। বুটস্ট্র্যাপ বিভ্রান্ত হয়ে পড়ে এবং মনে করে যে মন্তব্যটি একটি দ্বিতীয় মডেল উপাদান। এটি এই "দ্বিতীয়" এলিমেন্টটির জন্য আরও একটি ব্যাক ড্রপ তৈরি করে।

— জর্দান

@ জর্দান: আপনার মন্তব্যের উত্তর হওয়া দরকার! আমার ক্ষেত্রে আপনার মন্তব্য সঠিক সমাধান ছিল!

— বুধবার

নিম্নলিখিতটি উল্লেখ করুন: stackoverflow.com/questions/22207377/…

— নটান

আমি জানি প্রশ্নটি পুরানো, তবে আজ আমার একইরকম সমস্যা রয়েছে, আমার পরিস্থিতিতে "মডেল-এলজি" শ্রেণীর একটি মিস-রিমুভাল ছিল যা "মডেল" থেকে ফেলে রেখেছিল যখন আপনি যখন যেখানে মডেলটি বন্ধ করবেন তখন গণ্ডগোল তৈরি করছে creating তিনি কীবোর্ড সহ / বাইরের কোথাও ক্লিক করুন।

— মাত্তেও

Answer 1

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

যদি এটি কাজ না করে তবে আপনি সর্বদা নিম্নলিখিত কাজগুলি করে চলে যেতে বাধ্য করতে পারেন:

$('#your-modal-id').modal('hide');
$('body').removeClass('modal-open');
$('.modal-backdrop').remove();

Comments

যদি আমি পারতাম তবে এই উত্তরটি +2 দেবে। শুধু আমাকে ঘন্টা বাঁচাতে!

— আন্দ্রে লম্পার্ড

আপনার যদি এজেএক্স প্রতিক্রিয়াটি মূল্যায়ন করতে এবং সেই অনুযায়ী মোডালটি আপডেট করতে হয় তবে এজ্যাক্স কলের আগে মডেলটি লুকানো একটি দুর্বল সমাধান।

— asciimo

আমি বিশ্বাস করি যে বিবর্ণ অ্যানিমেশন সম্পূর্ণরূপে শেষ হওয়ার আগে এটি মডেল ('লুকান') কল করেও হতে পারে। মডেল থেকে বিবর্ণ শ্রেণি সরিয়ে ফেলা সাহায্য করতে পারে।

— এভিলপপেটমাস্টার

। $ ( '। মোডাল-পরিপ্রেক্ষিত') অপসারণ (); আমার জন্য এটি সমাধান করুন, বিবর্ণ শ্রেণি অপসারণ করার দরকার নেই

— ওমর এস

$('.modal-backdrop').remove()ভবিষ্যতের মডেলগুলি সঠিকভাবে খোলার জন্য মনে হচ্ছে।

— ক্রোক

Answer 2

নিশ্চিত করুন যে $.modal()মডেল আচরণটি প্রয়োগ করার জন্য আপনার প্রাথমিক কলটি আপনার ইচ্ছাটির চেয়ে বেশি উপাদানগুলিতে যাচ্ছে না। যদি এটি ঘটে থাকে তবে এটি সংগ্রহের প্রতিটি উপাদানগুলির জন্য ব্যাকড্রপ উপাদান সহ সম্পূর্ণ একটি মডেল উদাহরণ তৈরি করবে। ফলস্বরূপ, এটি দেখে মনে হতে পারে যে ব্যাকড্রপটি পিছনে চলে গেছে, যখন আপনি যখন সদৃশগুলির মধ্যে একটির দিকে তাকাচ্ছেন।

আমার ক্ষেত্রে, আমি এই জাতীয় কিছু কোড সহ ফ্লাইটে ফ্লাইটে মডেল সামগ্রী তৈরি করার চেষ্টা করছিলাম:

myModal = $('<div class="modal">...lots of HTML content here...</div><!-- end modal -->');
$('body').append(myModal);
myModal.modal();

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

Comments

এই লোকটি টাকায় ছিল আমি mod .html () এর সাথে যে মডেলটি পেয়েছিলাম তা থেকে আমি মন্তব্যগুলি সরিয়েছি এবং এটি এখন কার্যকর। ফ্রাকিন 'অদ্ভুত।

— ম্যাট্রিম

এটি আমার জন্যও সমস্যা ছিল।

— বব ব্ল্যাক

বোকা বুটস্ট্র্যাপ! তাদের নিজস্ব উদাহরণ মার্কআপ (শুরু এবং শেষে মন্তব্য সহ) এই দৃষ্টান্তটি ভঙ্গ করে। মন্তব্য সরান এবং এটি কাজ করে!

— goofballLogic

একই অবস্থা. মন্তব্যগুলি সরানো সমস্যার সমাধান করেছে। শুধু একটা প্রশ্ন. আমি দেখতে পাচ্ছি মডেলটি body ('বডি') দিয়ে ডিওমে যুক্ত না করে পুরোপুরি কাজ করে। DOM পৃষ্ঠায় মডেল যুক্ত করা দরকার?

— ভিক্টরস্পিনা

আমার একটি মিল নেই। একই ফলাফল। ধন্যবাদ!

— jozxyqk

Answer 3

আমি এই সমস্যাটিতে অনেক দীর্ঘ সময় কাটিয়েছি :)

প্রদত্ত অন্যান্য উত্তরগুলি সহায়ক এবং বৈধ হলেও, বুটস্ট্র্যাপ থেকে মোডাল লুকানোর কার্যকারিতা কার্যকরভাবে পুনরায় তৈরি করতে আমার কাছে কিছুটা অগোছালো মনে হয়েছিল, তাই আমি একটি ক্লিনার সমাধান পেয়েছি।

সমস্যাটি হ'ল এখানে ইভেন্টগুলির একটি শৃঙ্খল রয়েছে যা আপনি কল করার সময় ঘটে

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

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

$("#myModal").modal('hide').on('hidden.bs.modal', functionThatEndsUpDestroyingTheDOM);

আশা করি এটি সহায়ক!

Comments

আমি খুব দীর্ঘ সময় কাটিয়েছি! এই উত্তরটি আমাকে ক্লু দিয়েছে - কিছু কিছু আমার ডিওএম (কৌণিক) ক্লোবার্ব করছে। বুটস্ট্র্যাপ কোডটি দেখে আপনি প্রথমে বিবর্ণ শ্রেণিটি অপসারণ করে পটভূমিটি অবিলম্বে অপসারণের জন্য বাধ্য করতে পারেন:$('#myModal').removeClass('fade');$(myModal').modal('hide')'

— রস আর

উত্তরটি হ'ল গ্রহণযোগ্য উত্তর হওয়া উচিত - এটি বুটস্ট্র্যাপ এপিআই ব্যবহার হিসাবে ব্যবহার করে এবং শরীরকে। মোডাল-ওপেন দ্বারা হ্যাক করে না

— অ্যারন হুডন

এটি সর্বাধিক পরিশ্রমী ও আন্তরিক উত্তর is

— জ্যাকবআইআরআর

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

— মাইকেল হার্পার

মডেল-লুকানোর ঘটনাগুলি শেষ না করার বিবৃতিটি আমাকে কীভাবে আমার কাজ শুরু করতে হবে সে সম্পর্কে ধারণা দেয়

— স্যামুয়েলডেভ

Answer 4

আপনার ক্রিয়া বোতামটি এটি sertোকান:

data-backdrop="false"

এবং

data-dismiss="modal" 

উদাহরণ:

<button type="button" class="btn btn-default" data-dismiss="modal">Done</button>

<button type="button" class="btn btn-danger danger" data-dismiss="modal" data-backdrop="false">Action</button>

আপনি যদি এই ডেটা-অ্যাটারে প্রবেশ করেন তবে। মডেল-ব্যাকড্রপ প্রদর্শিত হবে না। এই লিঙ্কটিতে এটি সম্পর্কে ডকুমেন্টেশন: http://getbootstrap.com/javascript/#modals-usage

Comments

এটি একটি সত্য উত্তর। কোনও পরিস্থিতিতে বুটস্ট্র্যাপের উদ্দেশ্যে করা স্টাফ ম্যানুয়ালি করার চেষ্টা করবেন না। যদি এটি আপনার সমাধান হয় তবে আপনি এটি ভুল প্রয়োগ করছেন। আমি মনে করি বুটস্ট্র্যাপ সাইটে বয়লারপ্লেট এইচটিএমএলটি কিছুটা অসম্পূর্ণ এবং সে কারণেই বহু লোক বর্ণিত আচরণটি অনুভব করছে (আমাকে সহ)। ধন্যবাদ! +1

— বেন ফ্রানসেন

আপনি যদি কোনও বোতাম থেকে নয় মডেলকে ট্রিগার করতে চান?

— shinzou

@ ভুল হয়েছে আপনি। data-backdrop="false"মোটামুটি ব্যাকড্রপ ব্যবহার না করার জন্য বুটস্ট্র্যাপকে বলার একটি বিকল্প । এটির আসল সমস্যার সাথে কোনও সম্পর্ক নেই, এটি কেবল এড়িয়ে চলে। এটি "আমি সাঁতার কাটতে পারি না তাই পুলটিতে যাওয়া বন্ধ করে দিয়েছি" বলার মতোই হবে। এটি দুর্দান্ত, তবে আপনি এখনও সাঁতার কাটাতে পারবেন না এবং যদি আপনি বস আপনাকে গভীর প্রান্তে ফেলে দেন তবে আপনি ডুবে যাবেন। এমন অনেকগুলি ক্ষেত্রে রয়েছে যেখানে ম্যানুয়াল হস্তক্ষেপের প্রয়োজন হয় যেমন আপনার অ্যাপ্লিকেশনের পটভূমিতে যখন কৌনিকটি ডোমটিতে স্টম্পস করে।

— ওয়েসলি স্মিথ

Answer 5

যদি আপনি নিজেই এইচটিএমএল উত্পাদিত নির্বাচক হিসাবে গেটবুস্ট্র্যাপ সাইট থেকে একটি অনুলিপি এবং পেস্ট করছেন তবে নিশ্চিত হয়ে নিন যে আপনি মন্তব্যটি << - / / মডেল -> 'মুছে ফেলেছেন। বুটস্ট্র্যাপ বিভ্রান্ত হয়ে পড়ে এবং মনে করে যে মন্তব্যটি একটি দ্বিতীয় মডেল উপাদান। এটি এই "দ্বিতীয়" এলিমেন্টটির জন্য আরও একটি ব্যাক ড্রপ তৈরি করে।

Comments

আমাকে ধিক্কার জানানো হবে ... এটাই ছিল আমার সমস্যা। মন্তব্য সরানো এবং এটি কাজ করে। কীভাবে এইচটিএমএল মন্তব্য বুটস্ট্র্যাপে ট্রিপ করে !?

— টার্নার হেইস

আমি বিশ্বাস করি এটি একটি গণনা পাওয়ার জন্য এইচটিএমএল উপাদানগুলির সন্ধান করছে। যেহেতু মন্তব্যগুলিকে উপাদান হিসাবে বিবেচনা করা হয় সেই স্থানে থাকা মন্তব্যের সাথে এই গণনাটি ভুল।

— জর্দান

গোঁফ টেমপ্লেটে এই ফাইলটি থাকাকালীন আমার সাথে ঘটেছিল

— পাভেল 'পিকে' কামিনস্কি

মন্তব্যগুলি ডোমটিতে এমনভাবে উপস্থিত রয়েছে যে এটি জাভাস্ক্রিপ্টটিকে মডেলের অংশের অর্ধেকটি বিভ্রান্ত করে। আমি ভুলে গেছি ঠিক কীভাবে। এই কিছুক্ষণ আগে ছিল।

— জর্ডান

হলি মলি - এটি আসলে কাজ করে! এটি একটি অদ্ভুত বাগ।

— ভয়ঙ্কর এস

Answer 6

আমি জানি এটি একটি খুব পুরানো পোস্ট তবে এটি সাহায্য করতে পারে। এটি আমার দ্বারা খুব ছোট কাজ

$('#myModal').trigger('click');

এটি হ'ল, এটি সমস্যার সমাধান করা উচিত

Comments

এটি আমার জন্য পুরোপুরি কাজ করেন। বুটস্ট্র্যাপ 4 এখানে ব্যবহার করা।

— এডি টিক্সেইরা

এটি ডিফল্ট উত্তর হওয়া উচিত। ধন্যবাদ

— মাকামু ইভান্স

কী হওয়ার myModalকথা? এবং কেন এটি সংলাপটি বন্ধ করবে? মডেল ডায়ালগগুলি কেবল ক্লোজ বোতামটি ক্লিক করে বা ডায়ালগের বাইরের ক্লিক করে বন্ধ হয়। এটি কোনও সমাধান বলে মনে হয় না।

— মুশিপিস

মাইমোডাল হওয়ার কথা কি? -> এটি মূল মডেলের আইডি। এবং কেন এটি সংলাপটি বন্ধ করবে? -> এটি কাজ করে কারণ ডিফল্টরূপে আপনি যখন মডালের বাইরেরটিতে ক্লিক করেন, ক্রিয়াটি তার পিতামাতার কাছে প্রচার করে এবং এটি সেখানে পরিচালিত হয়।

— চৈতন্য বাঁকানহাল

Answer 7

আমি একই ধরণের সমস্যার মুখোমুখি হয়েছি: আমার মডেল উইন্ডোতে আমার দুটি বাতিল আছে "বাতিল" এবং "ঠিক আছে"। মূলত, উভয় বোতামই মোডাল উইন্ডোটি বন্ধ করে $('#myModal').modal('hide')"(ঠিক আছে" কিছু কোড আগে চালিত করে) ব্যবহার করা হত এবং দৃশ্যটি নিম্নলিখিত হবে:

1. মডেল উইন্ডোটি খুলুন
2. কিছু অপারেশন করুন, তারপরে "ওকে" ক্লিক করুন তাদের বৈধতা দিন এবং মডেলটি বন্ধ করুন
3. আবার মডেলটি খুলুন এবং "বাতিল" ক্লিক করে খারিজ করুন
4. মডেলটি পুনরায় খুলুন, আবার "বাতিল করুন" ==> ক্লিক করুন ব্যাকড্রপটি আর অ্যাক্সেসযোগ্য নয়!

ঠিক আছে, আমার সহকর্মী পরবর্তী ডেস্কটি আমার দিনটি বাঁচিয়েছিল: অনুরোধ করার পরিবর্তে $('#myModal').modal('hide'), আপনার বোতামগুলিকে বৈশিষ্ট্যটি দিন data-dismiss="modal"এবং আপনার "জমা দিন" বোতামটিতে একটি "ক্লিক" ইভেন্ট যুক্ত করুন। আমার সমস্যাটিতে বোতামটির জন্য এইচটিএমএল (ভাল, TWIG) কোডটি হ'ল:

<button id="modal-btn-ok" class="btn" data-dismiss="modal">OK</button>
<button id="modal-btn-cancel" class="btn" data-dismiss="modal">Cancel</button>

এবং আমার জাভাস্ক্রিপ্ট কোডটিতে, আমার কাছে রয়েছে:

$("#modal-btn-ok").one("click", null, null, function(){
    // My stuff to be done
});

কোনও "ক্লিক" ইভেন্টটি "বাতিল" বোতামটির জন্য দায়ী করা হয়নি। মডেলটি এখন সঠিকভাবে বন্ধ হয়ে যায় এবং আমাকে আবার "স্বাভাবিক" পৃষ্ঠাতে খেলতে দেয়। এটি প্রকৃতপক্ষে মনে হয় যে data-dismiss="modal"বাটনটি (বা যাই হোক না কেন ডম উপাদান) একটি বুটস্ট্র্যাপ মডেল বন্ধ করা উচিত তা নির্দেশ করার একমাত্র উপায়। .modal('hide')পদ্ধতি বেশ নিয়ন্ত্রণযোগ্য না ভাবে আচরণ করে বলে মনে হয়।

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

Comments

এখানেও একই, আপনি যদি কোনও বোতাম থেকে মডেলটি ট্রিগার করতে না চান?

— shinzou

Answer 8

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

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

এটি যদি আপনার সমস্যার সঠিক কারণ হয় তবে সমস্যাটি প্রশমিত করার জন্য এখানে কিছু বিকল্প রয়েছে। # 1 বিকল্পটি দ্রুত এবং সহজ পরীক্ষাটি নির্ধারণ করার জন্য যে বিবর্ণ স্থানান্তর সময়টি সত্যই আপনার সমস্যার কারণ।

1. মডেলের জন্য বিবর্ণ অ্যানিমেশনটি অক্ষম করুন (কথোপকথন থেকে "বিবর্ণ" শ্রেণি সরিয়ে ফেলুন)
2. মডেলের পাঠ্যটি লুকিয়ে রেখে পুনরায় প্রদর্শন করার পরিবর্তে আপডেট করুন।
3. সময় ঠিক করুন যাতে এটি পূর্ববর্তী মডেলটি লুকিয়ে শেষ না করা পর্যন্ত মডেলটি প্রদর্শন করবে না। এটি করার জন্য মডেলের ইভেন্টগুলি ব্যবহার করুন। http://getbootstrap.com/javascript/#modals-events

এখানে সম্পর্কিত কিছু বুটস্ট্র্যাপ ইস্যু ট্র্যাকার পোস্ট রয়েছে। এটি নীচে তালিকাভুক্ত করার চেয়ে আরও বেশি ট্র্যাকার পোস্ট থাকতে পারে।

• https://github.com/twbs/bootstrap/issues/735
• https://github.com/twbs/bootstrap/issues/2839
• https://github.com/twbs/bootstrap/issues/19385

Answer 9

.modal ( 'আড়াল')

ম্যানুয়ালি একটি মডেল লুকায়। মডেলটি আসলে লুকানো হওয়ার আগে কলারের কাছে ফিরে আসে (অর্থাত্ লুকানো.বস.মোডাল ইভেন্ট হওয়ার আগে)।

পরিবর্তে তাই

$('#myModal').modal('hide');
$('#someOtherSelector').trigger('click');

করা

$('#myModal').modal('hide');
$('#myModal').on('hidden.bs.modal', function() {
   $('#someOtherSelector').trigger('click');
});

সুতরাং আপনি "লুকানো" ইভেন্টটি শেষ না হওয়া পর্যন্ত নিশ্চিত

Comments

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

— ডিনওয়াক

Answer 10

আর একটি সম্ভাব্য ভুল যা এই সমস্যা তৈরি করতে পারে,

bootstrap.jsআপনার পৃষ্ঠায় আপনি একবারে স্ক্রিপ্ট অন্তর্ভুক্ত করেননি তা নিশ্চিত করুন !

Answer 11

এমনকি আমি একই ধরণের সমস্যায় পড়েছি, আমার নীচের দুটি বোতাম ছিল

<button id="confirm-delete-btn" >Yes, Delete this note.</button>
<button id="confirm-delete-cancel" data-dismiss="modal">No</button>

আমি কিছু এজাক্স অপারেশন করতে চেয়েছিলাম এবং সেই এজ্যাক্স অপারেশনের সাফল্যে মডেলটি বন্ধ করেছিলাম। সুতরাং এখানে আমি কি করেছি।

$.ajax({
        url: '/ABC/Delete/' + self.model.get("Id")
            , type: 'DELETE'
            , success: function () {                    
                setTimeout(function () {
                    self.$("#confirm-delete-cancel").trigger("click");
                }, 1200);
            }
            , error: function () {}
        });

আমি data-dismiss="modal"সম্পত্তিটি থাকা 'না' বোতামটির ক্লিক ইভেন্টটি ট্রিগার করেছিলাম । এবং এটি কাজ করেছে :)

Comments

ক্লিক ইভেন্টটিকে ম্যানুয়ালি ট্রিগার করা আমার জন্য আই 9 9 / আই 10 তে মডেলটি বন্ধ করে দেয় না। সমাধানের সন্ধান করার চেষ্টা করছেন।

— অ্যান্টনি হার্ডার

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

— অ্যান্টনি হার্ডার

Answer 12

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

$('.modal.in').modal('hide') 

উৎস

Answer 13

এই সমাধানটি রুবেল অন রেয়েল ৩.x এবং একটি জেএস.আরবি ফাইলের জন্য যা ডিওএমের অংশটি মডেল সহ পুনর্নির্মাণ করে। এটি অজ্যাক্স কলটি মডেল থেকে বা পৃষ্ঠার ভিন্ন অংশ থেকে এসেছিল তা নির্বিশেষে কাজ করে।

if ($("#my-modal").attr("aria-hidden") === "false") {
  $("#my-modal").modal('hide').on('hidden.bs.modal', function (event) {
    functionThatEndsUpDestroyingTheDOM();
  });
} else {
  functionThatEndsUpDestroyingTheDOM();
}

শুরুর পয়েন্টের জন্য @ বিলহুয়ের্তাসকে ধন্যবাদ

Answer 14

। $ ( '# MyModal') ট্রিগার ( 'ক্লিক করুন');

এটি আমার পক্ষে কাজ করেছে। এটি বন্ধ হচ্ছে না কারণ আপনি যখন পপআপ খুলবেন এটি 2 বা 3 মডেল-ব্যাকড্রপগুলি ট্রিগার করে। সুতরাং যখন আপনি do ('# মাইমোডাল') করেন mod মোডাল ('লুকান'); এটি কেবলমাত্র একটি মডেল-ব্যাকড্রপ এবং বাকি অংশগুলিকে প্রভাবিত করে।

Answer 15

আপডেটপ্যানেল ইস্যু।

আমার সমস্যাটি আপডেটপ্যানেল প্লেসমেন্টের কারণে ছিল was আপডেটপ্যানেলে আমার পুরো মডেলটি ছিল। যদি আপনি আপডেটপ্যানেলের বাইরে মডেলটি ঘোষণা করেন এবং কেবলমাত্র বলেছেন, মডেল বডি, আপডেট প্যানেলে, তবে $ ('# মাইমোডালআইডি') mod মডেল ('লুকান'); কাজ করছে.

Comments

এটা আমার সমস্যা ছিল। আমার ইউজারকন্ট্রোলের আশেপাশে একটি অ্যাজ্যাক্স ম্যানেজার আপডেট প্যানেল তৈরি করেছিল যাতে পুরো মডেলটি রয়েছে। আমি কেবল ব্যবহারকারীর নিয়ন্ত্রণে মডেলের দেহটি ছেড়ে দিয়ে মূল পৃষ্ঠায় সমস্ত কিছু সরিয়ে নিয়েছি এবং সবকিছুই প্রত্যাশা অনুযায়ী কাজ শুরু করেছি, সুতরাং আপনার <div id = "# mymodal"> অংশটি অজেক্সাইফ করবেন না!

— আলেকজান্ডার

Answer 16

এই প্রশ্নের অন্য দৃষ্টিভঙ্গি। (আমি বুটস্ট্র্যাপ.জেএস সংস্করণ ৩.৩..6 ব্যবহার করছি)

আমি জাভাস্ক্রিপ্টে ম্যানুয়ালি দুজনকেই মডেল সূচনা করতে ভুল করেছিলাম:

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

এবং ব্যবহার করে

data-toggle="modal"

এই বোতামে নীচের উদাহরণের মতো (নথিতে প্রদর্শিত)

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button>

সুতরাং ফলাফল এটির দুটি উদাহরণ তৈরি করে

<div class="modal-backdrop fade in"></div>

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

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

এটি কেবলমাত্র একটি পটভূমির উদাহরণ সরিয়ে দেয় (উপরে দেখানো হিসাবে) যাতে ব্যাকড্রপটি অদৃশ্য হবে না। আপনি যদি data-dismiss="modal"বুটস্ট্র্যাপ ডকটিতে শো হিসাবে এইচটিএমএল অ্যাড ব্যবহার করেন তবে এটি অদৃশ্য হয়ে গেল ।

সুতরাং আমার সমস্যার সমাধান হ'ল জাভাস্ক্রিপ্টে ম্যানুয়ালি মডিউল আরম্ভ করা এবং ডেটা অ্যাট্রিবিউট ব্যবহার না করা, এই পদ্ধতিতে আমি উভয়ই ম্যানুয়ালি এবং data-dismiss="modal"বৈশিষ্ট্যগুলি ব্যবহার করে মোডালটি বন্ধ করতে পারি ।

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

Answer 17

এফওয়াইআই যদি কেউ এখনও এটির মধ্যে চলে তবে ... আমি প্রায় 3 ঘন্টা ব্যয় করেছি এটি আবিষ্কারের সেরা উপায়টি নীচে:

$("#my-modal").modal("hide");
$("#my-modal").hide();
$('.modal-backdrop').hide();
$("body").removeClass("modal-open");

মডেলটি বন্ধ করার জন্য সেই ফাংশনটি অত্যন্ত অনাদায়ী।

Comments

কবজির মতো কাজ করেছেন।

— পট্টু

Answer 18

যোগ করার পদ্ধতি data-dismiss="modal"আমার জন্য কাজ আমার মোডাল কোনো বোতাম উপর। আমি চাইছিলাম আমার বোতামটি একটি এজাক্স কল ফায়ার করতে কৌনিক সহ একটি ফাংশন কল করতে এবং মডেলটি বন্ধ করে দেবে যাতে আমি .toggle()ফাংশনটির মধ্যে একটি যুক্ত করেছি এবং এটি ভালভাবে কাজ করেছে। (আমার ক্ষেত্রে আমি একটি ব্যবহার করেছি bootstrap modalএবং কিছু ব্যবহার করেছি angular, প্রকৃত মডেল নিয়ামক নয়)।

<button type="button" class="btn btn-primary" data-dismiss="modal"
ng-click="functionName()"> Do Something </button>

$scope.functionName = function () {
angular.element('#modalId').toggle();
  $.ajax({ ajax call })
}

Answer 19

আমারও একই সমস্যা ছিল। আমি আবিষ্কার করেছি এটি বুটস্ট্র্যাপ এবং জিকুয়েরইউআইয়ের মধ্যে বিরোধের কারণে।

উভয়ই ক্লোজ "ক্লোজ" ব্যবহার করেন। এক বা অন্যটিতে ক্লাস পরিবর্তন করা এটি ঠিক করে।

Answer 20

লুকানোর পরিবর্তে টগল ব্যবহার করে আমার সমস্যার সমাধান করুন

Comments

একটি সম্ভাব্য উত্তর ভাগ করুন (উদাহরণ)। এটি অন্যকে ভালভাবে বুঝতে সাহায্য করবে

— সচিথ মুহানদিরাম

Answer 21

মডেল উপাদানটির সাথে সম্পর্কিত নয় এমন উপাদানগুলির জন্য আপনি অন্য কোথাও একই উপাদান আইডি / শ্রেণি ব্যবহার করছেন না তা নিশ্চিত করুন।

এটি হ'ল .. যদি আপনি 'বাছাই করা' ক্লাসের নামটি ব্যবহার করে মডেল পপআপগুলিকে ট্রিগার করে এমন বাটনগুলি সনাক্ত করে থাকেন তবে নিশ্চিত করুন যে সেই একই শ্রেণীর নামটির সাথে কোনও সম্পর্কযুক্ত উপাদান নেই।

Answer 22

শীর্ষ রেটযুক্ত সমাধান প্রয়োগ করার পরে আমার একটি সমস্যা হয়েছে যা এটি ভবিষ্যতের মডেলগুলি সঠিকভাবে খোলার জন্য ব্রেক করে। আমি আমার সমাধানটি খুঁজে পেয়েছি যা ভাল কাজ করে

        element.on("shown.bs.modal", function () {
            if ($(".modal-backdrop").length > 1) {
                $(".modal-backdrop").not(':first').remove();
            }
            element.css('display', 'block');
        });

Answer 23

ফর্মটি জমা দেওয়ার চেষ্টা করার সময় আমারও একই সমস্যা ছিল। সমাধান থেকে বোতাম টাইপ পরিবর্তন ছিল submitথেকে buttonএবং তারপর তাই লাইক বাঁটনে ক্লিক করেন ঘটনা হ্যান্ডেল:

'click .js-save-modal' () {
    $('#myFormId').submit();
    $('#myModalId').modal('hide');
}

Answer 24

নেট এমভিসি 4 প্রকল্পে আমার একটি আজাক্স.বিগেনফর্মের ভিতরে মডেল পপ আপ (বুটস্ট্র্যাপ 3.0) ছিল (অনকমল্ট = "অ্যাড কমপ্লিট" [অতিরিক্ত কোড মোছা হয়েছে])। "অ্যাড কমপ্লিট" জাভাস্ক্রিপ্টের ভিতরে আমার কাছে নিম্নলিখিত কোডটি ছিল। এটি আমার সমস্যা সমাধান করেছে।

$ ( '# MoreLotDPModal') লুকান ()।

$ ("# moreLotDPModal")। ডেটা ('bs.modal')। isShown = false;

$ ( 'শরীর') removeClass ( 'মোডাল খুলুন')।

। $ ( '। মোডাল-পরিপ্রেক্ষিত') অপসারণ ();

$ ( '# MoreLotDPModal') removeClass ( "মধ্যে")।

$ ('# আরও লটডিপি মডেল')। অ্যাটর ('আরিয়া-লুকানো', "সত্য");

Answer 25

আমি এই খুব একই সমস্যা ছিল।

তবে আমি বুটবক্স.জেএস ব্যবহার করছিলাম, সুতরাং এটির সাথে এটি করার কিছু ছিল।

যেভাবেই হোক না কেন, আমি বুঝতে পেরেছিলাম যে সমস্যাটি তার পিতামাতার মতো একই শ্রেণীর সাথে উপাদান থাকার কারণে ঘটছিল। এই উপাদানগুলির মধ্যে একটি যখন মোডালটি প্রদর্শনের জন্য ক্লিক ফাংশনকে আবদ্ধ করতে ব্যবহৃত হয়, তখন সমস্যা দেখা দেয়।

অর্থাত্ এ কারণেই সমস্যাটি ঘটে:

<div class="myElement">
    <div class="myElement">
        Click here to show modal
    </div>
</div>

এটিকে পরিবর্তন করুন যাতে ক্লিক করা উপাদানটির পিতামাতাদের, তার কোনও শিশু বা অন্য কোনও পূর্বপুরুষের মতো ক্লাস না থাকে। ক্লিক ফাংশনগুলিকে আবদ্ধ করার সময় এটি সাধারণভাবে করা ভাল অনুশীলন।

Answer 26

আমি মেটিয়রের সাথে কাজ করছি এবং আমি ঠিক একই সমস্যা পেয়েছি। আমার বাগের কারণ এটি ছিল:

{{#if tourmanager}}
    {{>contactInformation tourmanager}}
{{else}}
    <a href="#addArtistTourmanagerModal" data-toggle="modal"><i class="fa fa-plus"></i> Tourmanager toevoegen</a>
    {{>addArtistTourmanagerModal}}
{{/if}}

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

সমাধান: যদি-অন্যথায় মডেলটি সরিয়ে ফেলুন:

{{#if tourmanager}}
    {{>contactInformation tourmanager}}
{{else}}
    <a href="#addArtistTourmanagerModal" data-toggle="modal"><i class="fa fa-plus"></i> Tourmanager toevoegen</a>
    {{>addArtistTourmanagerModal}}
{{/if}}

Answer 27

//Create modal appending on body
myModalBackup = null;
$('#myModal').on('hidden.bs.modal', function(){
       $('body').append(myModalBackup.clone());
    myModalBackup = null;
});

//Destroy, clone and show modal
myModalBackup = $('#myModal').clone();
myModalBackup.find('.modal-backdrop').remove();
$('#myModal').modal('hide').remove();
myModalBackup.find('.info1').html('customize element <b>1</b>...');
myModalBackup.find('.info2').html('customize element <b>2</b>...');                             
myModalBackup.modal('show');

ভাজা -> https://jsfiddle.net/o6th7t1x/4/

Answer 28

আপনার ডেটা-ব্যাকড্রপ বৈশিষ্ট্যের প্রাথমিক মান হতে পারে

"স্থির", "সত্য", "মিথ্যা"।

স্থিতিশীল এবং সত্য মডেল ছায়া যুক্ত করে, যখন মিথ্যা ছায়াকে অক্ষম করে, সুতরাং আপনার প্রথম মানটিকে মিথ্যাতে পরিবর্তন করতে হবে। এটার মত:

$(document).on('ready',function(){
	
	var count=0;
	
$('#id-which-triggers-modal').on('click',function(){
		
		if(count>0){
		
			$(this).attr('data-backdrop','false')
		}
		count++;
});


});

Answer 29

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

সমস্যাটি যেভাবে সমাধান করা হয়েছিল তা হ'ল ব্রাউজারটিকে মডেল ব্যাকড্রপ মোকাবেলার জন্য পর্যাপ্ত সময় দেওয়া। 'কনফার্ম' ক্লিক করার পরে তাত্ক্ষণিকভাবে ব্যবস্থা নেওয়ার পরিবর্তে, ব্রাউজারটিকে 1 ম মডেলটি লুকানোর জন্য 500 মিমি বলুন এবং ব্যাকড্রপ ইত্যাদি পরিষ্কার করুন - এরপরে সেই পদক্ষেপ নিন যা ত্রুটি মডেলটি দেখিয়ে শেষ হবে।

<button type="button" class="btn btn-red" data-dismiss="modal" on-tap="_dialogConfirmed">Confirm</button>
...

_ডায়ালগ কনফার্মড () ফাংশনটিতে নিম্নলিখিত কোড রয়েছে:

    var that = this;

    setTimeout(function () {
      if (that.confirmAction) {
        (that.confirmAction)();
        that.confirmAction = undefined;
      }
    }, 500);

আমি অনুমান করছি যে অন্যান্য সমাধানগুলি কাজ করেছে কারণ তারা ব্রাউজারকে প্রয়োজনীয় ক্লিনআপ সময় দিতে পর্যাপ্ত অতিরিক্ত সময় নিয়েছিল।

Answer 30

এএসপি.এনইটি-তে, jquery কমান্ডের পরে কোডে আপডেটপ্যানেলের জন্য একটি আপডেট যুক্ত করুন। উদাহরণ:

    ScriptManager.RegisterStartupScript(Page, Page.GetType(), "myModal", "$('#myModal').modal('hide');", true);
    upModal.Update();