টুইটার বুটস্ট্র্যাপ মডেল উইন্ডোটি বন্ধ হতে নিষেধ করুন

Question

আমি টুইটার বুটস্ট্র্যাপ ব্যবহার করে একটি মডেল উইন্ডো তৈরি করছি। ডিফল্ট আচরণটি হ'ল যদি আপনি মডেল অঞ্চলের বাইরে ক্লিক করেন, মডেলটি স্বয়ংক্রিয়ভাবে বন্ধ হয়ে যাবে। আমি এটি অক্ষম করতে চাই - অর্থাত্ মডেলের বাইরে ক্লিক করার সময় মডেল উইন্ডোটি বন্ধ করবেন না।

কেউ কি এই জন্য jQuery কোড ভাগ করতে পারে?

Comments

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

— ট্রেভর

@Trevor বিপরীত মত যে মোডাল ।

— রুলিং

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

— জাম্পার আরবিকে

@ ট্রেভর আমি আপনার দাবির পক্ষে সমর্থন করার জন্য কোনও প্রমান দেখতে পাচ্ছি না।

— 1252748

বৈশিষ্ট্যটি একটি দৃশ্যে বোধগম্য হয় যখন ব্যবহারকারীকে মডেলে অনেক ফর্ম ক্ষেত্রগুলি পূরণ করতে হয়। ব্যবহারকারী যদি ঘটনাক্রমে মডেলের বাইরে ক্লিক করে, তবে প্রবেশ করা সমস্ত বিবরণ হারিয়ে যাবে; তারপরে তাদের মডেলগুলি পুনরায় সক্রিয় করতে হবে এবং ক্ষেত্রগুলি পুনরায় পূরণ করতে হবে। এই বৈশিষ্ট্য যেমন জ্বালা এড়াতে পারে।

— মিকম্যাকুসা

Answer 1

আমি বিশ্বাস করি আপনি সেট করতে চান পরিপ্রেক্ষিত মান থেকে স্ট্যাটিক । আপনি Escকীটি ব্যবহার করার সময় উইন্ডোটি বন্ধ করতে এড়াতে চান , আপনাকে অন্য মান নির্ধারণ করতে হবে।

উদাহরণ:

<a data-controls-modal="your_div_id"
   data-backdrop="static"
   data-keyboard="false"
   href="#">

বা আপনি যদি জাভাস্ক্রিপ্ট ব্যবহার করছেন:

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

Comments

@ ব্যবহারকারী 1296175 এটি অর্জনের জন্য আপনার চূড়ান্ত কোডটি কী ছিল? আমিও তাই করতে চাই

— আলফামালে

