জাভাস্ক্রিপ্ট দিয়ে বুটস্ট্র্যাপ মডেলটি কীভাবে আড়াল করবেন?

Question

আমি এখানে পোস্টগুলি, বুটস্ট্র্যাপ সাইট এবং পাগলের মতো গুগলেড পড়েছি - তবে আমি নিশ্চিত যা খুঁজে পাচ্ছি না এটি একটি সহজ উত্তর ...

আমার কাছে এমন একটি বুটস্ট্র্যাপ মডেল রয়েছে যা আমি এই জাতীয় লিঙ্ক_এর সাহায্যকারী থেকে খুলি:

<%= link_to "New Contact", new_contact_path, {remote: true, 'data-toggle' => 'modal', 'data-target' => "#myModal",  class: "btn btn-primary"} %>

আমার ContactsController.createক্রিয়ায়, আমার কাছে এমন কোড রয়েছে যা তৈরি করে Contactতখন চলে যায় create.js.erb। ইন create.js.erb, আমার হাতে কিছু ত্রুটি পরিচালনার কোড রয়েছে (রুবি এবং জাভাস্ক্রিপ্টের মিশ্রণ)। যদি সবকিছু ঠিকঠাক হয় তবে আমি মডেলটি বন্ধ করতে চাই।

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

আমি চেষ্টা করেছি $('#myModal').modal('hide');এবং এর কোনও প্রভাব নেই। আমি চেষ্টা করেছি $('#myModal').hide();যার ফলে মডেলগুলি বরখাস্ত হয় তবে ব্যাকড্রপ ছেড়ে যায়।

কীভাবে মডেলগুলি বন্ধ করবেন এবং / বা এর মধ্যে থেকে ব্যাকড্রপটি খারিজ করবেন সে সম্পর্কে কোনও গাইডেন্স create.js.erb?

সম্পাদন করা

মাইমোডালটির জন্য এখানে মার্কআপ রয়েছে:

<div class="modal hide" id="myModal" >
  <div class="modal-header">
    <a class="close" data-dismiss="modal">×</a>
    <h3>Add Contact</h3>
    <div id="errors_notification">
    </div>
  </div>
  <div class="modal-body">
    <%= form_for :contact, url: contacts_path, remote: true do |f| %>  
      <%= f.text_field :first_name, placeholder: "first name" %>
      <%= f.text_field :last_name, placeholder: "last name" %>
      <br>
      <%= f.submit "Save", name: 'save', class: "btn btn-primary" %>
      <a class="close btn" data-dismiss="modal">Cancel</a>
    <% end %>
  </div>
  <div class="modal-footer">
  </div>
</div>

Comments

$('#myModal').modal('hide');আইডি দিয়ে মডেলটি বন্ধ / আড়াল করার সঠিক বাক্য গঠন myModal(আপনি এটি বুটস্ট্র্যাপ ডকুমেন্টেশন পৃষ্ঠাতে পরীক্ষা করতে পারেন )। আপনি কি নিশ্চিত যে আপনার পৃষ্ঠায় এই আইডি সহ কোনও উপাদান রয়েছে? এছাড়াও, আপনি এই কলটি দিয়ে কী সম্পাদন করার চেষ্টা করছেন? আপনার বর্তমান বাস্তবায়ন একটি এজ্যাক্স অনুরোধ সম্পাদন new_contact_pathকরে এবং একই সাথে সামগ্রীর সামগ্রীগুলি সহ মডেলটি খুলবে #myModal- আপনি কি এটি চান?

— জুলিয়ান ডি

হাই, জুলিয়ান আমি উপরে আমারমোডাল মার্কআপ পোস্ট করেছি এবং প্রকৃতপক্ষে আইডি সহ একটি ডিভ আছে myModal। আমি পুনরায় চেষ্টা করেছি $('myModal').modal('hide')এবং এখনও ভাল নেই। এইচ এম। আমি যা সম্পাদন করার চেষ্টা করছি তার পরিপ্রেক্ষিতে, আমি মনে করি যে লিঙ্ক_তে সহায়কটি ব্যবহার করা ভুল হতে পারে। আমি এটি দিয়ে প্রতিস্থাপন করেছি: <a data-toggle="modal" href="#myModal" class="btn btn-primary">Add Contact</a>যেহেতু আমার আসলেই কল করার দরকার নেই new_contact_path। আমি কেবল মডেলটি খুলতে চাই এবং তারপরে ব্যবহারকারীর ইনপুট নিয়ে কাজ করব। সাড়া দেওয়ার জন্য সময় দেওয়ার জন্য ধন্যবাদ। আমি এটি বাছাই করতে পারছি না আমি দেখতে পাবেন।

