বুটস্ট্র্যাপ মডেল বন্ধ করুন


432

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

$(function () {
   $('#modal').modal(toggle)
});

 <div class="modal" id='modal'>
     <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">Error:</h3>
        </div>
        <div class="modal-body">
        <p>Please correct the following errors:</p>
        </div>
     </div>
 </div>

মডেলটি প্রথম দিকে প্রদর্শিত হয়, তবে মডেলের বাইরে ক্লিক করলে এটি বন্ধ হয় না। এছাড়াও, বিষয়বস্তুর ক্ষেত্রটি ধূসর নয় .. প্রাথমিকভাবে প্রদর্শনের জন্য আমি মডেলটি কীভাবে পেতে পারি, তারপরে অঞ্চলটির বাইরে ব্যবহারকারীর ক্লিকের পরে বন্ধ করতে পারি? এবং ডেমোর মতো আমি কীভাবে পটভূমি ধূসর হতে পারি?


আপনি আপনার মডেলটি আরম্ভ করছেন $("#yourModal").modal()নাকি $('.modal').modal()?
মার্ভ

উপরে আরও প্রসঙ্গ যুক্ত করা হয়েছে। @Merv যে কোন ধারণার জন্য ধন্যবাদ!
নিক বি

হ্যাঁ ... যে সমস্যাটি দেখিয়েছে @ তামিল আপনার সমাধান আছে।
মার্ভ

উত্তর:


706

modal('toggle')পরিবর্তে রাখুনmodal(toggle)

$(function () {
   $('#modal').modal('toggle');
});

5
'টগল' সহ মোটামুটি অতিরিক্ত। কেবলমাত্র ডিডে 'লুকোচুরি' শ্রেণি না থাকার বিষয়টি নিশ্চিত করুন। তবে হ্যাঁ, টাইপো সমস্যাটি সৃষ্টি করছিল। সুতরাং +1
মার্ভ

22
না এটি ইচ্ছাকৃতভাবে কাজ করে না, এটি মডেল উপাদানটি গোপন করে তবে পটভূমি ওভারলে উপাদানটি এখনও বিদ্যমান, আপনার @ সাবডথ সমাধানটি ব্যবহার করা উচিত।
পরিক তিওয়ারি

1
@ পিয়ার - আপনার মন্তব্য সরানোর বিষয়ে বিবেচনা করুন,। মডেল ()। লুকান ()। মডেল ('লুকান') এর মতো নয়, আপনি লোককে বিভ্রান্ত করতে চলেছেন।
মাইকেল পিটারসন


এটি সঠিক উত্তর নয়, নীচের উত্তরটি চেক করুন!
ব্যবহারকারী 1467439

412

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

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

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

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

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


4
$ ( '# মোডাল') মোডাল ( 'টগল')। মোডাল ছায়া গোপন করা আরও ভাল
hamzeh.hanandeh

5
@ হামজেহ.হানন্দে, toggleওভারলে রাখে এবং কোনও সমাধান নয়। আপনার সর্বদা হয় showবা হয় ব্যবহার করা উচিত hide
ryanpcmcquen

81
$('#modal').modal('toggle'); 

অথবা

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

কাজ করা উচিত.

তবে অন্য কিছু যদি না কাজ করে তবে আপনি সরাসরি মডেল ক্লোজ বোতামটি কল করতে পারেন:

$("#modal .close").click()

10
আড়াল () সহ একটিটি মডেলটি বন্ধ করে দেয় তবে পটভূমিটি ঝাপসা করে। $ ("# মডেল। ক্লোজ")। ক্লিক করুন () এটি পুরোপুরি করে। ধন্যবাদ!
শিল্পা

4
এটি ইতিমধ্যে পরিষ্কারভাবে নথিভুক্ত করা হয়েছে, এখানে ক্লিক ক্লিক করে জাল করার দরকার নেই, এটি বেশ ঝাঁকুনির বলে মনে হয়। সঠিক উত্তরটি হ'ল: $ ('# মডেল') mod মডেল ('লুকান');
মাইকেল পিটারসন