আপনাকে @ নোবিটা ধন্যবাদ, ডেটা-ব্যাকড্রপ যোগ করুন = "স্থিতিশীল" কৌশলটি করে! টুইটার বুটস্ট্র্যাপ ডকুমেন্টটি খারাপ :(

— ব্লু স্মিথ

উত্তর বরুণ চ্যাটার্জী থেকে উত্তরটি দেখুন এবং এটি আপনার মডেল সংজ্ঞাতে অন্তর্ভুক্ত করুন

— লিয়ানড্রো

জেএসের একক লাইনের সাথে সমস্ত মডেলের জন্য আউট-সাইড ক্লিক অক্ষম করুন: f .fn.modal.Constructor.DEFAULTS.backroid = 'স্থিতিশীল';

— লুকাস লিসিস

কৌণিক ব্যবহারকারীদের জন্য: var modalInstance = $ modal.open ({টেমপ্লেট url: 'modalTemplate.html', নিয়ামক: 'মোডালকন্ট্রোলার', ব্যাকড্রপ: 'স্ট্যাটিক',});

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

Answer 2

শুধু backdropসম্পত্তি সেট করুন 'static'।

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

আপনি keyboardসম্পত্তিটি সেট করতেও চাইতে পারেন falseকারণ এটি কীবোর্ডের Escকী টিপলে মডেলগুলি বন্ধ হতে বাধা দেয় ।

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

myModal ডিভের আইডি হ'ল এতে আপনার মডেল সামগ্রী রয়েছে।

Comments

হ্যাঁ, এটি সবচেয়ে পরিষ্কার, সহজ উত্তর (যেহেতু এটি ডেটা অ্যাট্রিবিউট যুক্ত করা এড়ায়)। রেফারেন্সের জন্য, backdropএবং বিকল্প বিভাগের অধীনে তাদের ডকুমেন্টেশনে এখানেkeyboard উল্লেখ করা হয়েছে ।

— জেসি ডুপুয়

ডেটা বৈশিষ্ট্য কি এড়ানো যায়? দয়া করে এই সম্পর্কে গাইড।

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

— নির্মল

— মডেল

Answer 3

আপনি মডেল সংজ্ঞা নিজেই এই বৈশিষ্ট্যগুলি অন্তর্ভুক্ত করতে পারেন:

<div class="modal hide fade" data-keyboard="false" data-backdrop="static">

Comments

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

— 16

আপনি যদি পৃষ্ঠা লোডে মডেল চালু করেন তবে অন্যান্য বন্ধ করার বিকল্পগুলি সরিয়ে ফেলার এটি সেরা উপায়।

— সান্তা

Answer 4

আপনি যদি ইতিমধ্যে মডেল উইন্ডোটি সূচনা করে থাকেন তবে আপনি $('#myModal').removeData("modal").modal({backdrop: 'static', keyboard: false})নতুন বিকল্পগুলি প্রয়োগ করবেন কিনা তা নিশ্চিত করতে আপনি বিকল্পগুলি পুনরায় সেট করতে চাইতে পারেন ।

Comments

এটি আমাকে সাহায্য করেছে। "ব্যাকড্রপ: 'স্ট্যাটিক'" সেট করার পরে ব্যবহারকারী এখনও একটি ক্লিকের মাধ্যমে মডেলটি বন্ধ করতে পারত; একটি বাগ মত মনে হচ্ছে, কিন্তু এই কৌশলটি করেছে!

— ওমর

আপাতত: $ ('# মডেল')। অপসারণ ডেটা ('বিএস.মডাল')। মডেল ({ব্যাকড্রপ: 'স্ট্যাটিক', কীবোর্ড: মিথ্যা});

— D3VELOPER

Answer 5

ডায়ালগের বুটস্ট্র্যাপ 'লুকান' ইভেন্টটিকে ওভাররাইড করুন এবং এর ডিফল্ট আচরণ বন্ধ করুন (ডায়ালগটি নিষ্পত্তি করতে)।

নীচের কোড স্নিপেট দেখুন:

   $('#yourDialogID').on('hide.bs.modal', function(e) {

       e.preventDefault();
   });

এটি আমাদের ক্ষেত্রে ঠিক কাজ করে।

Comments

তাহলে, এটি কীভাবে ফিরিয়ে আনব?

— sertaconay

শুধু মার্জিত। thx :) এবং @sertaconay কেবল একটি বুলিয়ান ভেরিয়েবল তৈরি করুন (উদাহরণস্বরূপ) আপনি ডিফল্ট প্রতিরোধ করতে চান কিনা তা সিদ্ধান্ত নেওয়ার জন্য পরীক্ষা করা হবে

— নিম্রোদ ইয়োনাতান বেন-নেস

মডেলটি

— খোলা

মডেলগুলি যখন বন্ধ হয়ে যায় এবং কখন না হয় তার উপর আপনি যদি আরও ভাল নিয়ন্ত্রণ রাখতে চান তবে এটি একটি নিখুঁত সমাধান।

— কুরোজ

Answer 6

হ্যাঁ, আপনি এটি এর মতো করতে পারেন:

<div id="myModal"  tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel"
     aria-hidden="true"
     data-backdrop="static"  data-keyboard="false">

Comments

এটি এমন একটি মামলার জন্য উপযুক্ত যেখানে মডেলটি এইচটিএমএল-এ ঘোষণা করা হয় এবং এটি কেবল জাভাস্ক্রিপ্টের মাধ্যমে খোলা হয় - অর্থাৎ এর কোনও লিঙ্ক নেই। ধন্যবাদ!

