পটভূমির অধীনে বুটস্ট্র্যাপ মডেল প্রদর্শিত হচ্ছে

575

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

এটি দেখতে কেমন দেখাচ্ছে তা এখানে:

মডেল ব্যাকড্রপ পিছনে লুকানো

এই সমস্যাটি পুনরুত্পাদন করার এক উপায়ের জন্য এই ঝাঁকুনিটি দেখুন । এই কোডটির মূল কাঠামোটি এরকম:

<body>
    <p>Lorem ipsum dolor sit amet.</p>    

    <div class="my-module">
        This container contains the modal code.
        <div class="modal fade">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-body">Modal</div>
                </div>
            </div>
        </div>
    </div>
</body>
body {
    padding-top: 50px;
}

.my-module {
    position: fixed;
    top: 0;
    left: 0;
}

কোনও ধারণা কেন এটি বা আমি এটি ঠিক করতে কী করতে পারি?

javascript  css  twitter-bootstrap  modal-dialog 
— natlines
সূত্র
যদি অন্য কেউ খোলা ট্যাগ ইত্যাদির জন্য কিছু সময়ের জন্য অনুসন্ধান করে তবে কেন এটি হচ্ছে তা নির্ধারণের চেষ্টা করে, আমার জন্য এটি আমার মডেলগুলি ভেঙে ফিডলি ক্রোম এক্সটেনশন was এক্সটেনশনটি অক্ষম করা আচরণের স্বাভাবিক অবস্থায় ফিরে আসে।
— তিনটি
overflow-x: hiddenমডেলটির ধারকটিতে প্রয়োগ হওয়ার কারণে সমস্যাটি আইওএস এ থাকতে পারে ।
— ইডমিয়ান
1
3 সংস্করণ জুড়ে 3 টি উদাহরণ তৈরি করা হয়েছে। 3.3.1 ভাল কাজ করে এবং অন্যরা তা করে না। সংস্করণ ৩.৩.১ জেএসফিল সংস্করণ ৩.৩.৫ জেএসফিডাল সংস্করণ ৩.৩..6 জেএসফডডল
— দিমিত্রি
1
বুটস্ট্র্যাপ টিমের সাহায্যে একটি বাগ রিপোর্ট তৈরি হয়েছে বলে মনে হয় এটি সত্যই কোনও বাগ নয় thought.৩.১-এ এটি দুর্দান্ত কাজ করেছে বলে মনে হয়। আপনি পোস্ট করা লিঙ্কটিতে আপনি এটি সম্পর্কে আরও পড়তে পারেন।
— দিমিত্রি
কেহ প্রাসঙ্গিকতা একটি ব্লগ পোস্টে এই সমস্যা সম্মুখীন weblog.west-wind.com/posts/2016/Sep/14/...

উত্তর:

627

যদি মডেল ধারকটির একটি স্থির বা আপেক্ষিক অবস্থান থাকে বা নির্দিষ্ট বা আপেক্ষিক অবস্থানের সাথে কোনও উপাদানগুলির মধ্যে থাকে তবে এই আচরণটি ঘটবে।

নিশ্চিত করুন যে মডেল ধারক এবং এর সমস্ত প্যারেন্ট উপাদানগুলি সমস্যাটি ঠিক করার জন্য ডিফল্ট উপায়ে অবস্থিত।

এটি করার কয়েকটি উপায় এখানে রইল:

  1. সবচেয়ে সহজ উপায় হল কেবলমাত্র মডেল ডিভ স্থানান্তর করা যাতে এটি বিশেষ অবস্থানের সাথে কোনও উপাদানগুলির বাইরে থাকে। একটি ভাল জায়গা সম্ভবত বডি ট্যাগের ঠিক আগেই হতে পারে </body>।
  2. বিকল্প হিসাবে, আপনি position:সমস্যা দূরে না যাওয়া পর্যন্ত আপনি মডেলগুলি এবং এর পূর্বপুরুষদের থেকে CSS বৈশিষ্ট্যগুলি সরিয়ে ফেলতে পারেন । এটি পৃষ্ঠা কীভাবে দেখায় এবং কার্য করে তা পরিবর্তন করতে পারে।