এটি -> $ ('# মডেল') mod মোডাল ()। আড়াল ();
তারা

আমার একটি মডেল রয়েছে যা বন্ধ না $('#modal').modal('hide')হলেও আমি এটি ব্যবহার করে বন্ধ করতে পারি তবে এটি $('#modal').modal('toggle')বন্ধ হওয়ার পরে উল্লম্ব স্ক্রোল বারটি প্রদর্শন করে। সুতরাং আমার জন্য $('#modal').hide()নিখুঁতভাবে কাজ করেছেন তবে আমি জানতে চাই যে এটি যদি কোনও সমস্যা তৈরি করে? এবং আমি ভিতরে কোডিং করছি $('#modal .close').click()তাই আমি মনে করি না যে আমি এটি মডেলটি বন্ধ করতে ব্যবহার করতে পারি।
আহতিশাম

34

এটি আমার পক্ষে কাজ করেছে:

<span class="button" data-dismiss="modal" aria-label="Close">cancel</span>

এই লিঙ্কটি মডেল বন্ধ ব্যবহার করুন



18

এটা চেষ্টা কর

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

3
আমি মনে করি এটি প্রশ্নের উত্তর সরবরাহ করে।
জেদেব

1
আমি রাজী. এই উত্তরটি প্রশ্নের আরও সঠিক।
mikeyq6

1
এটি সর্বাধিক উত্সাহিতের চেয়ে ভাল উত্তর।
মার্সেলো আগিমিভেল

@ মার্সেলোআগিমোভেল :-)
প্রেম কুমার

10

এটি বেশ ভাল এবং এটি কৌনিক 2 তেও কাজ করে

$("#modal .close").click()

আমার পরিবর্তে কাজ করে $('#modal').modal('toggle');যার কোনও প্রভাব নেই।
টডর টডোরভ

8

এই একটিতে আমার পাঁচটি সেন্টটি হ'ল আমি কোনও আইডি দিয়ে বুটস্ট্র্যাপ মডেলটিকে লক্ষ্য করতে চাই না এবং একবারে কেবলমাত্র একটি মডেল থাকতে হবে তা দেখে নিম্নলিখিতটি মোডাল অপসারণের জন্য যথেষ্ট পর্যাপ্ত হওয়া উচিত কারণ টগল বিপজ্জনক হতে পারে :

$('.modal').removeClass('show');

2
উদ্দেশ্যগুলি ভাল, তবে এই পদ্ধতিটি সর্বদা কার্যকর হয় না। সহ অন্যান্য পৃষ্ঠাগুলির উপাদানগুলিতে <body>ক্লাস যুক্ত হয়েছে যা পাশাপাশি ফিরে যেতে হবে। সর্বোত্তম উত্তরটি হল 'hide'পদ্ধতিটি ব্যবহার করা ।
জাস্টিনস্টল

7

কিছু পরিস্থিতিতে টাইপিং ত্রুটি অপরাধী হতে পারে। উদাহরণস্বরূপ, নিশ্চিত হয়ে নিন যে আপনার কাছে রয়েছে:

data-dismiss="modal"

এবং না

data-dissmiss="modal"

দ্বিতীয় উদাহরণে ডাবল "এসএস" লক্ষ্য করুন যা ক্লোজ বোতামটি ব্যর্থ করবে।


6

আমরা নিম্নলিখিত উপায়ে মডেল পপ-আপ বন্ধ করতে পারি:

// We use data-dismiss property of modal-up in html to close the modal-up,such as

<div class='modal-footer'><button type='button' class="btn btn-default" data-dismiss='modal'>Close</button></div>

 // We can close the modal pop-up through java script, such as

 <div class='modal fade pageModal'  id='openModal' tabindex='-1' data-keyboard='false' data-backdrop='static'>

    $('#openModal').modal('hide'); //Using modal pop-up Id.
    $('.pageModal').modal('hide'); //Using class that is defined in modal html.

6

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

মডেলটির ব্যাকড্রপ লুকানোর জন্য উপরের কোডটি ব্যবহার করুন যদি আপনি এক পৃষ্ঠায় একাধিক মডেল পপ ব্যবহার করছেন।