— hgolov

Answer 7

@ আইম কেডন এর উত্তর পছন্দ করুন তবে এটি আপনাকে মডেলটিকে পুনরায় আরম্ভ না করে বিকল্পগুলি পরিবর্তন করতে দেয়।

$('#myModal').data('modal').options.keyboard = false;

বা যদি আপনার একাধিক বিকল্পগুলি করার প্রয়োজন হয় তবে জাভাস্ক্রিপ্টগুলি withএখানে কার্যকর হবে!

with ($('#myModal').data("modal").options) {
    backdrop = 'static';
    keyboard = false;
}

যদি মডেলটি ইতিমধ্যে খোলা থাকে, তবে এই বিকল্পগুলি কেবলমাত্র পরবর্তী সময়ে মোডালটি খোলার পরে কার্যকর হবে ।

Comments

stackoverflow.com/questions/16030448/… তবে আমি যদিও এই সমাধানটি পছন্দ করি না

— ভিক্টর

Answer 8

শুধু এই দুটি জিনিস যোগ করুন

data-backdrop="static" 
data-keyboard="false"

এটি এখন এই মত চেহারা হবে

<div class="modal fade bs-example-modal-sm" id="myModal" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">

এটি পালানোর বোতামটি নিষ্ক্রিয় করবে এবং যে কোনও জায়গায় ক্লিক করে লুকিয়ে রাখবে।

Comments

এই পরামর্শ বছর আগে সরবরাহ করা হয়েছিল।

— মিকম্যাকুসা

Answer 9

আপনি ব্যাকগ্রাউন্ডের ক্লিক-টু-ক্লোজ আচরণটি অক্ষম করতে পারেন এবং আপনার পৃষ্ঠাতে এই জাভাস্ক্রিপ্ট যুক্ত করে এটি আপনার সমস্ত মডেলের জন্য ডিফল্ট করতে পারেন (নিশ্চিত করুন এটি জিকুয়ারি এবং বুটস্ট্র্যাপ জেএস লোড হওয়ার পরে কার্যকর করা হয়েছে):

$(function() {
    $.fn.modal.Constructor.DEFAULTS.backdrop = 'static';
});

Answer 10

যেমন D3VELOPER বলেছেন, নিম্নলিখিত কোডগুলি এটি সমাধান করে:

$('#modal').removeData('bs.modal').modal({backdrop: 'static', keyboard: false});

আমি jquery এবং বুটস্ট্র্যাপ উভয়ই ব্যবহার করছি এবং কেবল removeData('modal')কাজ করে না।

Answer 11

আমি খুঁজে পাওয়া সবচেয়ে ভাল লিঙ্কটিতে এই কোড যুক্ত করা হয়

<!-- Link -->
<a href="#mdl" role="button"  data-backdrop="static" data-keyboard="false" data-toggle="modal" id_team="" ></a>
<-- Div -->
<div id="mdl" class="modal hide fade" tabindex="-1" role="dialog" data-keyboard="false" data-backdrop="static"></div>

Answer 12

গুগল থেকে কেউ যদি কোনও মডেল বন্ধ করে কীভাবে রোধ করতে পারে তা বোঝার চেষ্টা করে, ভুলে যাবেন না যে মোডালের উপরের ডানদিকে একটি ঘনিষ্ঠ বোতাম রয়েছে যা অপসারণ করতে হবে।

আমি এটি লুকানোর জন্য কিছু সিএসএস ব্যবহার করেছি:

#Modal .modal-header button.close {
    visibility: hidden;
}

নোট করুন যে "প্রদর্শন: কিছুই নয়" ব্যবহার করে; মোডালটি তৈরি হওয়ার পরে ওভাররাইট হয়ে যায়, তাই এটি ব্যবহার করবেন না।

Comments

আপনি কি কেবল মডেল-হেডার থেকে বোতামটি সরাতে পারবেন না?

— 16 ই

কখনও কখনও এটি HTML পরিবর্তন করার পরিবর্তে CSS ব্যবহার করা উপকারী beneficial

