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

Question 1

আমি কিছুক্ষণ সন্ধান করেছি, তবে আমি এর কোনও সমাধান খুঁজে পাচ্ছি না। আমি নিম্নলিখিত চাই:

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

আমি কয়েক দিন ধরে এটি ঘুরে দেখছি, আশা করি কেউ আমাকে সহায়তা করতে পারে।

আগাম ধন্যবাদ.

Question 2

নির্দিষ্ট কোড না দেখে, আপনাকে একটি সুনির্দিষ্ট উত্তর দেওয়া শক্ত। তবে বুটস্ট্র্যাপ ডক্স থেকে আপনি মোডালটিকে এভাবে লুকিয়ে রাখতে পারেন:

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

তারপরে, অন্য কোনও মডেলটি লুকিয়ে থাকলে তা দেখান:

$('#myModal').on('hidden.bs.modal', function () {
  // Load up a new modal...
  $('#myModalNew').modal('show')
})

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

Question 3

আমি জানি এটি একটি দেরী উত্তর, তবে এটি কার্যকর হতে পারে। @ করিমার উপরে উল্লিখিত হিসাবে এটি করার জন্য এখানে একটি সঠিক এবং পরিষ্কার উপায়। আপনি আসলে দুটি ফাংশন একবারে ফায়ার করতে পারেন; triggerএবং dismissমডেল।

এইচটিএমএল মার্কআপ;

<!-- Button trigger modal -->
<ANY data-toggle="modal" data-target="TARGET">...</ANY>

<div class="modal fade" id="SELECTOR" tabindex="-1">
  <div class="modal-dialog">
   <div class="modal-content">
    <div class="modal-body"> ... </div>
     <div class="modal-footer">           <!-- ↓ -->  <!--      ↓      -->
      <ANY data-toggle="modal" data-target="TARGET-2" data-dismiss="modal">...</ANY>
     </div>
   </div>
  </div>
</div>

ডেমো

Question 4

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

একই বোতামের এইচটিএমএলে, আপনি ডেটা-বরখাস্ত করে বর্তমান মডেলটি বন্ধ করতে এবং সরাসরি ডেটা-টার্গেটের সাথে একটি নতুন মডেল খুলতে বলতে পারেন:

<button class="btn btn-success" 
data-toggle="modal" 
data-target="#modalRegistration" 
data-dismiss="modal">Register</button>

Question 5

সমস্যাটি data-dismiss="modal"হ'ল এটি আপনার সামগ্রীকে বামে স্থানান্তরিত করবে

আমি ভাগ করছি কি আমার জন্য কাজ, সমস্যা statment খোলার সময় pop1থেকেpop2

জেএস কোড

var showPopup2 = false;
$('#popup1').on('hidden.bs.modal', function () {
    if (showPopup2) {
        $('#popup2').modal('show');
        showPopup2 = false;
    }
});

$("#popup2").click(function() {
    $('#popup1').modal('hide');
    showPopup2 = true;
});

Question 6

আমি এই পদ্ধতিটি ব্যবহার করি:

$(function() {
  return $(".modal").on("show.bs.modal", function() {
    var curModal;
    curModal = this;
    $(".modal").each(function() {
      if (this !== curModal) {
        $(this).modal("hide");
      }
    });
  });
});

Question 7

নীচের কোডটি ব্যবহার করে আপনি প্রথম মডেলটি আড়াল করতে পারবেন এবং তাত্ক্ষণিকভাবে দ্বিতীয় মডেলটি খুলতে পারবেন, একই কৌশল ব্যবহার করে আপনি দ্বিতীয় মডেলটি আড়াল করতে পারেন এবং প্রথমটি প্রদর্শন করতে পারেন।

$("#buttonId").on("click", function(){
    $("#currentModalId").modal("hide");
    $("#currentModalId").on("hidden.bs.modal",function(){
    $("#newModalId").modal("show");
    });
});

Question 8