বা শুধুমাত্র $('.modal').modal('hide');করবে।
ম্যাট রায়

6

<!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/2.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(window).load(function(){
      $('#myModal').modal('show');
});
$(function () {
   $('#modal').modal('toggle');
});
</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">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
</div>

</body>
</html>


ত্রুটি: "বার্তা": "আনকাচড টাইপ এরির: $ (...)।
মডেল

হ্যাঁ. ক্রোমে "লিনাক্স মিন্ট" "রান কোড স্নিপেট" থাকলে আমার ত্রুটি রয়েছে। তবে এটি ফায়ারফক্সে কাজ করে।
ইভান বুড়লটস্কি

1
@ ইভান বুর্লুৎসকি, আমাকে জানানোর জন্য আপনাকে ধন্যবাদ, এগুলি জেকুরির সাথে অন্তর্ভুক্ত রয়েছে, তাই আমি এটি ঠিক করেছি। এখন এটি সমস্ত ব্রাউজারে দুর্দান্ত কাজ করে।
গণেশ পুট্টা

5
   function Delete(){
       var id = $("#dgetid").val();
       debugger
       $.ajax({
           type: "POST",
           url: "Add_NewProduct.aspx/DeleteData",
           data: "{id:'" + id + "'}",
           datatype: "json",
           contentType: "application/json; charset=utf-8",
           success: function (result) {
               if (result.d == 1) {
                   bindData();
                   setTimeout(function(){ $('#DeleteModal').modal('hide');},1000);
               }
           }
       });
   };

হাই, আপনার উত্তরের জন্য ধন্যবাদ. আমি এটিকে কোড হিসাবে ফর্ম্যাট করেছি (যা মোটামুটি সহজ ছিল - প্রথম লাইনটিকে আরও কিছুটা ইনডেন্ট করুন)। তবে আমি অনুমান করব যে $('#DeleteModal').modal('hide');এখানে কেবলমাত্র প্রাসঙ্গিক?
রুপ


3

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

$("#modalID .close").click()

3

এটি করার আরেকটি উপায় হ'ল প্রথমে আপনি ক্লাস মডেল-ওপেন সরিয়ে ফেলুন যা মোডালটি বন্ধ করে দেয়। তারপরে আপনি ক্লাস মডেল-ব্যাকড্রপ সরিয়ে ফেলেন যা মডেলের ধূসর কভারটি সরিয়ে দেয়।

নিম্নলিখিত কোড ব্যবহার করা যেতে পারে:

$('body').removeClass('modal-open')
$('.modal-backdrop').remove()  

দয়া করে একটি উত্তর হিসাবে ডাম্পিং কোড এড়ানোর চেষ্টা করুন এবং এটি কী করে এবং কেন তা ব্যাখ্যা করার চেষ্টা করুন। আপনার কোডগুলি সেই ব্যক্তির পক্ষে সুস্পষ্ট নাও হতে পারে যাদের প্রাসঙ্গিক কোডিংয়ের অভিজ্ঞতা নেই। স্পষ্টতা, প্রসঙ্গ
ফ্রিটস

ঠিক আছে, সুতরাং মূলত এটি যা ক্লাস মডেল-ওপেন সরিয়ে দেয়, যা মডেলটি বন্ধ করে দেয়। তারপরে ক্লাস মডেল-ব্যাকড্রপগুলি সরিয়ে দেয় যা
মডেলের

3

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

মডেলের সাথে একটি বোতাম যুক্ত করুন data-dismiss="modal"এবং এতে বোতামটি আড়াল করুন display: none। এটি দেখতে কেমন হবে তা এখানে

<div class="modal fade" id="addNewPaymentMethod" role="dialog">
  <div class="modal-dialog">
   .
   .
   .
   <button type="button" id="close-modal" data-dismiss="modal" style="display: none">Close</button>
  </div>
</div>

