একাধিক মডেল ওভারলে

Question

আমার দরকার যে ওভারলেটি প্রথম মডেলের উপরে প্রদর্শন করা হবে, পিছনে নয়।

$('#openBtn').click(function(){
	$('#myModal').modal({show:true})
});

<a data-toggle="modal" href="#myModal" class="btn btn-primary">Launch modal</a>

<div class="modal" id="myModal">
	<div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
          <h4 class="modal-title">Modal title</h4>
        </div><div class="container"></div>
        <div class="modal-body">
          Content for the dialog / modal goes here.
          <br>
          <br>
          <br>
          <br>
          <br>
          <a data-toggle="modal" href="#myModal2" class="btn btn-primary">Launch modal</a>
        </div>
        <div class="modal-footer">
          <a href="#" data-dismiss="modal" class="btn">Close</a>
          <a href="#" class="btn btn-primary">Save changes</a>
        </div>
      </div>
    </div>
</div>
<div class="modal" id="myModal2" data-backdrop="static">
	<div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
          <h4 class="modal-title">Second Modal title</h4>
        </div><div class="container"></div>
        <div class="modal-body">
          Content for the dialog / modal goes here.
        </div>
        <div class="modal-footer">
          <a href="#" data-dismiss="modal" class="btn">Close</a>
          <a href="#" class="btn btn-primary">Save changes</a>
        </div>
      </div>
    </div>
</div>


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/js/bootstrap.min.js"></script>

আমি পরিবর্তন করার চেষ্টা করেছিল z-indexএর .modal-backdrop, কিন্তু এটা একটি জগাখিচুড়ি হয়ে যায়।

কিছু ক্ষেত্রে আমার একই পৃষ্ঠায় দুটিরও বেশি মডেল রয়েছে।

Answer 1

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

ব্যাকড্রপ জেড-ইনডেক্স ফিক্স
এই সমাধানটি ব্যবহার করে setTimeoutকারণ .modal-backdropইভেন্টটি show.bs.modalট্রিগার করার সময় তৈরি হয় না ।

$(document).on('show.bs.modal', '.modal', function () {
    var zIndex = 1040 + (10 * $('.modal:visible').length);
    $(this).css('z-index', zIndex);
    setTimeout(function() {
        $('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack');
    }, 0);
});

• এটি .modalপৃষ্ঠায় নির্মিত প্রত্যেকটির জন্য কাজ করে (এমনকি গতিশীল মডেলগুলি)
• ব্যাকড্রপ তাত্ক্ষণিকভাবে পূর্ববর্তী মডেলগুলিকে ওভারলে করে

উদাহরণস্বরূপ jsfiddle

আপনি যদি কোনও কারণে হার্ডকোডেড জেড-ইনডেক্স পছন্দ না করেন তবে আপনি এই পৃষ্ঠায় সর্বোচ্চ জেড-সূচক গণনা করতে পারেন :

var zIndex = Math.max.apply(null, Array.prototype.map.call(document.querySelectorAll('*'), function(el) {
  return +el.style.zIndex;
})) + 10;

স্ক্রোলবার ফিক্স
যদি আপনার পৃষ্ঠাতে এমন কোনও মডেল থাকে যা ব্রাউজারের উচ্চতা ছাড়িয়ে যায় তবে দ্বিতীয় মডেলটি বন্ধ করার সময় আপনি এতে স্ক্রোল করতে পারবেন না। এই অ্যাড ঠিক করতে:

$(document).on('hidden.bs.modal', '.modal', function () {
    $('.modal:visible').length && $(document.body).addClass('modal-open');
});

সংস্করণগুলি
এই সমাধানটি বুটস্ট্র্যাপ 3.1.0 - 3.3.5 দিয়ে পরীক্ষা করা হয়

Comments