আপনি এই কার্যকারিতাটি যুক্ত করতে চান এমন লিঙ্ক বা বোতামে আপনাকে নিম্নলিখিত বৈশিষ্ট্য যুক্ত করতে হবে:

 data-dismiss="modal" data-toggle="modal" id="forgotPassword" data-target="#ModalForgotPassword"

একটি বিচ্ছিন্ন ব্লগ: http://sforsuresh.in/bootstrap-modal-window-close-current-open-new-modal/

Question 9

data-dismiss="modal"

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

Question 10

উপরে উল্লিখিত হিসাবে একই বোতামে এইচটিএমএলতে, আপনি ডেটা-বরখাস্তের সাথে বর্তমান মডেলটি বন্ধ করতে এবং সরাসরি ডেটা-টার্গেট সহ একটি নতুন মডেল খুলতে বলতে পারেন:

<button class="btn btn-success" data-toggle="modal" data-target="#modalRegistration" data-dismiss="modal">Register</button>

তবে এটি স্ক্রোল-বার অদৃশ্য হয়ে যাবে এবং আপনি লক্ষ্য করবেন যে দ্বিতীয় মডেলটি যদি প্রথমটির চেয়ে বেশি ছিল was

সুতরাং সমাধানটি হল মডেল ইনলাইন শৈলীতে নিম্নলিখিত শৈলীটি যুক্ত করা:

Style = "overflow-y : scroll ; "

Question 11

বুটস্প্র্যাপ 3 দিয়ে আপনি এটি ব্যবহার করে দেখতে পারেন: -

var visible_modal = jQuery('.modal.in').attr('id'); // modalID or undefined
if (visible_modal) { // modal is active
    jQuery('#' + visible_modal).modal('hide'); // close modal
}

এগুলির সাথে কাজ করার জন্য পরীক্ষিত: http://getbootstrap.com/javascript/#modals (প্রথমে "লঞ্চ ডেমো মডেল" এ ক্লিক করুন)।

Question 12

আমার ঠিক একই সমস্যা রয়েছে এবং আমার সমাধান কেবল তখনই হবে যখন মডেল ডায়ালগের [ভূমিকা = "ডায়ালগ"] বৈশিষ্ট্য থাকে:

/*
* Find and Close current "display:block" dialog,
* if another data-toggle=modal is clicked
*/
jQuery(document).on('click','[data-toggle*=modal]',function(){
  jQuery('[role*=dialog]').each(function(){
    switch(jQuery(this).css('display')){
      case('block'):{jQuery('#'+jQuery(this).attr('id')).modal('hide'); break;}
    }
  });
});

Question 13

আমার @ গ্রাভিটি গ্রেভের মতো একই সমস্যা ছিল যার ফলে আপনি যদি ব্যবহার করেন তবে স্ক্রোলিং কাজ করে না

data-toggle="modal" data-target="TARGET-2"

সাথে

data-dismiss="modal"

স্ক্রোলটি সঠিকভাবে কাজ করে না এবং মোডালের চেয়ে পৃষ্ঠা স্ক্রোলিংয়ে ফিরে আসে re এটি ট্যাগ থেকে মডেল-ওপেন ক্লাসটি অপসারণের ডেটা-খারিজের কারণে।

শেষ পর্যন্ত আমার সমাধানটি ছিল মডেলের অভ্যন্তরীণ উপাদানটির এইচটিএমএল সেট করা এবং পাঠ্যকে আউট / আউট ফেইড করার জন্য সিএসএস ব্যবহার করা।

Question 14

ক্লিক ফাংশন ব্যবহার:

$('.btn-editUser').on('click', function(){
    $('#viewUser').modal('hide'); // hides modal with id viewUser 
    $('#editUser').modal('show'); // display modal with id editUser
});

মাথা:

নিশ্চিত করুন যে আপনি যেটিকে দেখাতে চান সেটি একটি স্বাধীন মডেল।

Question 15

প্রথম মডেলে:

নিচের নিকটবর্তী লিঙ্কের সাথে পাদলে মোডাল বরখাস্ত লিঙ্কটি প্রতিস্থাপন করুন।