এখন আপনি যখন মডেলটি প্রোগ্রামোম্যাটালি বন্ধ করতে চান তখন কেবল সেই বোতামটিতে ক্লিক ইভেন্টটি ট্রিগার করুন যা ব্যবহারকারীর দ্বারা দৃশ্যমান নয়

জাভাস্ক্রিপ্টে আপনি এই বোতামটির উপর ক্লিক করে ট্রিগার করতে পারেন:

document.getElementById('close-modal').click();

2

এই কোডটি মডেলটি বন্ধ করার জন্য আমার পক্ষে পুরোপুরি কাজ করেছিল (আমি বুটস্ট্র্যাপ ৩.৩ ব্যবহার করছি)

$('#myModal').removeClass('in')

2

আমার ক্ষেত্রে, বুটস্ট্র্যাপ মডেলটি যেখান থেকে চালিত হয়েছিল সেখান থেকে মূল পৃষ্ঠায় $("#modal").modal('toggle');উপায় ব্যবহারের পরে প্রতিক্রিয়া না জানানো শুরু হয়েছিল , তবে নিম্নলিখিত পদ্ধতিতে প্রতিক্রিয়া শুরু করেছেন:

$("#submitBtn").on("click",function(){
  $("#submitBtn").attr("data-dismiss","modal");
});

2

এটি ভাল কাজ করে

$(function () {
   $('#modal').modal('toggle');
});

যাইহোক, আপনি যখন একাধিক মোডেল শীর্ষে একে অপরের উপর স্ট্যাকিং করেন এটি কার্যকর হয় না, পরিবর্তে, এটি কাজ করে

data-dismiss="modal"

2

কিছু পরীক্ষার পরে, আমি দেখতে পেলাম যে বুটস্ট্র্যাপ মডেলের জন্য এক্সিকিউট করার $(.modal).modal('hide')পরে এক্সিকিউট করার আগে কিছু সময়ের জন্য অপেক্ষা করা প্রয়োজন $(.modal).modal('show')। এবং আমি আমার ক্ষেত্রে পেয়েছি আমার দুজনের মধ্যে কমপক্ষে 500 মিলিয়ন সেকেন্ড অন্তর প্রয়োজন।
সুতরাং এটি আমার পরীক্ষার কেস এবং সমাধান:

$('.modal-loading').modal('show');
setTimeout(function() {
  $('.modal-loading').modal('hide');
}, 500);


2

আপনি এই রেফারেন্সটি দেখতে পারেন তবে এই লিঙ্কটি সরানো থাকলে এই বিবরণটি পড়ুন:

জাভাস্ক্রিপ্টের একক লাইন সহ আইডি মাইমোডাল সহ একটি মডেল কল করুন:

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

বিকল্প

বিকল্পগুলি ডেটা অ্যাট্রিবিউট বা জাভাস্ক্রিপ্টের মধ্য দিয়ে যেতে পারে। ডেটার জন্য বৈশিষ্ট্যাবলী, পরিশেষে যোগ বিকল্প নাম নিরীক্ষার , হিসাবে ডেটা-পরিপ্রেক্ষিত = ""

|-----------|-------------|--------|---------------------------------------------|
| Name      | Type        | Default| Description                                 |
|-----------|-------------|--------|---------------------------------------------|
| backdrop  | boolean or  | true   | Includes a modal-backdrop element.          |
|           | the string  |        | Alternatively, specify static for a         |
|           | 'static'    |        | backdrop which doesn't close the modal      |
|           |             |        | on click.                                   |
|           |             |        |                                             |
| keyboard  | boolean     | true   | Closes the modal when escape key is pressed.|   
|           |             |        |                                             |
| focus     | boolean     | true   | Puts the focus on the modal when initialized|       
|           |             |        |                                             |
| show      | boolean     | true   | Shows the modal when initialized.           |
|-----------|-------------|--------|---------------------------------------------|

পদ্ধতি

অ্যাসিঙ্ক্রোনাস পদ্ধতি এবং স্থানান্তর

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

আরও তথ্যের জন্য আমাদের জাভাস্ক্রিপ্ট ডকুমেন্টেশন দেখুন।