— Muhd
সূত্র
23
ভালো বল ধরা. এফওয়াইআই, কেবল "স্থির" নয়, পিতামাতার পোস্ট "আপেক্ষিক" এছাড়াও এই সমস্যার কারণ ঘটায়
— জিয়াং নগুইন
3
@ মুহ্দ আপনি কীভাবে নিশ্চিত হন যে এটি এবং এর সমস্ত মূল উপাদানগুলি ডিফল্ট উপায়ে অবস্থিত?
— ইন্দাগো
4
বিকল্পটি একটিকে পছন্দ করুন: "কেবলমাত্র মডেল ডিভটি সরান যাতে এটি বিশেষ অবস্থানের সাথে কোনও উপাদানগুলির বাইরে থাকে"। Thx
— mpgn
9
আমি এই উত্তর বুঝতে পারি না। বুটস্ট্র্যাপ উদাহরণগুলিতে "মডেল", "মডেল-বিবর্ণ" ইত্যাদির লাইন বরাবর অনেকগুলি ক্লাসের সাথে একটি মডেল ডিভ দেখায়। সুতরাং কিভাবে মডেল ধারক কিছু পরিবর্তন করতে চলেছে, যখন। মডেল সেট অবস্থান: স্থির?
— কার্লোস
4
আমি এখনও এই সমস্যা পেয়েছি। আমি এটি ঠিক আগে যুক্ত করেছি </body>এবং এর bodyকোনও positionস্টাইলের বৈশিষ্ট্য নেই do অন্য কোন ধারণা?
— তুয়ান আন ট্রান
383

সমস্যাটি পিতামাতার পাত্রগুলির অবস্থানের সাথে সম্পর্কিত। আপনি আপনার মডেলগুলি প্রদর্শিত হওয়ার আগে এই ধারকগুলি থেকে সহজেই "সরানো" করতে পারেন। আপনি যদি showজেএস ব্যবহার করে আপনার মডেলটি ইঙ্গিত করে থাকেন তবে এটি কীভাবে করবেন তা এখানে :

$('#myModal').appendTo("body").modal('show');

বা আপনি যদি বোতামগুলি ব্যবহার করে মডেল চালু করেন তবে ড্রপ করুন .modal('show');এবং ঠিক করুন:

$('#myModal').appendTo("body")

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

— অ্যাডাম অ্যালব্রাইট
সূত্র
12
আপনার কোনও পৃষ্ঠায় থাকতে পারে সমস্ত মডেলের জন্য @leandrotk সমাধানের কাজ করতে সেই জেনেরিক ইভেন্ট হ্যান্ডলারটি ব্যবহার করুন $('.modal-dialog').parent().on('show.bs.modal', function(e){ $(e.relatedTarget.attributes['data-target'].value).appendTo('body'); })
— প্যাট্রিক এম
2
@PatrickM। অ্যামেজিং! যে পুরানো প্রকল্পটি আমি গ্রহণ করছি তাতে এটি মনোযোগের মতো কাজ করেছিল এবং তাদের পুরো জায়গা জুড়ে মডেল ছিল!
— denislexic
5
আপনি যখন CSS অবস্থান নির্ধারণ করতে পারবেন না তখন এটি দুর্দান্ত কাজ করে। ধন্যবাদ :)
— অ্যালেক্সাসালবোনি
আমি যখন এটি করি তখন আমি সমস্ত সিএসএস বিন্যাসটি looseিলা করার কোনও কারণ আছে? এবং একটি সহজ ফিক্স? :-)
— ইউজিন ভ্যান ডের মেরভে
1
লেনড্রটকের উত্তর থেকে, কেবল # মাইমোডাল পরিবর্তন করুন al মডেলটিকে এর মতো দেখতে: $ ('। মডেল') app অ্যাপেন্ডটো ("বডি")। এটি সমস্ত মডেলের সাথে কাজ করবে যেহেতু তাদের ডিফল্ট ক্লাস মডেল রয়েছে।
— এনগাটিয়া ফ্রাঙ্কলাইন
170

আমি উপরে সরবরাহিত সমস্ত অপশন চেষ্টা করেছি কিন্তু সেগুলি ব্যবহার করে এটি কার্যকর হয়নি।