@ এ 1 আরপুন আমার জন্য কাজ করছে না .. যখন আমি দ্বিতীয় মডেলটি বন্ধ করি তখন .. শরীরটি স্ক্রোলযোগ্য হয়ে যায় .. আমি আপনার সমস্ত কোড ব্যবহার করেছি .. :(

— विशाल

সর্বশেষ বিএস সহ আমার পরিবেশে কাজ হয়নি। আমাকে করতে হয়েছিল: $ ('। মডেল-ব্যাকড্রপ')। শেষ ()। না ('মডেল-স্ট্যাক')। সিএসএস ('জেড-ইনডেক্স', zIndex - 1) .এডডি ক্লাস ('মডেল-স্ট্যাক') ;

— metamagikum

.not(this)এটি বুটস্ট্র্যাপ ডেটপিকারের সাথে কাজ করার জন্য আমাকে একটি সামান্য পরিবর্তন করতে হবে ( দ্বিতীয় লাইনে যুক্ত হয়েছে)var zIndex = 1040 + (10 * $('.modal:visible').not(this).length);

— বেনারব্ব

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

— মারফিব্রো 2

BS4 সর্বশেষ সাথে দুর্দান্ত কাজ করে

— wobsoriano

Answer 2

আমি বুঝতে পারি যে একটি উত্তর গৃহীত হয়েছে, তবে আমি দৃ strongly়ভাবে পরামর্শ দিচ্ছি যে এটি ঠিক করার জন্য বুটস্ট্র্যাপ হ্যাক না করা।

আপনি খুব সহজেই প্রদর্শিত.বিএস.মডাল এবং গোপন.বস.মোডাল ইভেন্ট হ্যান্ডলারগুলিকে সংযুক্ত করে এবং সেখানে জেড-ইনডেক্স সামঞ্জস্য করে একই প্রভাব অর্জন করতে পারেন।

এখানে একটি কাজের উদাহরণ

আরও কিছু তথ্য এখানে পাওয়া যায়।

এই সমাধানটি নির্বিচারে গভীরভাবে স্ট্যাকস মডেলগুলির সাথে স্বয়ংক্রিয়ভাবে কাজ করে।

স্ক্রিপ্ট উত্স কোড:

$(document).ready(function() {

    $('.modal').on('hidden.bs.modal', function(event) {
        $(this).removeClass( 'fv-modal-stack' );
        $('body').data( 'fv_open_modals', $('body').data( 'fv_open_modals' ) - 1 );
    });

    $('.modal').on('shown.bs.modal', function (event) {
        // keep track of the number of open modals
        if ( typeof( $('body').data( 'fv_open_modals' ) ) == 'undefined' ) {
            $('body').data( 'fv_open_modals', 0 );
        }

        // if the z-index of this modal has been set, ignore.
        if ($(this).hasClass('fv-modal-stack')) {
            return;
        }

        $(this).addClass('fv-modal-stack');
        $('body').data('fv_open_modals', $('body').data('fv_open_modals' ) + 1 );
        $(this).css('z-index', 1040 + (10 * $('body').data('fv_open_modals' )));
        $('.modal-backdrop').not('.fv-modal-stack').css('z-index', 1039 + (10 * $('body').data('fv_open_modals')));
        $('.modal-backdrop').not('fv-modal-stack').addClass('fv-modal-stack'); 

    });        
});

Comments

শীতল, তবে যখন একটি মডেল বন্ধ থাকে, সেখানে দুটি স্ক্রোলবার উপস্থিত হয় - মডেলের জন্য এক, পুরো পৃষ্ঠার জন্য দ্বিতীয়। এর সমাধান কি হতে পারে?

— সোমনিয়াম

আপনি কি সর্বশেষতম বুটস্ট্র্যাপ ব্যবহার করছেন?

— ইয়ারমো লেমার্স

অতিরিক্ত স্কোল বারটি বন্ধের সাথে মোকাবেলা করার জন্য, আপনাকে লুকানো.বস.মোডাল শ্রোত্রে শরীরে "মডেল-ওপেন" ক্লাস যুক্ত করতে হবে।

— লি

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

— স্কুবাস্টেভ

আমি মনে করি এটি গ্রহণযোগ্য উত্তর হওয়া উচিত। আমার জন্য নির্দোষভাবে কাজ করে।

— ম্যাথু গোহেন

Answer 3

ইয়ারমো লেমারের পরামর্শ অনুসারে কিছু সংক্ষিপ্ত সংস্করণ, এটি ঠিকঠাকভাবে কাজ করছে বলে মনে হচ্ছে। এমনকি বিবর্ণ ইন / আউট এবং এমনকি ক্রেজি ব্যাটম্যান সংবাদপত্র ঘোরার মতো বেসিক অ্যানিমেশনগুলির সাথে। http://jsfiddle.net/ketwaroo/mXy3E/

$('.modal').on('show.bs.modal', function(event) {
    var idx = $('.modal:visible').length;
    $(this).css('z-index', 1040 + (10 * idx));
});
$('.modal').on('shown.bs.modal', function(event) {
    var idx = ($('.modal:visible').length) -1; // raise backdrop after animation.
    $('.modal-backdrop').not('.stacked').css('z-index', 1039 + (10 * idx));
    $('.modal-backdrop').not('.stacked').addClass('stacked');
});

Comments

এখানে একটি সমস্যা রয়ে গেছে যে আপনি যদি দ্বিতীয় মডেলটি বন্ধ করে দেন এবং আপনার পৃষ্ঠায় ব্রাউজারের আকার অতিক্রম করার জন্য পর্যাপ্ত পাঠ্য থাকে তবে আপনি অদ্ভুত স্ক্রোলবার আচরণটি শেষ করেন। আপনাকে modal-openশরীরের উপাদানগুলিতে ক্লাসটি পুনরুদ্ধার করতে হবে : jsfiddle.net/vkyjocyn

— স্ট্রিপলিং

Answer 4

স্ট্রিপলিং ওয়ারিয়রের পরামর্শের সাথে এ 1 আরপুনের উত্তরটির সংমিশ্রণে আমি এটি নিয়ে এসেছি:

$(document).on({
    'show.bs.modal': function () {
        var zIndex = 1040 + (10 * $('.modal:visible').length);
        $(this).css('z-index', zIndex);
        setTimeout(function() {
            $('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack');
        }, 0);
    },
    'hidden.bs.modal': function() {
        if ($('.modal:visible').length > 0) {
            // restore the modal-open class to the body element, so that scrolling works
            // properly after de-stacking a modal.
            setTimeout(function() {
                $(document.body).addClass('modal-open');
            }, 0);
        }
    }
}, '.modal');

এমনকি সত্যের পরে যুক্ত গতিশীল মডেলগুলির জন্য কাজ করে এবং দ্বিতীয়-স্ক্রোলবার সমস্যাটি সরিয়ে দেয়। আমি সবচেয়ে দরকারী যেটির জন্য এটি দরকারী বলে মনে করি তা হ'ল বুটবক্স সতর্কতা থেকে বৈধতা প্রতিক্রিয়া সহ মডেলগুলির মধ্যে ফর্মগুলি সংহত করা, যেহেতু এইগুলি গতিশীল মডেলগুলি ব্যবহার করে এবং সুতরাং ইভেন্টটি ডকুমেন্টের সাথে আবদ্ধ করার প্রয়োজন। মোডাল।

ফিডল এখানে।

Comments

আমি কি 1040 এর হার্ডকোডযুক্ত মানটির পরিবর্তে বেস জেড-সূচক নির্ধারণ করতে ওপেন মডেলের সর্বোচ্চ জেড সূচকটি ব্যবহার করার পরামর্শ দিতে পারি? stackoverflow.com/a/5680815/2569159

— harco gijsbers

Answer 5

আমি একটি বুটস্ট্র্যাপ প্লাগইন তৈরি করেছি যা এখানে পোস্ট করা অনেকগুলি ধারণাগুলি অন্তর্ভুক্ত করে।

বুটপ্লাইয়ে ডেমো: http://www.bootply.com/cObcYInvpq

গিথুব: https://github.com/jhaygt/bootstrap-m মাল্টিমোডাল

এটি পশ্চাদপদটি আরও গা the় ও গাer় করার জন্য ক্রমাগত মডেলগুলি দিয়ে বিষয়টি সমাধান করে। এটি নিশ্চিত করে যে যে কোনও সময় কেবলমাত্র একটি ব্যাকড্রপ দৃশ্যমান:

if(modalIndex > 0)
    $('.modal-backdrop').not(':first').addClass('hidden');

দৃশ্যমান ব্যাকড্রপের জেড-ইনডেক্সটি উভয় show.bs.modalএবং hidden.bs.modalইভেন্টে আপডেট করা হয়েছে :

$('.modal-backdrop:first').css('z-index', MultiModal.BASE_ZINDEX + (modalIndex * 20));

Comments

সুন্দর সমাধান। আপনার একাধিক মোডাল থাকলে আমি ব্যাকড্রপটি আরও গাer় হওয়ার আশা করি তবে আপনি এটি কেন চান না তা আমি দেখতে পারি। @ অ্যান্ডিবার্টন আপনি কি দয়া করে আমাকে জানান যে আমার সমাধানটি কী অনুপস্থিত?

— আরপুন

@ এ 1 আরপুন ২ য় মডেলটি স্ক্রোল বারগুলি খোলার এবং বন্ধ করার পরে প্রথম মডিলে স্ক্রোলিংয়ের অনুমতি দিয়েছিল তা সরানো হয়েছে। আইআইআরসি এটি দেখে মনে হয়েছিল কারণ ২ য় মডেলটি বন্ধ হয়ে যাওয়ার পরে শরীরে ক্লাসটি সরানো হয়েছিল।

— অ্যান্ডি বার্টন

@ অ্যান্ডিবার্টন আমি সেই সমস্যার সমাধানও পরিচালনা করি।

— আরপুন

Answer 6

স্ট্যাকিং মডেলগুলি যখন সমাধান করা হয় তখন মুখ্য পৃষ্ঠাটি স্ক্রোল করে যখন কোনওটি বন্ধ হয়ে যায় আমি দেখতে পেলাম যে বুটস্ট্র্যাপের নতুন সংস্করণগুলি (কমপক্ষে সংস্করণ 3.0.3 থেকে) মোডালগুলি স্ট্যাক করার জন্য কোনও অতিরিক্ত কোডের প্রয়োজন নেই।

আপনি আপনার পৃষ্ঠায় একাধিক মডেল যুক্ত করতে পারেন (অবশ্যই আলাদা আইডি রয়েছে)। একাধিক মডেল খোলার সময় পাওয়া যায় এমন একমাত্র সমস্যাটি হ'ল যে কোনওটি বন্ধ modal-openকরে দেওয়ান নির্বাচকদের ক্লাস অপসারণ করা ।

আপনি পুনরায় যুক্ত করতে নিম্নলিখিত জাভাস্ক্রিপ্ট কোড ব্যবহার করতে পারেন modal-open:

$('.modal').on('hidden.bs.modal', function (e) {
    if($('.modal').hasClass('in')) {
    $('body').addClass('modal-open');
    }    
});

স্যাকড মোডালটির জন্য ব্যাকড্রপ প্রভাবের প্রয়োজন নেই এমন ক্ষেত্রে আপনি সেট করতে পারেন data-backdrop="false"।

সংস্করণ 3.1.1। মডেলের স্ক্রোলবার ওভারলাইং স্থির ফিক্স মডেল ব্যাকড্রপ , তবে উপরের সমাধানটি পূর্ববর্তী সংস্করণগুলির সাথেও কাজ করে বলে মনে হচ্ছে।

Answer 7

অবশেষে সমাধান। আমি এটি বিভিন্ন উপায়ে পরীক্ষা করেছি এবং ভাল কাজ করে।

একই সমস্যার যে কারও জন্য সমাধানটি এখানে রয়েছে: Modal.prototype.show ফাংশনটি পরিবর্তন করুন (বুটস্ট্র্যাপ.জেএস বা মোডাল.জেএস এ)

থেকে:

if (transition) {
   that.$element[0].offsetWidth // force reflow
}   

that.$element
   .addClass('in')
   .attr('aria-hidden', false)

that.enforceFocus()

প্রতি:

if (transition) {
    that.$element[0].offsetWidth // force reflow
}

that.$backdrop
   .css("z-index", (1030 + (10 * $(".modal.fade.in").length)))

that.$element
   .css("z-index", (1040 + (10 * $(".modal.fade.in").length)))
   .addClass('in')
   .attr('aria-hidden', false)

that.enforceFocus()

এটি আমি খুঁজে পেয়েছি যে সবচেয়ে ভাল উপায়: কতটি মডেল খোলা আছে তা পরীক্ষা করে দেখুন এবং মডেলের জেড-ইনডেক্স এবং ব্যাকড্রপটিকে একটি উচ্চতর মানতে পরিবর্তন করুন।

Answer 8

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

.modal.fade {
    background: rgba(0,0,0,0.5);
}

Comments

এটি ভাল কাজ করছে বলে মনে হচ্ছে ... আপনি কি ভাবেন এটি স্ট্যান্ডার্ড বুটস্ট্র্যাপ হবে?

— বেন সি

Answer 9

বুটপ্লেতে আপনার জেএসে নিম্নলিখিতগুলি যুক্ত করার চেষ্টা করুন

$('#myModal2').on('show.bs.modal', function () {  
$('#myModal').css('z-index', 1030); })

$('#myModal2').on('hidden.bs.modal', function () {  
$('#myModal').css('z-index', 1040); })

ব্যাখ্যা:

বৈশিষ্ট্যগুলি (ক্রোমের ডেভ সরঞ্জাম ব্যবহার করে) সাথে ঘুরে দেখার পরে, আমি বুঝতে পেরেছি যে z-indexনীচের কোনও মান 1031পটভূমির পিছনে জিনিস রাখবে।

সুতরাং বুটস্ট্র্যাপ এর মোডাল ঘটনা হ্যান্ডলগুলি ব্যবহার করে আমি সেট z-indexকরতে 1030। যদি #myModal2দেখানো হয় এবং লুকানো থাকে তবে z-indexপিছনে সেট করুন ।1040#myModal2

ডেমো

Answer 10

প্রতিবার আপনি sys.showModal ফাংশন ইনক্রিমেন্ট জেড-ইনডেক্স চালান এবং এটি আপনার নতুন মডেলে সেট করুন।

function system() {

    this.modalIndex = 2000;

    this.showModal = function (selector) {
        this.modalIndex++;

        $(selector).modal({
            backdrop: 'static',
            keyboard: true
        });
        $(selector).modal('show');
        $(selector).css('z-index', this.modalIndex );       
    }

}

var sys = new system();

sys.showModal('#myModal1');
sys.showModal('#myModal2');

Answer 11

আমার পক্ষে এর সমাধানটি ছিল আমার মডেল ডিভগুলিতে "বিবর্ণ" শ্রেণিটি ব্যবহার না করা।

Answer 12

কোনও স্ক্রিপ্ট সমাধান নেই, কেবলমাত্র আপনার সিএসএস ব্যবহার করে মডেলের দুটি স্তর রয়েছে, ২ য় মডেলকে উচ্চতর জেড সূচীতে সেট করুন

.second-modal { z-index: 1070 }

div.modal-backdrop + div.modal-backdrop {
   z-index: 1060; 
}

Answer 13

আপনি যদি অন্য কোনও ওপেন মডেলের শীর্ষে নির্দিষ্ট মডেলটি উপস্থিত হতে চান তবে অন্য মডালের পরে শীর্ষস্থানীয় মডেলের HTML যুক্ত করার চেষ্টা করুন div।

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

<div id="modal-under" class="modal fade" ... />

<!--
This modal-upper should appear on top of #modal-under when both are open.
Place its HTML after #modal-under. -->
<div id="modal-upper" class="modal fade" ... />

Answer 14

বুটস্ট্র্যাপ 4 এর জন্য আমার সমাধান, মোডাল এবং গতিশীল মডেলের সীমাহীন গভীরতার সাথে কাজ করে।

$('.modal').on('show.bs.modal', function () {
    var $modal = $(this);
    var baseZIndex = 1050;
    var modalZIndex = baseZIndex + ($('.modal.show').length * 20);
    var backdropZIndex = modalZIndex - 10;
    $modal.css('z-index', modalZIndex).css('overflow', 'auto');
    $('.modal-backdrop.show:last').css('z-index', backdropZIndex);
});
$('.modal').on('shown.bs.modal', function () {
    var baseBackdropZIndex = 1040;
    $('.modal-backdrop.show').each(function (i) {
        $(this).css('z-index', baseBackdropZIndex + (i * 20));
    });
});
$('.modal').on('hide.bs.modal', function () {
    var $modal = $(this);
    $modal.css('z-index', '');
});

Comments

আমার জন্য নিখুঁতভাবে কাজ করেছেন

— ক্যাপ্টেন কাঠবিড়াল

Answer 15

প্রতিটি মডেলকে আলাদা আইডি দেওয়া উচিত এবং প্রতিটি লিঙ্ককে আলাদা মডেল আইডিতে লক্ষ্য করা উচিত। সুতরাং এটির মতো কিছু হওয়া উচিত:

<a href="#myModal" data-toggle="modal">
...
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>
...
<a href="#myModal2" data-toggle="modal">
...
<div id="myModal2" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>
...

Answer 16

সম্পাদনা: বুটস্ট্র্যাপ ৩.৩.৪ এই সমস্যাটি (এবং অন্যান্য মডেল সমস্যাগুলি) সমাধান করেছে যাতে আপনি যদি আপনার বুটস্ট্র্যাপ সিএসএস এবং জেএস আপডেট করতে পারেন তবে এটিই সেরা সমাধান হতে পারে। আপনি নীচের সমাধানটি আপডেট করতে না পারলে এখনও কাজ করবে এবং মূলত বুটস্ট্র্যাপ ৩.৩.৪ (প্যাডিং পুনরায় গণনা করুন এবং প্রয়োগ করুন) হিসাবে একই কাজ করবেন।

বাস জোবসেন যেমন উল্লেখ করেছেন, বুটস্ট্র্যাপের নতুন সংস্করণগুলিতে জেড-ইনডেক্স সমাধান হয়েছে। মডেল-ওপেন ক্লাস এবং প্যাডিং-রাইটগুলি এখনও আমার জন্য সমস্যা ছিল তবে ইয়ারমো ল্যামারস সলিউশন দ্বারা অনুপ্রাণিত এই স্ক্রিপ্টগুলি এটিকে সমাধান করে। এটি আপনার জেএস ফাইলে রেখে দিন এবং উপভোগ করুন।

$(document).on('hide.bs.modal', '.modal', function (event) {
    var padding_right = 0;
    $.each($('.modal'), function(){
        if($(this).hasClass('in') && $(this).modal().data('bs.modal').scrollbarWidth > padding_right) {
            padding_right = $(this).modal().data('bs.modal').scrollbarWidth
        }
    });
    $('body').data('padding_right', padding_right + 'px');
});

$(document).on('hidden.bs.modal', '.modal', function (event) {
    $('body').data('open_modals', $('body').data('open_modals') - 1);
    if($('body').data('open_modals') > 0) {
        $('body').addClass('modal-open');
        $('body').css('padding-right', $('body').data('padding_right'));
    }
});

$(document).on('shown.bs.modal', '.modal', function (event) {
    if (typeof($('body').data('open_modals')) == 'undefined') {
        $('body').data('open_modals', 0);
    }
    $('body').data('open_modals', $('body').data('open_modals') + 1);
    $('body').css('padding-right', (parseInt($('body').css('padding-right')) / $('body').data('open_modals') + 'px'));
});

Answer 17

এটা দেখ! এই সমাধানটি আমার জন্য কয়েকটি সহজ সিএসএস লাইন সমস্যার সমাধান করেছে:

.modal:nth-of-type(even) {
z-index: 1042 !important;
}
.modal-backdrop.in:nth-of-type(even) {
    z-index: 1041 !important;
}

আমি যেখানে এটি পেয়েছি তার এখানে একটি লিঙ্ক এখানে রয়েছে: বুটপ্লি কেবল এটি নিশ্চিত করুন যে শীর্ষস্থানীয় .modualটি HTML কোডের মধ্যে দ্বিতীয়, তাই সিএসএস এটিকে "এমনকি" হিসাবে খুঁজে পেতে পারে।

Answer 18

ওপেন / ক্লোজ মাল্টি মডেলের জন্য কাজ করুন

jQuery(function()
{
    jQuery(document).on('show.bs.modal', '.modal', function()
    {
        var maxZ = parseInt(jQuery('.modal-backdrop').css('z-index')) || 1040;

        jQuery('.modal:visible').each(function()
        {
            maxZ = Math.max(parseInt(jQuery(this).css('z-index')), maxZ);
        });

        jQuery('.modal-backdrop').css('z-index', maxZ);
        jQuery(this).css("z-index", maxZ + 1);
        jQuery('.modal-dialog', this).css("z-index", maxZ + 2);
    });

    jQuery(document).on('hidden.bs.modal', '.modal', function () 
    {
        if (jQuery('.modal:visible').length)
        {
            jQuery(document.body).addClass('modal-open');

           var maxZ = 1040;

           jQuery('.modal:visible').each(function()
           {
               maxZ = Math.max(parseInt(jQuery(this).css('z-index')), maxZ);
           });

           jQuery('.modal-backdrop').css('z-index', maxZ-1);
       }
    });
});

ডেমো

https://www.bootply.com/cObcYInvpq#

Answer 19

nth-of-typeনির্বাচিতরা কাজ করছে বলে মনে করে এখানে কয়েকটি সিএসএস রয়েছে :

.modal:nth-of-type(even) {
    z-index: 1042 !important;
}
.modal-backdrop.in:nth-of-type(even) {
    z-index: 1041 !important;
}

বুটপ্লি: http://bootply.com/86973

Comments

ঠিক আছে, দুর্দান্ত, তবে আমি একটি তৃতীয় মডেল রেখেছি এবং এটি কার্যকর হয় না। আমার কিছু স্ক্রিপ্ট রয়েছে যা এটি উত্পন্ন করে (যেমন সতর্কতা, অনুসন্ধান বাক্স ইত্যাদি) এবং আমার একবারে 3 টি খোলা মডেল থাকতে পারে (যতক্ষণ না আমি জানি)। আমি সিএসএস দিয়ে ভাল নই, দুঃখিত যদি আমি কিছু শিথিল করি। কোডটি রয়েছে: বুটপ্লাই.com

— উইলিয়ান বোনহো দাপ্রাই

Answer 20

আমারও অনুরূপ দৃশ্য ছিল এবং আমি কিছুটা গবেষণা ও উন্নয়নের পরে সমাধান পেয়েছি a যদিও আমি জেএসে দুর্দান্ত নই তবুও আমি একটি ছোট প্রশ্ন লিখতে পেরেছি।

http://jsfiddle.net/Sherbrow/ThLYb/

<div class="ingredient-item" data-toggle="modal" data-target="#myModal">test1 <p>trerefefef</p></div>
<div class="ingredient-item" data-toggle="modal" data-target="#myModal">tst2 <p>Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum</p></div>
<div class="ingredient-item" data-toggle="modal" data-target="#myModal">test3 <p>afsasfafafsa</p></div>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>





$('.ingredient-item').on('click', function(e){

   e.preventDefault();

    var content = $(this).find('p').text();

    $('.modal-body').html(content);

});

Answer 21

Modal.js এ গ্লোবাল ভেরিয়েবল যুক্ত করুন

var modalBGIndex = 1040; // modal backdrop background
var modalConIndex = 1042; // modal container data 

// অ্যাড ভেরিয়েবলের ভিতরে ফাংশন প্রদর্শন করুন - মোডাল.প্রোটোটাইপ.ব্যাকড্রপ

var e    = $.Event('show.bs.modal', { relatedTarget: _relatedTarget })

modalConIndex = modalConIndex + 2; // add this line inside "Modal.prototype.show"

that.$element
    .show()
    .scrollTop(0)
that.$element.css('z-index',modalConIndex) // add this line after show modal 

if (this.isShown && this.options.backdrop) {
      var doAnimate = $.support.transition && animate

      modalBGIndex = modalBGIndex + 2; // add this line increase modal background index 2+

this.$backdrop.addClass('in')
this.$backdrop.css('z-index',modalBGIndex) // add this line after backdrop addclass

Answer 22

অন্য সমাধানগুলি বাক্সের বাইরে আমার পক্ষে কার্যকর হয়নি। আমি মনে করি সম্ভবত আমি বুটস্ট্র্যাপের একটি সাম্প্রতিক সংস্করণ (৩.৩.২) ব্যবহার করছি .... মোডাল সংলাপের উপরে ওভারলেটি প্রদর্শিত হচ্ছে ।

আমি কোডটি কিছুটা রিফ্যাক্ট করেছিলাম এবং সেই অংশটি মন্তব্য করেছিলাম যা মডেল-ব্যাকড্রপ সামঞ্জস্য করে। এটি সমস্যার সমাধান করেছে।

    var $body = $('body');
    var OPEN_MODALS_COUNT = 'fv_open_modals';
    var Z_ADJUSTED = 'fv-modal-stack';
    var defaultBootstrapModalZindex = 1040;

    // keep track of the number of open modals                   
    if ($body.data(OPEN_MODALS_COUNT) === undefined) {
        $body.data(OPEN_MODALS_COUNT, 0);
    }

    $body.on('show.bs.modal', '.modal', function (event)
    {
        if (!$(this).hasClass(Z_ADJUSTED))  // only if z-index not already set
        {
            // Increment count & mark as being adjusted
            $body.data(OPEN_MODALS_COUNT, $body.data(OPEN_MODALS_COUNT) + 1);
            $(this).addClass(Z_ADJUSTED);

            // Set Z-Index
            $(this).css('z-index', defaultBootstrapModalZindex + (1 * $body.data(OPEN_MODALS_COUNT)));

            //// BackDrop z-index   (Doesn't seem to be necessary with Bootstrap 3.3.2 ...)
            //$('.modal-backdrop').not( '.' + Z_ADJUSTED )
            //        .css('z-index', 1039 + (10 * $body.data(OPEN_MODALS_COUNT)))
            //        .addClass(Z_ADJUSTED);
        }
    });
    $body.on('hidden.bs.modal', '.modal', function (event)
    {
        // Decrement count & remove adjusted class
        $body.data(OPEN_MODALS_COUNT, $body.data(OPEN_MODALS_COUNT) - 1);
        $(this).removeClass(Z_ADJUSTED);
        // Fix issue with scrollbar being shown when any modal is hidden
        if($body.data(OPEN_MODALS_COUNT) > 0)
            $body.addClass('modal-open');
    });

পার্শ্ব নোট হিসাবে, আপনি যদি এঙ্গুলারজে ব্যবহার করতে চান তবে আপনার মডিউলের .run () পদ্ধতির ভিতরে কোডটি রেখে দিন।

Answer 23

দুর্ভাগ্যক্রমে আমার মন্তব্য করার খ্যাতি নেই, তবে এটি লক্ষ্য করা উচিত যে 1040 জেড-ইনডেক্সের হার্ডকোডড বেসলাইন সহ গৃহীত সমাধানটি zIndex গণনার চেয়ে উচ্চতর বলে মনে হয় যা পৃষ্ঠায় সর্বাধিক zIndex রেন্ডার হওয়ার চেষ্টা করে।

এটি প্রদর্শিত হয় যে নির্দিষ্ট এক্সটেনশন / প্লাগইনগুলি শীর্ষ স্তরের DOM সামগ্রীর উপর নির্ভর করে যা। ম্যাক্স গণনাকে এমন অশ্লীলভাবে বড় সংখ্যক করে তোলে, এটি আর zIndex বৃদ্ধি করতে পারে না। এর ফলে এমন কোনও মডেলের ফলাফল ঘটে যেখানে মোডেলটির উপরে ওভারলেটি ভুলভাবে উপস্থিত হয় (আপনি যদি ফায়ারব্যাগ / গুগল ইন্সপেক্টর সরঞ্জামগুলি ব্যবহার করেন তবে আপনি 2 ^ n - 1 এর ক্রমে একটি zIndex দেখতে পাবেন)

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

আশা করি এটি কাউকে সাহায্য করবে।

Answer 24

আমার ক্ষেত্রে সমস্যাটি ব্রাউজারের এক্সটেনশনের ফলে হয়েছিল যার মধ্যে বুটস্ট্র্যাপ.জেএস ফাইলগুলি অন্তর্ভুক্ত রয়েছে যেখানে শো ইভেন্টটি দু'বার পরিচালিত হয় এবং দুটি modal-backdropডিভ যোগ করা হয়, তবে মোডালটি বন্ধ করার সময় কেবল তার মধ্যে একটি সরানো হয়।

খুঁজে পাওয়া গেছে যে ক্রোমে শরীরের উপাদানগুলিতে একটি সাব-ট্রি মডিফিকেশন ব্রেকআপপয়েন্ট যুক্ত করে এবং ডিভগুলি যুক্ত করে ট্র্যাক করে modal-backdrop।

Answer 25

$(window).scroll(function(){
    if($('.modal.in').length && !$('body').hasClass('modal-open'))
    {
              $('body').addClass('modal-open');
    }

});

Comments

কেবলমাত্র কোড-এর উত্তরগুলি কেন সমস্যাটি ঘটেছিল তা নির্দেশ করার ক্ষেত্রে প্রায়শই অসহায় । কেন এটি সমস্যার সমাধান করে তা আপনার একটি ব্যাখ্যা অন্তর্ভুক্ত করা উচিত। দয়া করে পড়ুন আমি কীভাবে একটি ভাল উত্তর লিখতে পারি?

— ফ্লফিকিটেন

Answer 26

আপডেট: ২২.০১.২০১1, ১৩.৪১ আমি জায়ের দ্বারা সমাধানটি অপ্টিমাইজ করেছিলাম, যা একই বা বিভিন্ন কথোপকথন বন্ধ করে এবং খোলার পক্ষেও সমর্থন করে যখন উদাহরণস্বরূপ এক বিশদ ডেটা থেকে অন্য সামনের দিকে বা পিছনের দিকে পদক্ষেপ নেওয়া।

(function ($, window) {
'use strict';

var MultiModal = function (element) {
    this.$element = $(element);
    this.modalIndex = 0;
};

MultiModal.BASE_ZINDEX = 1040;

/* Max index number. When reached just collate the zIndexes */
MultiModal.MAX_INDEX = 5;

MultiModal.prototype.show = function (target) {
    var that = this;
    var $target = $(target);

    // Bootstrap triggers the show event at the beginning of the show function and before
    // the modal backdrop element has been created. The timeout here allows the modal
    // show function to complete, after which the modal backdrop will have been created
    // and appended to the DOM.

    // we only want one backdrop; hide any extras
    setTimeout(function () {
        /* Count the number of triggered modal dialogs */
        that.modalIndex++;

        if (that.modalIndex >= MultiModal.MAX_INDEX) {
            /* Collate the zIndexes of every open modal dialog according to its order */
            that.collateZIndex();
        }

        /* Modify the zIndex */
        $target.css('z-index', MultiModal.BASE_ZINDEX + (that.modalIndex * 20) + 10);

        /* we only want one backdrop; hide any extras */
        if (that.modalIndex > 1) 
            $('.modal-backdrop').not(':first').addClass('hidden');

        that.adjustBackdrop();
    });

};

MultiModal.prototype.hidden = function (target) {
    this.modalIndex--;
    this.adjustBackdrop();

    if ($('.modal.in').length === 1) {

        /* Reset the index to 1 when only one modal dialog is open */
        this.modalIndex = 1;
        $('.modal.in').css('z-index', MultiModal.BASE_ZINDEX + 10);
        var $modalBackdrop = $('.modal-backdrop:first');
        $modalBackdrop.removeClass('hidden');
        $modalBackdrop.css('z-index', MultiModal.BASE_ZINDEX);

    }
};

MultiModal.prototype.adjustBackdrop = function () {        
    $('.modal-backdrop:first').css('z-index', MultiModal.BASE_ZINDEX + (this.modalIndex * 20));
};

MultiModal.prototype.collateZIndex = function () {

    var index = 1;
    var $modals = $('.modal.in').toArray();


    $modals.sort(function(x, y) 
    {
        return (Number(x.style.zIndex) - Number(y.style.zIndex));
    });     

    for (i = 0; i < $modals.length; i++)
    {
        $($modals[i]).css('z-index', MultiModal.BASE_ZINDEX + (index * 20) + 10);
        index++;
    };

    this.modalIndex = index;
    this.adjustBackdrop();

};

function Plugin(method, target) {
    return this.each(function () {
        var $this = $(this);
        var data = $this.data('multi-modal-plugin');

        if (!data)
            $this.data('multi-modal-plugin', (data = new MultiModal(this)));

        if (method)
            data[method](target);
    });
}

$.fn.multiModal = Plugin;
$.fn.multiModal.Constructor = MultiModal;

$(document).on('show.bs.modal', function (e) {
    $(document).multiModal('show', e.target);
});

$(document).on('hidden.bs.modal', function (e) {
    $(document).multiModal('hidden', e.target);
});}(jQuery, window));

Answer 27

আমার জন্য, এই সহজ স্ক্যাসের নিয়মগুলি নিখুঁতভাবে কাজ করেছে:

.modal.show{
  z-index: 1041;
  ~ .modal.show{
    z-index: 1043;
  }
}
.modal-backdrop.show {
  z-index: 1040;
  + .modal-backdrop.show{
    z-index: 1042;
  }
}

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

Answer 28

মডেলের গণনা পরীক্ষা করুন এবং জেড-ইনডেক্স হিসাবে ব্যাকড্রপটিতে মান যুক্ত করুন

    var zIndex = 1500 + ($('.modal').length*2) + 1;
    this.popsr.css({'z-index': zIndex});

    this.popsr.on('shown.bs.modal', function () {
        $(this).next('.modal-backdrop').css('z-index', zIndex - 1);
    });

    this.popsr.modal('show');