<div class="modal-footer">
      <a href="#"  data-dismiss="modal" class="btn btn-primary" data-toggle="modal" data-target="#second_model_id">Close</a>
</div>

দ্বিতীয় মডেলে:

তারপরে দ্বিতীয় মডেলটি ডিভ ট্যাগের সাথে শীর্ষ ডিভ প্রতিস্থাপন করুন।

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="add text for disabled people here" aria-hidden="true" id="second_model_id">

Question 16

একই সমস্যাটি ছিল, ভবিষ্যতে কেউ যদি এ বিষয়ে হোঁচট খায় তবে এখানে এটি লিখতে হবে এবং একাধিক মডেলের সাথেও স্ক্রলিং করতে হবে (আমি বুটস্ট্র্যাপ ৩.৩..7 ব্যবহার করছি)

আমি যা করেছি তা আমার প্রথম মডেলের ভিতরে এই জাতীয় একটি বোতাম রয়েছে:

<div id="FirstId" data-dismiss="modal" data-toggle="modal" data-target="#YourModalId_2">Open modal</div>

এটি প্রথমটি আড়াল করবে এবং তারপরে দ্বিতীয়টি প্রদর্শন করবে এবং দ্বিতীয় মোডালটিতে আমার কাছে একটি ঘনিষ্ঠ বোতাম থাকবে যা দেখতে দেখতে এটির মতো হবে:

<div id="SecondId" data-dismiss="modal" data-toggle="modal" data-target="#YourModalId_1">Close</div>

সুতরাং এটি দ্বিতীয় মডেলটি বন্ধ করবে এবং প্রথমটি খুলবে এবং স্ক্রোলিংয়ের কাজটি করার জন্য আমি আমার .css ফাইলটিতে এই লাইন যুক্ত করেছি:

.modal {
overflow: auto !important;
}

পিএস: কেবল একটি পার্শ্ব নোট, আপনার এই মডেলগুলি আলাদাভাবে রাখতে হবে, আপনি প্রথমটি লুকিয়ে রাখলে ছোটখাট মডেলটি প্রথমে নেস্ট করা যায় না

সুতরাং বুটস্ট্র্যাপ মডেলের উদাহরণের ভিত্তিতে পুরো উদাহরণটি এখানে:

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal 1 -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        Add lorem ipsum here
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal" data-toggle="modal" data-target="#exampleModal2">
          Open second modal
        </button>
      </div>
    </div>
  </div>
</div>

<!-- Modal 2 -->
<div class="modal fade" id="exampleModal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal"  data-toggle="modal" data-target="#exampleModal">Close</button>
      </div>
    </div>
  </div>
</div>

Question 17

এটা চেষ্টা কর

    $('#model1').modal('hide');
setTimeout(function(){
    $('#modal2').modal('show');
},400);

Question 18

$("#buttonid").click(function(){
    $('#modal_id_you_want_to_hid').modal('hide')
});

// same as above button id
$("#buttonid").click(function(){
$('#Modal_id_You_Want_to_Show').modal({backdrop: 'static', keyboard: false})});

Question 19

আমি অন্য উপায় ব্যবহার:

$('#showModal').on('hidden.bs.modal', function() {
        $('#easyModal').on('shown.bs.modal', function() {
            $('body').addClass('modal-open');
        });
    });

Question 20

আপনি যদি নতুন মোডালটি খোলার আগে পূর্বের খোলা মডেলটি বন্ধ করতে চান তবে আপনাকে অবশ্যই প্রথমে বর্তমান উন্মুক্ত মডেলটি বন্ধ করে জাভাস্ক্রিপ্ট / জ্যাকুয়ারি থেকে করতে হবে এবং তারপরে এটি বন্ধ করার অনুমতি দেওয়ার জন্য একটি 400 মিমি টাইম আউট দিতে হবে এবং তারপরে নীচের কোডের মতো নতুন মোডালটি খুলতে হবে :

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

setTimeout(function() {
       //your code to be executed after 200 msecond 
       $('#newModal').modal({
           backdrop: 'static'//to disable click close
   })
}, 400);//delay in miliseconds##1000=1second