কী কাজ করেছে:। মডেল-ব্যাকড্রপ -1-এ জেড-ইনডেক্স সেট করে।

.modal-backdrop {
  z-index: -1;
}
— জান ভ্যান ডার বার্গ্ট
সূত্র
10
এটি নিখুঁতভাবে কাজ করেছে এবং এটি এখন পর্যন্ত সবচেয়ে সহজ সমাধান। আমি ব্যবহার করেছিz-index: 0;
— andrewcockerham
কেবল এই বিকল্পগুলি কাজ করে তাও নিশ্চিত করতে পারে! ধন্যবাদ!
— ফেরি ক্রেনেনবার্গে
ধন্যবাদ! এটি কি বিএস 3-তে একটি বাগ?
— mauriblint
1
আপনি যদি এমন কোনও থিম ব্যবহার করেন যাতে বিভিন্ন ধরণের জেড-সূচক রয়েছে তবে এটি কাজ করে না। উদাহরণস্বরূপ, ব্যাকড্রপটি সেট করার -1ফলে এটি পৃষ্ঠায় অন্যান্য উপাদানগুলির পিছনে প্রদর্শিত হতে পারে । তবে সেটাকে 3মডেল পপআপ বাদে সবকিছুর উপরে তৈরি করে।
— জাস্টিন স্কিলস
1
উপরের উচ্চতর রেট করা উত্তরের পরামর্শগুলি ক্লান্ত করার পরেও আমি এটি দ্রুততম পদ্ধতি হিসাবে পেয়েছি। আমার ক্ষেত্রে মডেল-ডায়লগ ক্লাসের সাথে ডিভি সেট করে 1060 এর জেড-ইনডেক্সে এটি ওভারলেয়ের সামনে পপ করে। আপনি যদি নাবারটি ব্যবহার করেন তবে আপনি মোড়লটিকে উপরে ওভারলে উপরে নিয়ে যেতে চাইবেন এবং অন্য কোনও উপায়ে নয়, অন্যথায় আপনার নাবারটি ওভারলেটির শীর্ষে পপ হতে পারে ... বিশৃঙ্খলা ইনসুয়েস ...
— মাইক ডিভেন্নি
152

এছাড়াও, এটি নিশ্চিত করুন যে বুটস্প্র্যাপ সিএসএস এবং জেএস এর সংস্করণ একই রকম। বিভিন্ন সংস্করণ এছাড়াও পটভূমির অধীনে মডেল প্রদর্শিত হতে পারে:

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

খারাপ:

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

ভাল:

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
— সিদ
সূত্র
এটি আমার জন্যও ছিল। ধন্যবাদ!
— পেড্রোটানাকা
ঠিক একই সমস্যা ছিল, একই সংস্করণ স্টাইলশীট সমাধানটি সবাইকে সাহায্য করেছে বলে মনে হচ্ছে! ধন্যবাদ
— এইচজিবি
আপনাকে ধন্যবাদ, এটি আমার
— আসল
ম্যালাকর কোনও সমস্যা নেই, আমি এই বাগটিটি বের করার সময় আমি অনেক সময় ব্যয় করেছি। আমরা দেখতে পাচ্ছি যে '14 এ ছিল, এখন '16, বাগ এখনও বিদ্যমান। আসলে এটি কোনও বাগ নয়, তবে বুটস্ট্র্যাপে লেখকদের এগুলি তাদের ডকুমেন্টেশন বা কোনও কিছুর মধ্যে যুক্ত করা উচিত ..
— সিড
এখানে একই চুক্তি, আমরা আমাদের এসএএসএস তৈরিতে পরিবর্তিত হয়েছি এবং জেএস ফাইলটি নিজেই ভুলে গিয়েছি .. এটির শীর্ষ উত্তর হওয়া দরকার ... আমাদের মোডালটি বরাবরই দেহের নিকটবর্তী ট্যাগের ঠিক আগে অন্তর্ভুক্ত থাকে ...
— Angry 84
116

আমিও এই সমস্যার মুখোমুখি হয়েছি এবং আমার কোনও সমাধানের সমাধান আমার পক্ষে কাজ করা হয়নি যতক্ষণ না আমি বুঝতে পারি যে আসলে আমার ব্যাকড্রপ দরকার নেই। আপনি সহজেই ফলোয়িং কোড সহ ব্যাকড্রপটি সরাতে পারেন।