— ড্র করুন

Answer 13

আপনি যদি শর্তাধীন backdrop click closingবৈশিষ্ট্যটি অক্ষম করতে চান । রানটাইম চলাকালীন backdropবিকল্পটি সেট করতে আপনি নিম্নলিখিত লাইনটি ব্যবহার করতে পারেন static।

বুটস্ট্র্যাপ v3.xx

jQuery('#MyModal').data('bs.modal').options.backdrop = 'static';

বুটস্ট্র্যাপ v2.xx

jQuery('#MyModal').data('modal').options.backdrop = 'static';

এটি ইতিমধ্যে ইনস্ট্যান্টিকেটেড মডেলটিকে backdropবিকল্প হিসাবে সেট করা false( ডিফল্ট আচরণ ) বন্ধ হতে বাধা দেবে।

Answer 14

নীচের কোডের লাইনটি ব্যবহার করে আপনি মডেল পপআপের ডিফল্ট আচরণ সেট করতে পারেন:

 $.fn.modal.prototype.constructor.Constructor.DEFAULTS.backdrop = 'static';

Comments

এই পদ্ধতিটিকে +1 করার মতো, আমি সমস্ত মডেলের জন্য সেই বিকল্পটি চাই না।

— tsohr

Answer 15

আজকাল এটি করা খুব সহজ। শুধু যোগ কর:

data-backdrop="static" data-keyboard="false" 

আপনার মডেল বিভাজক মধ্যে।

Comments

বছর আগে এই একই পৃষ্ঠায় এই পরামর্শ দেওয়া হয়েছিল।

— মিকম্যাকুসা

Answer 16

ঠিক আছে, এটি অন্য একটি সমাধান যা আপনারা কেউ কেউ হয়ত খুঁজছিলেন (যেমন আমি ছিলাম ..)

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

এখানে উপস্থাপিত সমাধানগুলি 100% কাজ করে না।

আমার সমাধানটি হ'ল:

showLocationModal = function(loc){

    var is_loading = true;

    if(is_loading === true) {

        is_loading  = false;
        var $modal   = $('#locationModal');

        $modal.modal({show:true});

        // prevent Modal to close before the iframe is loaded
        $modal.on("hide", function (e) {
            if(is_loading !== true) {
                e.preventDefault();
                return false
            }
        });

        // populate Modal
        $modal.find('.modal-body iframe').hide().attr('src', location.link).load(function(){

            is_loading = true;
     });
}};

সুতরাং আমি সাময়িকভাবে মোডালটিকে বন্ধ হওয়া থেকে আটকাচ্ছি:

$modal.on("hide", function (e) {
    if(is_loading !== true) {
        e.preventDefault();
        return false
    }
});

তবে ith the var is_loading যা iframe লোড হওয়ার পরে বন্ধ করতে সক্ষম করবে।

Answer 17

<button type="button" class="btn btn-info btn-md" id="myBtn3">Static 
Modal</button>

<!-- Modal -->
<div class="modal fade" id="myModal3" role="dialog">
<div class="modal-dialog">
  <!-- Modal content-->
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">×</button>
      <h4 class="modal-title">Static Backdrop</h4>
    </div>
    <div class="modal-body">
      <p>You cannot click outside of this modal to close it.</p>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-
      dismiss="modal">Close</button>
    </div>
   </div>
  </div>
</div>
   <script>
    $("#myBtn3").click(function(){
     $("#myModal3").modal({backdrop: "static"});
    });
   });
  </script>

Answer 18

মডেলটি প্রদর্শিত হওয়ার পরে বুটস্ট্র্যাপ ৪.১.৩ এ ব্যাকড্রপ স্থিতি আপডেট করতে আমরা বুটস্ট্র্যাপ-মোডাল-রাপার প্লাগইন থেকে নিম্নলিখিত লাইনটি ব্যবহার করেছি । প্লাগইন সংগ্রহস্থল কোড রেফারেন্স ।

$("#yourModalElement").data('bs.modal')._config.backdrop = (true : "static");