আপনি কীভাবে একটি টুইটার বুটস্ট্র্যাপ মডেলটিতে পালানোর কী ঘনিষ্ঠ কার্যকারিতা সক্ষম করবেন?

Question

আমি তাদের প্রধান ডকুমেন্টেশন পৃষ্ঠায় টুইটার বুটস্ট্র্যাপ মডেলের জন্য নির্দেশাবলী অনুসরণ করেছি
এবং data-keyboard="true"উল্লিখিত সিনট্যাক্স ব্যবহার করেছি তবে এস্কেপ কীটি মোডাল উইন্ডোটি বন্ধ করে না।
আমি আর কিছু মিস করছি?

কোড:

<a href="#my-modal" data-keyboard="true" data-toggle="modal">Open Modal</a>

<div class='modal fade hide' id='my-modal'>
  <div class='modal-body'>
    <div>Test</div>
  </div>
</div>

Comments

এটি ডিফল্টরূপে সক্ষম হয়েছে

— অ্যাডাম এফ

Answer 1

দেখে মনে হচ্ছে কী কী ইভেন্টটি আবদ্ধ হচ্ছে তা নিয়ে এটি একটি সমস্যা।

tabindexএই সমস্যাটি ঘুরে দেখার জন্য আপনি মডেলটিতে আপনার গুণাবলী যুক্ত করতে পারেন :

tabindex="-1"

সুতরাং আপনার সম্পূর্ণ কোডটি দেখতে এমন হওয়া উচিত:

<a href="#my-modal" data-keyboard="true" data-toggle="modal">Open Modal</a>

<div class='modal fade hide' id='my-modal' tabindex='-1'>
    <div class='modal-body'>
    <div>Test</div>
    </div>
</div>

আরও তথ্যের জন্য আপনি গিথুব এ এই সমস্যাটি দেখতে পারেন

(নতুন টিডব্লিউবিএস সংগ্রহস্থলের আপডেট লিঙ্ক)

Comments

এটি যদিও ইনপুট ক্ষেত্রগুলি থেকে অটোফোকাসকে বাধা দেয়।

— টপলেস

আপনি যদি একাধিক জায়গা থেকে ডায়লগটি আবেদন করেন তবে আপনি নিজের ডিভ.মডালটিতে ডেটা-কীবোর্ড বৈশিষ্ট্য যুক্ত করতে পারেন (এবং এটি কলারগুলিতে বাদ দিতে পারেন)।

— ভাইটালিক ভারহোভাদভ

যেমন @ নরেক নীচে উল্লেখ করেছেন - পালাবার কাছাকাছি হওয়া ডিফল্ট হিসাবে সত্য, সুতরাং আপনার কঠোর প্রয়োজন হবে না data-keyboard="true"- এটি tabindex="-1"আচরণটি সক্ষম করে

— লিও

আমি নিশ্চিত করতে পারি যে এই সমাধানটি বুটস্ট্র্যাপ 4 এ কাজ করে I

— বিনার ওয়েব

অধিকন্তু, data-keyboardনিয়ন্ত্রণকারী নয়, মডেল উপাদানগুলির সাথে সম্পর্কিত। এটি সেট করে পরীক্ষা করা যেতে পারে false।

— উড্রোশিগেরু

Answer 2

এছাড়াও আপনি যদি জাভাস্ক্রিপ্টের মাধ্যমে আবেদন করছেন তবে এটি ব্যবহার করুন:

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

Comments

এটিই আপনাকে একমাত্র কাজ করতে করতে ব্যবহৃত হত তবে এখন আপনার ডিভের একটি 'ট্যাবিনডেক্স = "- 1"' বৈশিষ্ট্য রয়েছে তাও নিশ্চিত করতে হবে।

— বালা ক্লার্ক

আমাকে কেবল ট্যাব সূচকটি সেট করতে হয়েছিল।

— ওয়েলটসচেয়ার্জ

@ চ্যাচাক এর কারণ কীবোর্ড সম্পত্তিটি ডিফল্ট! সুতরাং সবেমাত্র tabindex = '- 1'

— nrek

Answer 3

tabindex="-1"মডেল ডিভের জন্য বৈশিষ্ট্য যুক্ত করুন

<div id="myModal" class="modal fade" role="dialog" tabindex="-1">

</div>

Answer 4

কৌণিকভাবে আমি এটি ব্যবহার করছি:

var modalInstance = $modal.open({                        
 keyboard: false,
 backdrop: 'static',
 templateUrl: 'app/dashboard/view/currentlyIneligibleView.html',
 controller: 'currentlyIneligibleCtrl',
 resolve: {
     data: function () { return param; }
    }
});

• ব্যাকড্রপ: 'স্ট্যাটিক' => বাইরে ক্লিক করা বন্ধ করতে থামুন
• কীবোর্ড: মিথ্যা => এস্কেপ বাটন ব্যবহার করে বন্ধ করতে থামুন

Answer 5

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

এইচটিএমএলে, কেবল data-backdropস্থির হিসাবে এবং data-keyboardমিথ্যাতে সেট করুন

উদাহরণ:

<button type="button" data-toggle="modal" data-target="#myModal" data-backdrop="static" data-keyboard="false">Launch modal</button>

অথবা

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

লাইভ টেস্ট:

https://jsfiddle.net/sztx8qtz/

আরও জানুন: http://budiirawan.com/prevent-bootstrap-modal-closing/

Comments

আপনার উদাহরণটি পালানোর কী সক্ষম করে না

— বিনার ওয়েব