<div class="modal fade" id="createModal" data-backdrop="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4>Create Project</h4>
            </div>
            <div class="modal-body">Not yet made</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

দ্রষ্টব্য : data-backdropবৈশিষ্ট্যটি সেট করতে হবে false( অন্যান্য বিকল্প : staticবা true)।

— PieterVK
সূত্র
2
এখন পর্যন্ত সবচেয়ে সহজ সমাধান, এবং একটি মোহন মত কাজ করে!
— learning_to_swim
উজ্জ্বল! আমার অন্যান্য বুটস্ট্র্যাপেরও দরকার ছিল - আমার অন্যান্য বুটস্ট্র্যাপ কার্যকারিতা কেন ঠিকঠাক কাজ করে তা নিশ্চিত নয় তবে মডেল কাজ করা আমার দরকার ছিল।
— স্টিভ ক্লিন
পারফেক্ট !!! একদিনের জন্য লড়াই করে .. এবং তুমি আমার অন্য দিন বাঁচিয়েছ। আবার ধন্যবাদ .. +1 এবং চিয়ার্স
— ভাস্কারা
1
সাবধানে সমস্ত সমাধান পড়ার পরে, আমি এটি বুটস্ট্র্যাপ এবং জিকুয়েরির আজকের সংস্করণ হিসাবে সর্বাধিক বোধগম্য বলে মনে করেছি। ধন্যবাদ.
— এনক্রিপশন
3
ধন্যবাদ! এই প্রশ্নের মধ্যে 140k এরও বেশি ভিউ রয়েছে এবং বুটস্ট্র্যাপ কেন এটি ঠিক করতে পারে না তা আমি বুঝতে পারি না। ওহ ভাল, চিয়ার্স
— চাদ
58

আমি এটি খোলার পরে মডেল উইন্ডোতে একটি উচ্চ জেড-সূচক মান দিয়ে কাজ করতে পেরেছি। উদাহরণ:

$("#myModal").modal("show");
$("#myModal").css("z-index", "1500");
— অ্যান্ড্রু ডাইস্টার
সূত্র
এটি কি কাজ করছে (লোকটি এটি বলছে), আপনি ভোট কেন বাতিল করবেন? আমি যেমন খুঁজছি মনে হয় এটি হবে।
— রোলিস
হ্যাঁ, কেউ দয়া করে ব্যাখ্যা করতে পারেন কেন এটি খারাপ উত্তর? এটা কি ঠিক যে এটি হ্যাকির মতো?
— ব্র্যান্ডনেস
6
আমি ডাউন ভোট বুঝতে পারি না। হ্যাঁ, এটি হ্যাকি তবে অন্যান্য সমাধানগুলি আমার পক্ষে কার্যকর হয়নি তাই ভেবেছিলাম যে আমি "হ্যাকি" সমাধানগুলি ব্যবহার করার জন্য কিছু মনে করি না তাদের পক্ষে এই অবদান রাখি যারা কেবলমাত্র খারাপ জিনিসটি কাজ করতে পারে।
— অ্যান্ড্রু ডাইস্টার
এটি আমার বিশেষ সমস্যাটির জন্য একটি পূর্ণস্ক্রিন উপাদানের উপর একটি মডেল রেখে প্রাসঙ্গিক অন্তর্দৃষ্টি ছিল। +1
— জ্যাক স্টোন
3
এটি একটি খারাপ উত্তর কারণ এটি একটি হ্যাক এবং এটি বোঝাতে কোনও প্রচেষ্টা করে না। অন্যান্য উত্তরগুলি বলে, "যদি আর কিছু না কাজ করে তবে আপনি পারতেন ..."। বাস্তবতাটি হল মোডালটি পুরো ওয়েব জুড়ে ব্যবহৃত হয় এবং সঠিকভাবে প্রয়োগ করা হলে কাজ করা উচিত। হ্যাকি উত্তরগুলি কীভাবে জিনিসগুলি সঠিক উপায়ে করা যায় তা সম্পর্কে কাজ করতে লোকদের সহায়তা করে না।
— Lukos
35