আপনি যদি এটির সাথে চেষ্টা করার চেষ্টা করেন data-dismiss="modal"তবে এতে @ গ্র্যাভিটি এবং @ কুলদীপের মন্তব্যে উল্লিখিত স্ক্রোল ইস্যু থাকবে।

Question 21

প্রশ্নের কোনও উত্তরই আমাকে সহায়তা করেনি যেহেতু আমি এমন কিছু অর্জন করতে চেয়েছিলাম যা প্রশ্নের মধ্যে উল্লিখিত একই ছিল।

আমি এই উদ্দেশ্যে একটি jQuery প্লাগইন তৈরি করেছি।

/*
 * Raj: This file is responsible to display the modals in a stacked fashion. Example:
 * 1. User displays modal A
 * 2. User now wants to display modal B -> This will not work by default if a modal is already displayed
 * 3. User dismisses modal B
 * 4. Modal A should now be displayed automatically -> This does not happen all by itself 
 * 
 * Trying to solve problem for: http://stackoverflow.com/questions/18253972/bootstrap-modal-close-current-open-new
 * 
 */

var StackedModalNamespace = StackedModalNamespace || (function() {
    var _modalObjectsStack = [];
    return {
        modalStack: function() {
            return _modalObjectsStack;
        },
        currentTop: function() {
            var topModal = null;
            if (StackedModalNamespace.modalStack().length) {
                topModal = StackedModalNamespace.modalStack()[StackedModalNamespace.modalStack().length-1];
            }
            return topModal;
        }
    };
}());

// http://stackoverflow.com/a/13992290/260665 difference between $.fn.extend and $.extend
jQuery.fn.extend({
    // https://api.jquery.com/jquery.fn.extend/
    showStackedModal: function() {
        var topModal = StackedModalNamespace.currentTop();
        StackedModalNamespace.modalStack().push(this);
        this.off('hidden.bs.modal').on('hidden.bs.modal', function(){   // Subscription to the hide event
            var currentTop = StackedModalNamespace.currentTop();
            if ($(this).is(currentTop)) {
                // 4. Unwinding - If user has dismissed the top most modal we need to remove it form the stack and display the now new top modal (which happens in point 3 below)
                StackedModalNamespace.modalStack().pop();
            }
            var newTop = StackedModalNamespace.currentTop();
            if (newTop) {
                // 3. Display the new top modal (since the existing modal would have been hidden by point 2 now)
                newTop.modal('show');
            }
        });
        if (topModal) {
            // 2. If some modal is displayed, lets hide it
            topModal.modal('hide');
        } else {
            // 1. If no modal is displayed, just display the modal
            this.modal('show');
        }
    },
});

রেফারেন্সের জন্য ওয়ার্কিং ফিডল, জেএসফিডাল: https://jsfiddle.net/gumdal/67hzgp5c/

আপনাকে কেবল " showStackedModal()" পরিবর্তে আমার নতুন এপিআই " " দিয়ে যেতে হবে modal('show')। লুকানোর অংশটি এখনও আগের মতো হতে পারে এবং মডেলগুলি দেখানোর ও লুকানোর স্ট্যাক করা পদ্ধতির স্বয়ংক্রিয়ভাবে যত্ন নেওয়া হয়।

Question 22

বুটস্ক্র্যাপ 3.x এর সহজ এবং মার্জিত সমাধান একই মডেলটি এভাবে ব্যবহার করা যেতে পারে।

$("#myModal").modal("hide");
$('#myModal').on('hidden.bs.modal', function (e) {
   $("#myModal").html(data);
   $("#myModal").modal();
   // do something more...
});

Question 23

আপনি যদি এমডিবি ব্যবহার করেন তবে এই কোডটি ব্যবহার করুন

    var visible_modal = $('.modal.show').attr('id'); // modalID or undefined
    if (visible_modal) { // modal is active
        $('#' + visible_modal).modal('hide'); // close modal
    }

Question 24