— jvillian

আমার ধারণা এটি কেবল একটি টাইপো, তবে কলটি হওয়া উচিত $('#myModal').modal('hide');( #আপনার মন্তব্যে একটি অনুপস্থিত)।

— জুলিয়ান ডি

প্রকৃত কোড থেকে অনুলিপি না করে টাইপ করার জন্য আমার খারাপ। প্রকৃত কোড লেখা আছে: $('#myModal').modal('hide')। জে

— jvillian

আপনি বুটবক্সজ

— এমডি

Answer 1

ব্রাউজার উইন্ডোতে মোডাল খোলা থাকলে, চেষ্টা করার জন্য ব্রাউজারের কনসোলটি ব্যবহার করুন

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

যদি এটি কাজ করে (এবং মডেলগুলি বন্ধ হয়ে যায়) তবে আপনি জানেন যে আপনার ঘনিষ্ঠ জাভাস্ক্রিপ্টটি সার্ভার থেকে সঠিকভাবে ব্রাউজারে পাঠানো হচ্ছে না ।

যদি এটি কাজ না করে তবে ক্লায়েন্টের কী ঘটছে সে সম্পর্কে আপনাকে আরও তদন্ত করতে হবে। উদাহরণস্বরূপ নিশ্চিত করুন যে একই আইডি সহ দুটি উপাদান নেই। উদাহরণস্বরূপ এটি পৃষ্ঠা লোডের পরে প্রথমবারের মতো কাজ করে তবে দ্বিতীয়বার নয়?

ব্রাউজারের কনসোল: ফায়ারফক্সের জন্য ফায়ারব্যাগ, ক্রোম বা সাফারি ইত্যাদির জন্য ডিবাগিং কনসোল ইত্যাদি

Comments

দ্বিতীয় অনুচ্ছেদটি আমি যা খুঁজছিলাম was সদৃশ আইডি আমার মডেলগুলি দ্বিতীয়বার সঠিকভাবে না দেখানোর জন্য তৈরি করছিল।

— মাটিয়াস

এটি আমার জন্য সমস্যাটি স্থির করেছে। ধন্যবাদ।

— Finchy70

Answer 2

বুটস্ট্র্যাপ মডেল বন্ধ করতে আপনি নিম্নলিখিত হিসাবে মডেল পদ্ধতিতে বিকল্প হিসাবে 'আড়াল' পাস করতে পারেন

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

দয়া করে এখানে কাজ করা ফিডলটি একবার দেখুন

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

যদি উপরের পদ্ধতিটি না থেকে থাকে তবে আপনার ক্লোজ বোতামটিতে একটি আইডি দিন এবং ক্লোজ বোতামটিতে ক্লিক করুন trigger

Comments

মডেল ডায়ালগটি কোন মুহুর্তে বন্ধ হওয়া উচিত বলে ঠিক ঠিক তা জানলে এটি বিশেষত কার্যকর হয়। উদাহরণস্বরূপ একটি সাফল্য ফাংশন শেষে। যদি কোনও ত্রুটি হয় তবে ডায়ালগটি এটি প্রদর্শন করতে পারে।

— উইল

Answer 3

আমি বুটস্ট্র্যাপ ৩.৪ ব্যবহার করি আমার জন্য এটি কাজ করে না

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

হতাশায়, আমি এটি করেছি:

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

হতে পারে এটি মার্জিত নয়, তবে এটি কার্যকর হয়

Comments

আপনি যদি $ ("। মডেল-ব্যাকড্রপ") ব্যবহার করেন তবে ভাল হবে remove

— ব্লাডহাউন্ড

এটি নতুন বাগ প্রবর্তন করবে। দয়া করে প্রস্তাবিত পদ্ধতিগুলি ব্যবহার করুন

— বেনিয়ামিন একস্টাইন

jQuery এর ( 'মোডাল-পরিপ্রেক্ষিত।') ক্লিক করুন ()।

ছোট বগি কিন্তু অবশ্যই কাজ করে। নীচে ম্যানুয়েল ফার্নান্দোর সমাধান আমার পক্ষে নিখুঁতভাবে কাজ করেছে।

— মুনাম ইউসুফ

@ উমিংগো দয়া করে একটি পদ্ধতির সুপারিশ করুন যদি এখানে উল্লিখিতগুলি ভাল না হয় এবং আপনি যদি তার একটি সম্পর্কে জানেন।

— স্প্যান

Answer 4

এটির বুটস্ট্র্যাপের সাহায্যে কোনও মডেল লুকিয়ে রাখতে এবং প্রদর্শন করতে সেরা ফর্ম

// SHOW
$('#ModalForm').modal('show');
// HIDE
$('#ModalForm').modal('hide');

Comments

এখন পর্যন্ত সেরা উত্তর। ক্লিকগুলির সাথে সিমুলেটিং আচরণ, jQuery ফেইডআউট বা সিএসএস দীর্ঘমেয়াদে মিস্যালাইনমেন্ট তৈরি করতে পারে।

— জর্জিও টেম্পেস্তা

Answer 5

আমি একই ত্রুটিটি সহ অভিজ্ঞতা পেয়েছিলাম এবং কোডের এই লাইনটি আমাকে সত্যই সহায়তা করে।

$("[data-dismiss=modal]").trigger({ type: "click" });

Comments

আমি অন্য একটি সমস্যা পড়েছি যা পরামর্শ দিয়েছে যে সমস্যাটি উপাদানটিতে ডেটা-বরখাস্ত বৈশিষ্ট্যযুক্ত হতে পারে, তারপরে এটি জাভাস্ক্রিপ্ট থেকে ট্রিগার করার চেষ্টা করছে

— Femtosecond

অনেক অনেক অনেক ধন্যবাদ ম্যানুয়েল, এটি অনেক অনুসন্ধানের পরে আমার সমস্যার সমাধান করেছে, $ ('# মাইমোডেলআইডি')। মডেল ('লুকান'); $ ("[ডেটা-খারিজ = মডেল]")। ট্রিগার ({প্রকার: "ক্লিক করুন"}); যে আমি

— আজাক্স সাফল্যের মডেলটি

Answer 6

$('#modal').modal('hide'); 
//hide the modal

$('body').removeClass('modal-open'); 
//modal-open class is added on body so it has to be removed

$('.modal-backdrop').remove();
//need to remove div with modal-backdrop class

Comments

এটি কাজ করেছে, তবে আমি যদি এটি আবার খুলি তবে

— মডেলটি

Answer 7

আমি সঠিক কোডটি পেয়েছি আপনি এই কোডটি ব্যবহার করতে পারেন

$('.close').click(); 

Comments

এখনও

— অবধি

চমত্কার কেবল সেরা +1

— মূমু

Answer 8

আমি যা বিশ্বাস করি তেমনই একটি সমস্যা ছিল into $('#myModal').modal('hide');যে ফাংশন মাধ্যমে সম্ভবত চলমান এবং লাইন হিট

if (!this.isShown || e.isDefaultPrevented()) return

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

if (!(typeof this.isShown == 'undefined') && (!this.isShown || e.isDefaultPrevented())) return

এটি বেশিরভাগ অংশে সমস্যাটি সমাধান করবে বলে মনে হয়েছে। যদি ব্যাকড্রপটি এখনও থেকে যায় আপনি লুকিয়ে থাকা কল করার পরে ম্যানুয়ালি এটি সরিয়ে ফেলার জন্য আপনি সর্বদা একটি কল যুক্ত করতে পারেন $('.modal-backdrop').remove();। মোটেও আদর্শ নয় তবে কাজ করে।

Answer 9

(বুটস্ট্র্যাপ 3 প্রসঙ্গে), মোডাল ব্যবহার লুকানোর জন্য: $('#modal').modal('hide')। তবে ব্যাকড্রপটি (আমার জন্য) চারদিকে ঝুলে থাকার কারণ হ'ল আমি 'লুকোচুরির' কাজ শেষ করার আগে মডেলের জন্য ডোমটিকে ধ্বংস করছিলাম।

এটি সমাধানের জন্য, আমি গোপন ইভেন্টটি ডিওএম অপসারণের সাথে শৃঙ্খলিত করেছি। আমার ক্ষেত্রে:this.render()

var $modal = $('#modal');

//when hidden
$modal.on('hidden.bs.modal', function(e) { 
  return this.render(); //DOM destroyer
});

$modal.modal('hide'); //start hiding

Comments

তবে আপনি দয়া করে আমার ক্রোম কনসোলে this.render()এটির প্রদর্শন সম্পর্কে আমাকে বলতে পারেন undefined is not a function।

— অনিল কুমার পান্ডে

Answer 10

"দেখানো" কলব্যাক আসার পরে কল করার জন্য আমার ভাগ্য ভাল ছিল:

$('#myModal').on('shown', function () {
      $('#myModal').modal('hide');
})

এটি নিশ্চিত করে যে মডেলটি লোড করা হয়েছিল লুকানোর () কল করার আগেই।

Answer 11

আমরা যা পেয়েছি তা হ'ল আমাদের সার্ভার কোডটিতে কল এবং সাফল্যের কলটিতে ফিরে আসার মধ্যে কিছুটা বিলম্ব হয়েছিল। যদি আমরা $("#myModal").on('hidden.bs.modal', function (e)হ্যান্ডলারের মধ্যে সার্ভারে কলটি আবৃত করি এবং তারপরে $("#myModal").modal("hide");পদ্ধতিটি কল করি তবে ব্রাউজারটি মোডালটি আড়াল করে তারপরে সার্ভারের পাশের কোডটি শুরু করে।

আবার, মার্জিত নয় তবে কার্যকরী।

 function myFunc(){
        $("#myModal").on('hidden.bs.modal', function (e) {
            // Invoke your server side code here.
        });
        $("#myModal").modal("hide");
 };

আপনি দেখতে পাচ্ছেন, কখন অনুরোধ myFuncকরা হবে, এটি মডেলটি আড়াল করবে এবং তারপরে সার্ভারের পাশের কোডটি শুরু করবে।

Answer 12

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

$("a.close").on("click", function(e){
  $("#modal").modal("hide");
  e.stopPropagation();
});

Answer 13

এখানে ডকটি দেওয়া আছে: http://getbootstrap.com/javascript/#modals- অর্থবোধক

পদ্ধতিটি এখানে: $ ('# মাইমোডাল') mod মডেল ('লুকান')

আপনার যদি বিভিন্ন সামগ্রী সহ মডেলটি কয়েকবার খোলার প্রয়োজন হয় তবে আমি যুক্ত করার পরামর্শ দিই (আপনার মূল জেএসে):

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

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

Answer 14

$('.modal-backdrop').hide(); // for black background
$('body').removeClass('modal-open'); // For scroll run
$('#modal').modal('hide'); 

Answer 15

এমনকি আমারও একই ধরণের সমস্যা রয়েছে। এটি আমাকে অনেক সাহায্য করেছিল

$("[data-dismiss=modal]").trigger({ type: "click" });

Answer 16

আমি এই সাধারণ কোডটি ব্যবহার করেছি:

$("#MyModal .close").click();

Answer 17

$('#modal').modal('hide');এবং এর রূপগুলি আমার জন্য কাজ করে না যতক্ষণ না আমি data-dismiss="modal"বাতিল বোতামটিতে অ্যাট্রিবিউট হিসাবে না থাকি । আপনার মত, আমার চাহিদাগুলি সম্ভবত কিছু অতিরিক্ত যুক্তির উপর ভিত্তি করে সম্ভবত বন্ধ / সম্ভবত-না-হওয়া উচিত ছিল সুতরাং data-dismiss="modal"সরাসরি কোনও লিঙ্কে ক্লিক করলে তা ঘটে না। আমি একটি লুকানো বাটন রেখে data-dismiss="modal"শেষ করেছি যাতে আমি প্রোগ্রাম হ'ল ক্লিক হ্যান্ডলারটি থেকে প্রোগ্রাম করতে পারি, তাই

<a id="hidden-cancel" class="hide" data-dismiss="modal"></a>
<a class="close btn">Cancel</a>

এবং তারপরে বাতিল করার জন্য ক্লিক হ্যান্ডলারের ভিতরে যখন আপনার থাকতে পারে এমন মডেলটি বন্ধ করতে হবে

$('#hidden-cancel').click();

Comments

আমার ক্ষেত্রে (এএসপি নেট রেজার পৃষ্ঠা) আমি এটি ওপি'র সাথে সাদৃশ্যযুক্ত ছিলাম: "ক্লাস" মডেল "এর সাথে আমার কিছুটা ফাঁকা ডিভ ছিল এবং গতিশীলভাবে এটিতে cshtml ফাইল যুক্ত করা হয়েছিল, যেমন মডেল বডি এবং এর একটি বোতামে একটি ক্লিক যুক্ত করেছি শরীর যত তাড়াতাড়ি মডেল প্রদর্শিত হবে। ".মডাল ('লুকান)" একা কল করা যথেষ্ট ছিল না, যেমন আপনি উল্লেখ করেছেন: "ডেটা-ডিসমিসাল =" মডেল "" ইনভেকিং বোতামে চুক্তি হয়েছিল !!! ty