@ মুহদ দ্বারা প্রদত্ত সমাধান এটি করার সর্বোত্তম উপায়। তবে আপনি যদি এমন পরিস্থিতিতে আটকে থাকেন যেখানে পৃষ্ঠার কাঠামো পরিবর্তন করা কোনও বিকল্প নয়, তবে এই কৌশলটি ব্যবহার করুন:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="false" style="background-color: rgba(0, 0, 0, 0.5);">
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <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" 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>

এখানে কৌশল data-backdrop="false" style="background-color: rgba(0, 0, 0, 0.5);" ডিফল্ট ব্যাকড্রপ মুছে ফেলা এবং কিছু আলফা দিয়ে ডায়ালগের পটভূমি রঙ সেট করে একটি ডামি তৈরি করুন।

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

$('.modal').click(function(event){
    $(event.target).modal('hide');
});
— কৃষ্ণেন্দু
সূত্র
ব্যাকগ্রাউন্ডে ক্লিক করা ডায়ালগটি যেমন প্রত্যাশিত হিসাবে বন্ধ করে দেয় তা ব্যতীত এটি কাজ করে।
— গুস্টাইন
কৃষ্ণেন্দু তুমি আমার নায়ক। আমি ডুম এবং মনকে সামনে রেখে কাজ করতে এসেছি। আমার চূড়ান্ত উপস্থাপনার 3 দিন আগে এই সমস্যাটির মুখোমুখি হওয়ার হঠাৎ হ'ল স্নায়ু নষ্ট হয়ে গেল কমপক্ষে। ইউ আমার বন্ধু 100000 উর্ধ্বগামী হায় আফসোস কেবল আপনাকে একটি উপহার দিতে পারে :) একটি আশ্চর্যজনকভাবে ধন্য ধন্য দিনটি।
— ডটনেটবেগনার
যখন আমি এটি চেষ্টা করি, এটি পৃষ্ঠার পুরো পটভূমিটি কভার করে না - কেবলমাত্র ডিভ উপাদানটি মোডাল হিসাবে ঘোষণা করা হয়েছে
— উইল স্যাম
নিখুঁতভাবে কাজ করেছেন। ধন্যবাদ!
— gfernandes
নিখুঁতভাবে কাজ করেছেন। ধন্যবাদ!
— মায়াঙ্ক পান্ডেজে
16

এ সম্পর্কে দেরি হলেও এখানে একটি সাধারণ সমাধান রয়েছে -

    var checkeventcount = 1,prevTarget;
    $('.modal').on('show.bs.modal', function (e) {
        if(typeof prevTarget == 'undefined' || (checkeventcount==1 && e.target!=prevTarget))
        {  
          prevTarget = e.target;
          checkeventcount++;
          e.preventDefault();
          $(e.target).appendTo('body').modal('show');
        }
        else if(e.target==prevTarget && checkeventcount==2)
        {
          checkeventcount--;
        }
     });

এই লিঙ্কটি দেখুন - বুটস্ট্র্যাপ 3 - বিশদের জন্য একটি নির্দিষ্ট সাইডবার ব্যবহার করার সময় পটভূমির নীচে মডেল অদৃশ্য হয়ে যায় ।

— রোহান
সূত্র
এটি আমি তৈরি করা একটি ওয়ার্ডপ্রেস প্লাগইনের জন্য একটি নিখুঁত সমাধান ছিল যেখানে আমি অন্য লোকের থিমগুলিতে পিতামাতার উপাদানগুলি নিয়ন্ত্রণ করতে পারি না।
— মার্ক রুমেল 20
এখন পর্যন্ত সেরা সমাধান!
— digz6666
10

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

.modal-backdrop এটা এমন দেখতে

.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #000000;
}
— স্যামুয়েল বার্গারন
সূত্র
10

শুধু সিএসএসের দুটি লাইন যুক্ত করুন:

.modal-backdrop{z-index: 1050;}
.modal{z-index: 1060;}

। ন্যাশনাল-ব্যাকড্রপটিতে এটি নববারে সেট করার জন্য 1050 মান হওয়া উচিত।