<div class="container">
  <h1>Bootstrap modal: close current, open new</h1>
  <p class="text-muted">
  A proper and clean way to get this done without addtional Javascript/jQuery. The main purpose of this demo is was to answer this 
  <a href="http://stackoverflow.com/questions/18253972/bootstrap-modal-close-current-open-new">question on stackoverflow</a>
  </p>
  <hr />

  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#demo-1">Launch Modal #1</button>
  <button type="button" class="btn btn-info"    data-toggle="modal" data-target="#demo-2">Launch Modal #2</button>
  <button type="button" class="btn btn-default" data-toggle="modal" data-target="#demo-3">Launch Modal #3</button>

  <!-- [ Modal #1 ] -->
  <div class="modal fade" id="demo-1" tabindex="-1">
    <div class="modal-dialog">
     <div class="modal-content">
      <button type="button" class="close" data-dismiss="modal"><i class="icon-xs-o-md"></i></button>
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title caps"><strong>Demo Modal #1</strong></h4>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <div class="input-group">
            <input type="text" class="form-control" placeholder="Input Placeholder..." />
            <span class="input-group-btn"><button class="btn btn-default" type="button">Action</button></span>
          </div>
        </div>
      </div>
       <div class="modal-footer">
            <button type="button" class="btn btn-danger" data-dismiss="modal">&times;</button>
            <button type="button" class="btn btn-info" data-toggle="modal" data-target="#demo-2" data-dismiss="modal">Close current, Launch Modal #2</button>
            <button type="button" class="btn btn-default" data-toggle="modal" data-target="#demo-3" data-dismiss="modal">Close current, Launch Modal #3</button>
        </div>
     </div>
    </div>
  </div>

  <!-- [ Modal #2 ] -->
  <div class="modal fade" id="demo-2" tabindex="-1">
    <div class="modal-dialog">
     <div class="modal-content">
      <button type="button" class="close" data-dismiss="modal"><i class="icon-xs-o-md"></i></button>
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title caps"><strong>Demo Modal #2</strong></h4>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <div class="input-group">
            <input type="text" class="form-control" placeholder="Input Placeholder..." />
            <span class="input-group-btn"><button class="btn btn-default" type="button">Action</button></span>
          </div>
        </div>
      </div>
       <div class="modal-footer">
            <button type="button" class="btn btn-danger" data-dismiss="modal">&times;</button>
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#demo-1" data-dismiss="modal">Close current, Launch Modal #1</button>
            <button type="button" class="btn btn-default" data-toggle="modal" data-target="#demo-3" data-dismiss="modal">Close current, Launch Modal #3</button>
        </div>
     </div>
    </div>
  </div>

  <!-- [ Modal #3 ] -->
  <div class="modal fade" id="demo-3" tabindex="-1">
    <div class="modal-dialog">
     <div class="modal-content">
      <button type="button" class="close" data-dismiss="modal"><i class="icon-xs-o-md"></i></button>
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title caps"><strong>Demo Modal #3</strong></h4>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <div class="input-group">
            <input type="text" class="form-control" placeholder="Input Placeholder..." />
            <span class="input-group-btn"><button class="btn btn-default" type="button">Action</button></span>
          </div>
        </div>
      </div>
       <div class="modal-footer">
            <button type="button" class="btn btn-danger" data-dismiss="modal">&times;</button>
            <button type="button" class="btn btn-info" data-toggle="modal" data-target="#demo-1" data-dismiss="modal">Close current, Launch Modal #1</button>
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#demo-2" data-dismiss="modal">Close current, Launch Modal #2</button>
        </div>
     </div>
    </div>
  </div>

  <hr />
  <h3 class="caps">Usage:</h3>
<pre class="prettyprint">&lt;!-- Button trigger modal --&gt;
&lt;ANY data-toggle="modal" data-target="TARGET"&gt;...&lt;/ANY&gt;

&lt;div class="modal fade" id="SELECTOR" tabindex="-1"&gt;
  &lt;div class="modal-dialog"&gt;
   &lt;div class="modal-content"&gt;
    &lt;div class="modal-body"&gt; ... &lt;/div&gt;
     &lt;div class="modal-footer"&gt;           &lt;!-- ↓ --&gt;  &lt;!--      ↓      --&gt;
      &lt;ANY data-toggle="modal" data-target="TARGET-2" data-dismiss="modal"&gt;...&lt;/ANY&gt;
     &lt;/div&gt;
   &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</pre>
</div> <!-- end .container -->

<hr />
<footer class="text-center"><a href="https://twitter.com/_elmahdim">@_elmahdim</a></footer>
<br />
<br />

Question 25

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

প্রয়োজনীয় -

jQuery

ক্লোজিং / বরখাস্ত বোতাম সহ সমস্ত মডেলগুলি নীচের মতো বৈশিষ্ট্যযুক্ত সেট রয়েছে -

<button type="button" class="btn close_modal" data-toggle="modal" data-target="#Modal">Close</button>

ক্লোজ ক্লোজ_মডালটি বোতামের ক্লাসে যুক্ত হয়েছে দয়া করে দেখুন

এখন সমস্ত বিদ্যমান মডেলগুলি বন্ধ করতে, আমরা কল করব

$(".close_modal").trigger("click");

সুতরাং, আপনি যেখানেই কোনও মডেল খুলতে চান

কেবল উপরের কোডটি যুক্ত করুন এবং আপনার সমস্ত উন্মুক্ত মডেলগুলি বন্ধ হয়ে যাবে।

তারপরে পছন্দসই মডেলটি খুলতে আপনার সাধারণ কোড যুক্ত করুন add

$("#DesiredModal").modal();

Question 26

মডেল ডায়ালগ বাক্সটি লুকান।

পদ্ধতি 1: বুটস্ট্র্যাপ ব্যবহার করে।

$('.close').click(); 
$("#MyModal .close").click();
$('#myModalAlert').modal('hide');

পদ্ধতি 2: ব্যবহার stopPropagation()।

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

পদ্ধতি 3: দেখানো পদ্ধতির ডাকার পরে।

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

পদ্ধতি 4: সিএসএস ব্যবহার করে।

this.display='block'; //set block CSS
this.display='none'; //set none CSS after close dialog

Question 27

এই কোডটি, ক্লোজড মডেলটি খোলা হয়েছে, নতুন মডেলটি খুলুন তবে ইনডেমেটিকালি নতুন মডেলটি বন্ধ রয়েছে।

$(nameClose).modal('hide');
$(nameOpen).modal('show');

অন্য বন্ধের পরে ওপেন নতুন মডেলের জন্য আমার সমাধানটি হ'ল:

function swapModals(nameClose,nameOpen) {
    $(nameClose).modal('hide');
    $(nameClose).on('hidden.bs.modal', function () {
        console.log('Fired when hide event has finished!');
        $(nameOpen).modal('show');
    });
}

Question 28

এই কোডটি কেবল অনুলিপি করুন এবং পেস্ট করুন এবং আপনি দুটি মডেলের সাথে পরীক্ষা করতে পারেন। প্রথমটি বন্ধ করার পরে দ্বিতীয় মডেলটি উন্মুক্ত:

<!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
    Open modal
</button>

<!-- The Modal -->
<div class="modal" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">

            <!-- Modal Header -->
            <div class="modal-header">
                <h4 class="modal-title">Modal Heading</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

            <!-- Modal body -->
            <div class="modal-body">
                Modal body..
            </div>

            <!-- Modal footer -->
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
            </div>

        </div>
    </div>
</div>



<!-- The Modal 2 -->
<div class="modal" id="myModal2">
    <div class="modal-dialog">
        <div class="modal-content">

            <!-- Modal Header -->
            <div class="modal-header">
                <h4 class="modal-title">Second modal</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

            <!-- Modal body -->
            <div class="modal-body">
                Modal body..
            </div>

            <!-- Modal footer -->
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
            </div>

        </div>
    </div>
</div>




<script>
    $('#myModal').on('hidden.bs.modal', function () {
        $('#myModal2').modal('show')
    })
</script>

চিয়ার্স!