.modal (অপশন)

আপনার সামগ্রীকে মডেল হিসাবে সক্রিয় করে। একটি alচ্ছিক বিকল্প অবজেক্ট গ্রহণ করে।

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

.modal ( 'টগল')

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

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

.modal ( 'প্রদর্শনী')

ম্যানুয়ালি একটি মডেল খোলে। মডেলটি প্রকৃতপক্ষে প্রদর্শিত হওয়ার আগে কলারের কাছে ফিরে আসে (অর্থাত্‍ show.bs.modal ইভেন্টটি ঘটে যাওয়ার আগে)।

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

.modal ( 'আড়াল')

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

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

.modal ( 'handleUpdate')

কোনও মডেলের খোলার সময় তার উচ্চতা পরিবর্তিত হলে মডেলের অবস্থানটি ম্যানুয়ালি পুনর্বহাল করুন (উদাহরণস্বরূপ যদি কোনও স্ক্রোলবার প্রদর্শিত হয়)।

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

.modal ( 'নিষ্পত্তি')

একটি উপাদানের মডেল ধ্বংস করে।

ঘটনাবলী

বুটস্ট্র্যাপের মডেল বর্গ মডেল কার্যকারিতাটিতে আবদ্ধ হওয়ার জন্য কয়েকটি ইভেন্ট প্রকাশ করে। সমস্ত মডেল ইভেন্টগুলি মডেল নিজেই চালিত হয় (অর্থাত্ **)। প্রকারের বর্ণনা

|----------------|--------------------------------------------------------------|
| Event Type     | Description                                                  |
|----------------|--------------------------------------------------------------|
| show.bs.modal  | This event fires immediately when the **show** instance      |
|                | method is called. If caused by a click, the clicked element  |
|                | is available as the **relatedTarget** property of the event. | 
|                |                                                              |
| shown.bs.modal | This event is fired when the modal has been made visible to  |
|                | the user (will wait for CSS transitions to complete). If     |
|                | caused by a click, the clicked element is available as the   | 
|                | **relatedTarget** property of the event.                     |
|                |                                                              |
| hide.bs.modal  | This event is fired immediately when the **hide** instance   |
|                | method has been called.                                      |
|                |                                                              |
| hidden.bs.modal| This event is fired when the modal has finished being hidden |
|                | from the user (will wait for CSS transitions to complete).   |
|----------------|--------------------------------------------------------------|

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

0

তদ্ব্যতীত, আপনি একটি 'x' তে "ক্লিক" করতে পারেন, যা ডায়ালগটি বন্ধ করে দেয়। উদাহরণ:

$(".ui-dialog-titlebar-close").click();


0

আমার ক্ষেত্রে, আমি মডেলটি দেখানোর জন্য একটি বোতাম ব্যবহার করেছি

<button type="button" class="btn btn-success" style="color:white"
    data-toggle="modal" data-target="#my-modal-to-show" >
    <i class="fas fa-plus"></i> Call MODAL
</button>

সুতরাং আমার কোডে, মডেলটি বন্ধ করতে (এতে আইডি = 'মাই-মডেল-টু-শো' রয়েছে) আমি সেই ফাংশনটিকে ডাকি (কৌণিক টাইপস্ক্রিপ্টে):

closeById(modalId: string) {
  $(modalId).modal('toggle');
  $(modalId+ ' .close').click();
}

যদি আমি $ (modalId) কল করি mod মডেল ('লুকান') এটি কাজ করে না এবং কেন জানি না

PS: আমার মোডালটিতে আমি। ক্লোজ ক্লাসের সাথে সেই বোতামের উপাদানটি কোড করেছিলাম

<button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
    <span aria-hidden="true">&times;</span>
</button>

0

কিছু সময় সমাধান কাজ করে না তাই আপনার ক্লাসে সরিয়ে ফেলতে এবং সিএসএস প্রদর্শন যুক্ত করতে সঠিকভাবে হবে: ম্যানুয়ালি কোনওটি নয়।

$("#modal").removeClass("in");
$("#modal").css("display","none");
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.