— ওয়াহ্যু প্রিমাদি
সূত্র
দুর্দান্ত, তবে মডেলের ধারক থাকলে এটি position: fixedকাজ করবে না।
— সিপিএইচপিথন
10

এটি অ্যানিমেশন বা প্রত্যাশিত আচরণের কোনও ঝামেলা ছাড়াই সমস্ত মডেলকে কভার করবে would 

$(document).on('show.bs.modal', '.modal', function () {
  $(this).appendTo('body');
});
— ক্যাম তুলোস
সূত্র
1
বিশ্বব্যাপী সমাধান। তবে সমস্যাটি খুঁজে পাওয়া আরও ভাল।
— মিলাদ আবুয়ালি
আমি মনে করি না যে এটি একটি দুর্দান্ত সমাধান, প্রচুর মডেলগুলির সাথে পৃষ্ঠাগুলি সম্পর্কে কী? অগোছালো পেতে পারে।
— Glen
এটি কীভাবে অগোছালো হয়ে যাবে তা আপনি ব্যাখ্যা করতে পারেন? এটি যা করছে তা মোডালটিকে যেখানে ডম-এ বর্তমানে রয়েছে তা বডি ট্যাগের শেষের দিকে নিয়ে যাচ্ছে। এটি এমন কিছু তৈরি করছে না যা ইতিমধ্যে নেই, কেবল এটি সরানো এবং স্বয়ংক্রিয়ভাবে শীর্ষ জেড-ইনডেক্স দেওয়া।
— ক্যাম তুলোস
আমি মনে করি সেরা সমাধান। কোনও সিএসএস সম্পাদনা এবং
— মডেল
8

আমি কেবল সেট করেছি:

#myModal {
    z-index: 1500;
}

এবং এটি কাজ করে ....

মূল প্রশ্নের জন্য: 

.my-module {
    z-index: 1500;
}
— AmintaCode
সূত্র
আমার ইস্যুটি জেড-ইনডেক্সও ছিল।
— জেমস লক
8

সিএসএসে গ্রেডিয়েন্টের মতো ব্যাকগ্রাউন্ড বা এমনকি অ্যাকর্ডিয়ান শিরোনামের মতো জিনিস ব্যবহার করার সময় এই সমস্যাটি প্রায়শই অভিজ্ঞ হতে পারে।

দুর্ভাগ্যক্রমে, মূল বুটস্ট্র্যাপ সিএসএস সংশোধন বা ওভাররাইড করা অনাকাঙ্ক্ষিত, এবং অযাচিত পার্শ্ব প্রতিক্রিয়া হতে পারে। অন্তত অন্তর্নিহিত পদ্ধতির যোগ করা data-backdrop="false"কিন্তু আপনি লক্ষ্য করতে পারেন যে বিবর্ণ প্রভাব আর প্রত্যাশা অনুযায়ী কাজ করে না।

বুটস্ট্র্যাপের সাম্প্রতিক প্রকাশের পরে, সংস্করণ 3.3.5 কোনও অযাচিত পার্শ্ব প্রতিক্রিয়া ছাড়াই এই সমস্যাটিকে সমাধান করবে বলে মনে হচ্ছে।

ডাউনলোড: https://github.com/twbs/bootstrap/relayss/download/v3.3.5/bootstrap-3.3.5-dist.zip

সিএসএস ফাইল এবং জাভাস্ক্রিপ্ট ফাইলগুলি 3.3.5 থেকে অন্তর্ভুক্ত করার বিষয়ে নিশ্চিত হন।

— রিচার্ড ন্যালিজেনস্কি
সূত্র
6

হাই আমার একই সমস্যা ছিল তখন আমি বুঝতে পারি যে আপনি যখন বুটস্রেপ ৩.১ ব্যবহার করেন বুটস্র্যাপের পুরানো সংস্করণগুলির থেকে ভিন্ন (২.৩.২) মডেলের এইচটিএমএল কাঠামোটি পরিবর্তন করা হয়েছিল!

আপনাকে অবশ্যই মডেল-ডায়ালগ এবং মডেল-সামগ্রী সহ আপনার মডেল শিরোনামের বডি এবং পাদচরণ আবদ্ধ করতে হবে 