— ছার্পেস্টে

Answer 18

আমাদের ইভেন্ট বুবলিংয়ের যত্ন নেওয়া দরকার। কোডের একটি লাইন যুক্ত করা দরকার

$("#savechanges").on("click", function (e) {
        $("#userModal").modal("hide");
        e.stopPropagation(); //This line would take care of it
    });

Answer 19

আমি বুঝতে পারি এটি একটি পুরানো প্রশ্ন, তবে আমি দেখতে পেয়েছি যে এগুলির কোনওটিই ঠিক আমি যা খুঁজছিলাম তা হ'ল না। এটি মডেলটি প্রদর্শন শেষ হওয়ার আগে বন্ধ করার চেষ্টা করার কারণে দেখা গেছে।

আমার সমাধান @ schunie23 এর উত্তরের ভিত্তিতে ছিল তবে আমাকে কয়েকটি জিনিস পরিবর্তন করতে হয়েছিল।

প্রথমত, আমি আমার স্ক্রিপ্টের শীর্ষে বৈশ্বিক পরিবর্তনশীল ঘোষণা করেছি:

<script>
    var closeModal = false;
    ...Other Code...

তারপরে আমার মডেল কোডে:

$('#myModal').on('show.bs.modal', function (event) {
    ...Some Code...
    if (someReasonToHideModal) {
        closeModal = true;
        return;
    }
    ...Other Code...

তারপরে এটি: ('show.bs.modal' নামটি নোট করুন যা নির্দেশ করে যে মোডাল 'শো'-এর বিপরীতে সম্পূর্ণরূপে দেখিয়েছে যা শো ইভেন্টটি ডাকার সময় ট্রিগার করে। )

$('#myModal').on('shown.bs.modal', function (event) {
    if (closeEditModal) {
        $('#myModal').modal('hide');
        closeModal = false;
    }
});

আশা করি এটি কোনও দিন অতিরিক্ত গবেষণা সংরক্ষণ করে day আমি এটির সামনে আসার আগে সমাধানের সন্ধান করতে কিছুটা সময় ব্যয় করেছি।

Answer 20

আমি এই কোডটি ব্যবহার করেছি -

ফেড আউট ব্যবহার করে মসৃণ প্রভাবের সাথে মডেলটি লুকান।

$('#myModal').fadeOut();

$('.modal-backdrop').fadeOut();

$('.modal-open').css({'overflow': 'visible'});

Answer 21

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

$('.close:visible').click();

Answer 22

document.getElementById ( 'closeButton') ক্লিক করুন ()। // যোগ করুন একটি ডেটা-বরখাস্ত করুন = "মডেল" মডেলের একটি উপাদানের বৈশিষ্ট্য এবং এই আইডিটি দিন

Answer 23

এটি খারাপ অভ্যাস তবে জাভাস্ক্রিপ্টে ক্লোজ বোতামটি কল করে মডেল বন্ধ করতে আপনি এই কৌশলটি ব্যবহার করতে পারেন। এটি 3 সেকেন্ডের পরে মডেলটি বন্ধ হয়ে যাবে।

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script>
window.onload=function()
{
setInterval(function(){ 

$("#closemodal").click();
}, 3000);

}
</script> 
</head>
<body>

   <div class="container">
 <h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal"   data-target="#myModal">Open Modal</button>

<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">

    <!-- Modal content-->
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">&times;</button>
      <h4 class="modal-title">Modal Header</h4>
    </div>
    <div class="modal-body">
      <p>Some text in the modal.</p>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal" id="closemodal">Close</button>
    </div>
  </div>

</div>
</div>

 </div>

</body>
</html>

Answer 24

এটি কেবল এইচটিএমএল এ করা যেতে পারে:

data-dismiss="modal"

<button type="button" class="btn btn-secondary" data-dismiss="modal">Save</button>

Comments

@ কেভিনফ্রান্সিস কারণ প্রশ্নটি নিয়ামকের কাছ থেকে এটি করার জন্য একটি অগ্রগামী উপায়ের সন্ধান করছে, কীভাবে কোনও বোতাম এটি তৈরি করে না তা।

— গ্রিনএজজেড