<div class="modal hide fade">

  <div class="modal-dialog">
    <div class="modal-content">

    **here goes the modal header body and footer**

    </div>
  </div>

 </div>
— talsibony
সূত্র
+1 নিশ্চিত করে নিন যে আপনি বুটস্ট্র্যাপ সিএসএস এবং বুটস্ট্র্যাপ.জেএস এর সামঞ্জস্যপূর্ণ সংস্করণ ব্যবহার করছেন এবং আপনার মার্কআপটি আপনি যে সংস্করণটি ব্যবহার করছেন তার সাথে মেলে।
— srayner
হ্যাঁ এটিই আমার উপসংহারটি ছিল এবং কারও কাছে যদি এই সমস্যা থাকে তবে আমি এখানে এটি লিখেছিলাম।
— তালসিবনি
যীশু খ্রীষ্ট, এই উত্তর গভীর সমাহিত করা হয়। বুটস্ট্র্যাপ ৪
— Rand
6

উপরের প্রস্তাবিত কোনও সমাধানই আমার পক্ষে কাজ করেনি তবে এই কৌশলটি সমস্যার সমাধান করেছে:

$('#myModal').on('shown.bs.modal', function() {
   //To relate the z-index make sure backdrop and modal are siblings
   $(this).before($('.modal-backdrop'));
   //Now set z-index of modal greater than backdrop
   $(this).css("z-index", parseInt($('.modal-backdrop').css('z-index')) + 1);
});
— জাভেদ ইকবাল
সূত্র
আমি এই উপায়ে পছন্দ করি কারণ আমি অন্যান্য পদ্ধতির সাথে সিএসএস বিন্যাস হারিয়েছি।
— ইউজিন ভ্যান ডের মেরভে
6

আমার এই সমস্যাটি ছিল এবং এটির সমাধানের সবচেয়ে সহজ উপায়টি ছিল মোডাল-ডায়ালগ ডিভের 1040 এরও বেশি অ্যাডইন্ড জেড-ইনডেক্স:

<div class="modal-dialog" style="z-index: 1100;">

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

— ক্রিস রোস্টে
সূত্র
6

আমি একটি হালকা এবং ভাল সমাধান আছে ..

এটি অতিরিক্ত কিছু সিএসএস শৈলীর মাধ্যমে সহজেই সমাধান করা যেতে পারে ..

  1. ক্লাসটি আড়াল করুন .modal-backdrop(বুটস্ট্র্যাপ.জেএস থেকে উত্পন্ন স্বয়ংক্রিয়)

    .modal-backdrop
{
display:none;
visibility:hidden; 
position:relative
}

  2. .modalএকটি স্বচ্ছ কালো ব্যাকড্রপ চিত্রের পটভূমি সেট করুন ।

    .modal
{
background:url("http://bin.smwcentral.net/u/11361/BlackTransparentBackground.png")
// translucent image from google images 
z-index:1100; 
}

এটি সর্বোত্তম কাজ করবে যদি আপনার এমন কোনও প্রয়োজনীয়তা থাকে যা কোনও উপাদানের অভ্যন্তরে থাকা থাকে এবং </body>ট্যাগের নিকটে না থাকে ..

— জেএম টি
সূত্র
আপনি আমার দিন বাঁচিয়েছেন ... এটি একটি দুর্দান্ত বিকল্প!
— notme
@ এক্সঙ্গা, কোনও উদ্বেগ নেই। দয়া করে এই সমাধানটি অন্য লোকের সাথে ভাগ করুন :)
— জেএম টি
আপনি এখানে সম্পাদনাগুলি দেখতে পারেন ... stackoverflow.com/posts/42887253/revisions
— notme
ধন্যবাদ জেএম, আপনার সমাধানটি কেবল আমার পক্ষে কাজ করেছিল।
— আহমেদ জে।
5

জেড-ইনডেক্স সেট করুন। আধুনিককে সর্বোচ্চ মান হিসাবে সেট করুন

উদাহরণস্বরূপ, .sidebarwrapper এর 1100 এর জেড-সূচক রয়েছে, সুতরাং। Modal এর জেড-সূচকটি 1101 এ সেট করুন

.modal {
    z-index: 1101;
}
— একজন মহুদুম কামিল
সূত্র
5

আমার ক্ষেত্রে এটি সমাধান করুন, এটি আমার স্টাইলশিটে যুক্ত করুন:

.modal-backdrop{
  z-index:0;
}
স্নিপেট প্রসারিত করুন

গুগল ডিবাগার দিয়ে, উপাদান ব্যাকড্রপ পরীক্ষা করতে এবং বৈশিষ্ট্যগুলি সংশোধন করতে পারে। সৌভাগ্য.

— Ckevyn ওভালে
সূত্র
3

আপনার নাবারটিতেও navbar-fixed-topপ্রয়োজন হয় z-index = 1041 এবং আপনি যদি bootstarp-combined.min.cssপরিবর্তনটিও ব্যবহার করেন .navbar-fixed-top, .navbar-fixed-bottom z-index to 1041

— মহসিন
সূত্র
3

আপনি। মডেল-ব্যাকড্রপ থেকে জেড-সূচিও সরাতে পারেন। সিএসএসের ফলাফলের ফলাফলটি দেখতে এমন হবে।

.modal-backdrop {
}
  .modal-backdrop.in {
    opacity: .35;
    filter: alpha(opacity=35); }
— ম্যাথিউ গ্যাল্লেগোস
সূত্র
3

আমি মডেল ব্যাকড্রপ সরিয়েছি।

.modal-backdrop {
    display:none;
}

এটি এর চেয়ে ভাল সমাধান নয়, তবে আমার পক্ষে কাজ করে।

— CodeBriefly
সূত্র
3

আমি যা পাই তা হ'ল:

বুটস্ট্র্যাপ ৩.৩.০ এ এটি সঠিক নয়, তবে বুটস্ট্র্যাপ ৩.৩.৫ এ যখন এটি ঠিক হয় .লেটের কোডটি দেখুন। 3.3.0:

this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />')
    .prependTo(this.$element)

3.3.5

  this.$backdrop = $(document.createElement('div'))
        .addClass('modal-backdrop ' + animate)
        .appendTo(this.$body)
— ttong
সূত্র
3

এটি আপনার পৃষ্ঠাগুলিতে যুক্ত করুন। এটা আমার জন্য কাজ করে।

<script type="text/javascript">
    $('.modal').parent().on('show.bs.modal', function (e) { $(e.relatedTarget.attributes['data-target'].value).appendTo('body'); })
</script>
— আমি নিতে
সূত্র
3

ডিআইভি ট্যাগের নীচে শৈলী যুক্ত করে আমি এটি স্থির করেছিলাম

style="background-color: rgba(0, 0, 0, 0.5);"

এবং কাস্টম সিএসএস যুক্ত করুন

.modal-backdrop {position: relative;}
— RaymondLe
সূত্র
3

আমার কাছে সবচেয়ে সহজ সমাধানটি ছিল আমার মোডালটিকে পরম্পরায় অবস্থান এবং জেড-ইনডেক্সের সাথে মোড়কে মোড করা। মডেল-ব্যাকড্রপ থেকে উচ্চতর। যেহেতু মডেল-ব্যাকড্রপ (কমপক্ষে আমার ক্ষেত্রে) এর জেড-ইনডেক্স 1050 রয়েছে:

.my-modal-wrapper {
  position: absolute;
  z-index: 1060;
}
<div class="my-modal-wrapper"></div>
স্নিপেট প্রসারিত করুন

— sivi911
সূত্র
z-index আমার জন্য কাজ করেছিল। অনেক ধন্যবাদ.
— আসিফ ইকবাল
2

আমার ক্ষেত্রে, নিম্নলিখিতগুলির সাথে আমার একটি মোড়ক ছিল:

.wrapper { margin: 0 auto; position:relative; z-index:1;overflow:hidden;}

কেবল জেড-ইনডেক্স: 1 সরিয়ে ফেলেছে এবং সমস্যাটি কেন স্থির হয়েছে তা সম্পর্কে কোনও ধারণা নেই। আপেক্ষিক অবস্থানটি সরিয়ে নেওয়ার বিষয়টি নিশ্চিতভাবেই হয়েছিল তবে আমার এটির দরকার ছিল।

— hsobhy
সূত্র
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.