বুটস্ট্র্যাপ মডেল: পটভূমিতে টগল শীর্ষে যায়

111

মডেল সহ আমার সমস্যা আছে have আমার একটি পৃষ্ঠায় একটি বোতাম আছে, যা মডেলটি টগল করে। মোডাল যখন দেখায়, পৃষ্ঠটি উপরে উঠে যায়।

সমাধান / ইত্যাদির সন্ধানের জন্য আমি যা কিছু করতে পেরেছি তা পেরেছি, তবে আমি সত্যিই হারিয়েছি।

সম্পাদনা করুন:

আমি চেষ্টাও করেছি: $('#myModal').modal('show');তবে এর ঠিক একই প্রভাব রয়েছে।

— FOOBAR
সূত্র

হ্যালো বেনি হ্যাঁ, আমি অবজ্ঞাপূর্ণভাবেই আছি। আমি এটি দিয়েও চেষ্টা করেছি: $ ('# মাইমোডাল') mod মডেল ('শো'); তবে এর ঠিক একই প্রভাব রয়েছে।

— ফুবার

1

এটি কি আপনাকে একই সমস্যাটিতে সহায়তা করতে পারে: stackoverflow.com/questions/12894570/…

— চিহ্নিত করুন

@ মার্ক, নীচে আমার উত্তর দেখুন ...

— রবিমল্যা

আমি লক্ষ্য করেছি যে যদি আমি যে কোনও জায়গায় ক্লিক windowকরি তবে মডেলগুলি আগুনে। এটি একটি অপ্রত্যাশিত মনে হয়। আমি buttonডিভটোলগুলির মাধ্যমে সরিয়েছি এবং পৃষ্ঠার যে কোনও জায়গায় ক্লিক করে এখনও মোডাল উইন্ডোটি খোলা হয়েছে। সেই কাঙ্ক্ষিত আচরণ ছিল? আমি ভাবছি যদি আপনার কাছে মডেল ক্লিক ইভেন্টের জন্য সঠিক নির্বাচক না থাকে।

— dward

174

মোডাল খুললে ট্যাগটিতে modal-openসেট হয় <body>। এই ক্লাসটি overflow: hidden;শরীরে সেট করে। বুটস্ট্র্যাপ সিএসএস শৈলীতে ওভাররাইড করতে আপনার স্টাইলশীটে এই নিয়মটি যুক্ত করুন:

body.modal-open {
    overflow: visible;
}

এখন স্ক্রোলটি জায়গায় থাকা উচিত।

— pstenstrm
সূত্র

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

— রবিমল্যা

4

আমার জন্য কাজ করে না, আমার কাছে আইফ্রেমের অভ্যন্তর মডেল রয়েছে এবং এটি শীর্ষে স্ক্রোল করছে ... কোনও ধারণা?

— ক্যাবুকসা.ম্যাপেচ

5

এটি আমার জন্য এটি স্থির করে দিয়েছে। আমার সমস্যার মূল যোগ করতে কেবল 'বডি {উচ্চতা: 100%}' ছিল।

— পিটজি

23

আমার জন্য কাজ করছে না। আমি একটি ভ্যানিলা মডেল পেয়েছি যা দিয়ে আমি .modal('show')এটি খুলছি এবং এটি এখনও পৃষ্ঠার শীর্ষে স্ক্রোল করে। বুটস্ট্র্যাপ v3.2.0

— মান্ডম

6

আমাকে position: inheritএই ক্লাসে যুক্ত করতে হয়েছিল তবে তার পরে মনোযোগের মতো কাজ করেছি।

— অ্যাড্রিয়ান

28

আপনি যদি ট্যাগ সহ মডেল কল করছেন। Href অ্যাট্রিবিউট থেকে '#' সরানোর চেষ্টা করুন data এবং ডেটা অ্যাট্রিবিউট সহ কল মডেল।

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

— Gokhan
সূত্র

আপনি যেমন পোস্ট করেছেন ঠিক তেমনই আমি এটি খুলি। লিঙ্কটি দেখুন

— FooBar

5

যদি আপনি "<বাটন>" ব্যবহার না করেন তবে <a>, যেমনটি আমার ক্ষেত্রে, আপনি যখন বস্তুটিতে মাউস কার্সারটি সরিয়ে ফেলেন তখন আপনি "আঙুলের বোতাম" আইকনটি হারাবেন। এটি কাটিয়ে উঠতে, আমি এটি করেছি: ... href = "# মাই_মডাল_আইডি" ডেটা-টগল = "মডেল" ... এবং আমি ডেটা-টার্গেট ব্যবহার করি নি

— প্যাগ্রিক

3

@ পেগুরিক্স - আপনার মন্তব্যটি আমার দৃশ্যের জন্য সবচেয়ে ভাল কাজ করেছে।

— আলফ্রেডবিআর

আমি মনে করি, @ পেগুরিক্সের পৃথক উত্তর হিসাবে তাঁর মন্তব্যটি লেখা উচিত। শুধুমাত্র যে জিনিস সাহায্য করেছে। ThumbsUp!

— বিভোর দুবে

14

আপনি যদি অ্যাঙ্কর ট্যাগ হিসাবে ব্যবহার করছেন <a href"#" ..> ... </a>এবং href="#"সমস্যা তৈরি করছেন, তা সরিয়ে দিন। আপনি এখানে আরও পড়তে পারেন

— নিমেশ জৈন
সূত্র

12

$('the thing you click on').click(function ($e) {
            $e.preventDefault();
});

এটি আপনাকে শীর্ষে যাওয়া স্ক্রোল বার বন্ধ করতে সহায়তা করবে t এটি আমার পক্ষে কাজ করেছে

— জর্জি মিরচেভ
সূত্র

5

সম্ভবত কোথাও কোথাও নেস্টেড মোডালগুলির সাথে কাজ করা:

body.modal-open {
    overflow: visible;
    position: absolute;
    width: 100%;
    height:100%;
}

আমার জন্য এটি অবস্থান, উচ্চতা এবং ওভারফ্লোয়ের সংমিশ্রণ ছিল।

— ডেনিস হেইডেন
সূত্র

4

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

আপনার উত্স সহ একটি ছোট পরীক্ষা আমাকে ত্রুটি দেয় gives

লাইন 127, কলাম 34: অবিরত উপাদান ডিভ।
              <div class="inner onlySides">

এটি একটি সমস্যা হতে পারে।

— billyJoe
সূত্র

আপনাকে ধন্যবাদ - আমি এটি খতিয়ে দেখব - যদিও আমার বিশ্বাস করা কঠিন হয়ে পড়েছে যে আমি যে সমস্যার মুখোমুখি হয়েছি তা এটি ট্রিগার করতে পারে t মনে হচ্ছে আপনি এটি ট্র্যাক করার জন্য একটি প্লাগইন ব্যবহার করছেন - যদি তাই হয়; কোনটি?

— FooBar

আমি ফায়ারব্যাগ ব্যতীত প্লাগইন ব্যবহার করি না। আপনার পৃষ্ঠার বৈধতা যাচাইকরণকারী.ডাব্লু.আর.আরগিতে যাচাই করা সর্বদা একটি ভাল বিষয় । এটি একটি ইস্যু হতে পারে কারণ আপনি যদি

— ডিভ বন্ধ

4

জাম্পিং ব্যাকগ্রাউন্ড সমাধানের সহজ উপায় হল দুটি প্যারামিটার সংজ্ঞা দেওয়া:

body.modal-open {
  overflow: visible;
  padding-right: 0 !important;
}

— নিলস
সূত্র

3

আমি এই সমস্যাটি আমার লোকাল হোস্টে প্রতিলিপি করার চেষ্টা করেছি এবং যতটা অদ্ভুত বলে মনে হচ্ছে, আপনি যে বুটস্ট্র্যাপ জেএস ফাইলটি ব্যবহার করছেন তার সাথে বিরোধ রয়েছে।

আপনার কোডটি মন্তব্য করার চেষ্টা করুন:

<script src="/min/?f=bootstrap.min.js,modernizr.js,bootstrap-datetimepicker.js,nprogress.js,feedback.js,select2.min.js,jquery.unveil.js,equalheights.jquery.js,hogan-v2.0.0.min.edu-custom.js,jquery.visible.min.js,handlebars-v1.2.0.js,typeahead.bundle.min.js,jquery.gridster.js,cookie.jquery.js,jquery.autosize.min.js,application.js&ver=1392814384"></script>

এবং এর পরিবর্তে বুটস্ট্র্যাপ ২.৩.২ ব্যবহার করুন:

<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>

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

আমি এটি বুটস্ট্র্যাপ 3 সংস্করণ দিয়ে চেষ্টা করেছি কিন্তু এটি কার্যকর হয়নি। আমি এখনও সমস্যার অংশটি চিহ্নিত করতে অক্ষম তবে ফায়ারব্যাগ বরাবর কোথাও আমাকে একটি e.preventDefault() is not a functionত্রুটি ছুঁড়েছে - আমি অনুমান করছি এটির মূল কারণটি হওয়া উচিত তবে আমি এখনও অন্য জেএস ফাইলগুলির সাথে এটি তুলনা করতে পারিনি।

— AyB
সূত্র

3

আমি পর্দার কেন্দ্রে। মডেল শীর্ষে সেট করার চেষ্টা করেছি।

.modal {
    position: absolute;
    top: 50%;
}

আমার চিন্তাভাবনা মাত্র।

— হোলার থাইবোশ
সূত্র

খুব কাছাকাছি. আমি ডাউনটোট করব না কারণ আমার সমস্যা অন্য কোথাও হতে পারে তবে এর ফলে স্ক্রিনের নীচের অর্ধেকটি ম্লান হয়ে গেছে, তবে মডেলটি কেন্দ্রের দিকে অবস্থিত ছিল।

— crafter

3

বুটস্ট্র্যাপে 3.1.1 এ আমি এই সমাধানটি দিয়ে সমাধান করেছি:

body.modal-open {
    position: absolute !important;
}

— নিয়তি
সূত্র

2

আপনি আমার দিনটি সংরক্ষণ করেছেন @ ফিলো আপনাকে অনেক ধন্যবাদ

— ভিনোথিনি

2

আপনার divঠিক আগে <div id="footer">বা পরে 2 টি অতিরিক্ত ক্লোজিং ট্যাগ রয়েছে<div id="mainFrame" class="group"> । আমি এটি পরিদর্শন করতে ভিজ্যুয়াল স্টুডিও 2012 এক্সপ্রেস ব্যবহার করছি।

দয়া করে এই 2 টি অতিরিক্ত ডিভগুলি সরিয়ে দিন এবং এটি কীভাবে কাজ করে তা আমাদের জানান। আমি অতিরিক্ত ডিভগুলি অপসারণ করেছি এবং সমস্ত কাস্টম স্ক্রিপ্ট সরিয়েছি। পাদলেখগুলিতে কেবল jquery কোর এবং বুটস্ট্র্যাপ ধরে রেখেছে। এখানে চূড়ান্ত আউটপুট এর স্ক্রিনশট। এখানে আপনার জন্য জসবিন খেলার মাঠ যা দুর্দান্ত কাজ করছে।

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

এখানে চিত্র বর্ণনা লিখুন

— Ravimallya
সূত্র

4

ডাউনভোট উত্তরগুলির কারণগুলির সাথে যথাযথ মন্তব্য দরকার।

— রবিমল্যা

2

মডেলটি খোলার জন্য এটি ব্যবহার করে দেখুন এবং দেখুন কী:

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

— scooterlord
সূত্র

2

body.modal-open {
overflow: visible !important;
}

এটি ঠিক করার জন্য আমার এটির জন্য গুরুত্বপূর্ণ বৈশিষ্ট্যটি প্রয়োজন needed

— Dizzle
সূত্র

এটি আমার পক্ষে কাজ করেছে, এবং আমি pstenstrm এর উত্তর থেকে @ ম্যান্ডম-এর ইস্যুটি (মন্তব্যে) পেয়েছি: "আমার পক্ষে কাজ করছে না। আমি একটি ভ্যানিলা মডেল পেয়েছি যা আমি .মডাল ('শো') দিয়ে খুলছি এবং এটি এখনও স্ক্রোল করে পৃষ্ঠার শীর্ষে। বুটস্ট্র্যাপ v3.2.0 "। এটির একমাত্র অদ্ভুত প্রভাবটি হ'ল এখন আপনি যদি কোনও মডেলটি স্ক্রোল করে রাখেন যা উইন্ডোর চেয়ে লম্বা, তবে এটি আমার পক্ষে একটি ছোটখাটো সমস্যা। ধন্যবাদ।

— ডিজিগ

1

বুটস্ট্র্যাপ ২.৩.২ ব্যবহার করে আমারও একই সমস্যা ছিল

এটি একটি লিঙ্কে ক্লিক করার জন্য একটি সমস্যা ছিল:

কৌশলটি ছিল: মিথ্যা প্রত্যাবর্তন;

<a href="#" class="btn" onclick="openPositionPopup(${positionReport[0]}); return false;">
     <i class="icon-map-marker"></i>
</a>

এবং জেএস:

function openModal() {
    $('#myModal').modal('show');
}

— mpccolorado
সূত্র

1

আমি এখানে এবং অন্য কোথাও সবকিছু চেষ্টা করে ঘন্টা কাটিয়েছি। Angularjs- উপাদান ব্যবহারের জন্য, আমাকে uibModal.open কনফিগার অবজেক্ট আরগটিতে অ্যানিমেশনটি অক্ষম করতে হয়েছিল।

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

  $uibModal.open(
    {
      animation: false,
      component: 'myDialogComponent',
      size: 'lg',
      resolve: {
        details: function() {
          return detailsCollection;
        }
      }
    }
  );

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

— নাথান বিচ
সূত্র

1

যদি আপনি একটি কৌণিক প্রোগ্রামে এই সমস্যার মুখোমুখি হন তবে .scss ফাইলের প্রথম লাইনে নীচের কোডটি যুক্ত করুন।

::ng-deep {   
     body.modal-open {
          overflow: visible !important;
          position: absolute !important;   
     } 
}

— শিবশঙ্কর পান্ডা
সূত্র

0

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

উদাহরণ:

<body>
    <!-- All your other HTML code -->
    <div>
        <!-- Button trigger modal -->
        <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
            Launch demo modal
        </button>
    </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"><span aria-hidden="true">&times;</span><span class="sr-only">Close</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>
    </div>
</body>

— nunoarruda
সূত্র

0

অবশেষে এই এক খুঁজে। অ্যাঙ্কর ট্যাগে মোডালটিকে লক্ষ্য করে বোতামটি আবদ্ধ করবেন না।

খারাপ

<a href"#">
    <button type="button" class="btn"
data-toggle="modal" data-target="#myModal">See Detail</button>
</a>

ভাল

<button type="button" class="btn"
    data-toggle="modal" data-target="#myModal">See Detail</button>

— ALFmachine
সূত্র

0

এই এক এটা আমার জন্য

body.modal-open {
    overflow: inherit;
    padding-right: 0 !important;
}

— warkitty
সূত্র

মডেলটি খোলার সময় আমি নভবার এবং ধারক জাম্পিংয়ের সাথে একই ধরণের সমস্যা পেয়েছিলাম। এই আমি খুঁজছিলাম ছিল।

— অ্যাভাইটি98

খুশি এটা সাহায্য!

— ওয়ারকিটি

0

কয়েক ঘন্টা ধরে কয়েক ডজন উত্তর পড়ার পরে আমি আবার বুটস্ট্র্যাপ ফাইল থেকে মূল কোডটি অনুলিপি করেছিলাম এবং কী কারণে আমি সর্বদা শীর্ষে চলে যাই তা দেখার জন্য ধাপে ধাপে ডিবাগ করেছি। কারণ বুটস্ট্র্যাপ 3 এর প্রকৃত সর্বশেষতম সংস্করণটি এখনই আপনি যে অবস্থানে রয়েছেন তা মডেলটি দেখাচ্ছে। আমি এটি খুঁজে পেয়েছিলাম -webkit-transform: translate3d(0,0,0);এবং height: 100%আমার সিএসএসের বডি-ট্যাগের কারণে এই আচরণটি হয়েছিল। হতে পারে এটি কাউকে সাহায্য করে।

— AlexioVay
সূত্র

0

আমার পক্ষে কাজ করে যখন আমি সংস্করণটি 3.1.1 থেকে 3.3.7 এ পরিবর্তন করেছি

যদি আপনার সংস্করণ 3.3.1 ব্যবহার করতে না হয় তবে প্রতিস্থাপনের চেষ্টা করুন।

পরিবর্তনের পরে, বাকি ফাংশনটি সঠিকভাবে কাজ করে তা যাচাই করা ভাল ।

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

— Pyot
সূত্র

0

body.modal-open { position: inherit; }

এটি আমার জন্য কবজির মতো কাজ করেছিল।

— নিমিশ গোয়েল
সূত্র

0

আমি উপরের সমস্ত উদাহরণ ব্যবহার করে দেখেছি - এটিই কেবল আমার জন্য কাজ করেছে:

.modal-open {

            padding-right: 0 !important;

        }

মডেলের ডান দিক থেকে প্যাডিং সরিয়ে ফেলা - লাফানো প্রতিরোধ করে।

— Stnfordly
সূত্র

0

উচ্চতা: 100% সমস্যার সমাধান, তবে আপনাকে অবশ্যই সঠিক "ডিভ" যুক্ত করতে হবে

— আনার আলী
সূত্র

0

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

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

var $dummy= $("<div>");
$("body").append($dummy);
$dummy.hide().remove();

— বোরজিলো আন্দ্রে
সূত্র

0

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

— general666
সূত্র

-1

এটি পুরোপুরি কার্যকর করে দেখুন

/* fix body.modal-open overflow:hidden */
body.modal-open {
    height: auto;
}

— minimit
সূত্র

-1

এটি ঠিক করার জন্য এটি ভাল ধারণা, এটি জকের মতো দেখাচ্ছে!

কেবল যথেষ্ট, আপনার স্টাইলে দুটি সিএসএস কোড যুক্ত করেছেন

.body.modal-open { overflow:visible;padding-right:0px !important;}
.body.modal-open { height:auto;padding-right:0px !important;}

https://github.com/jschr/bootstrap-modal/issues/131#issuecomment-153405449

— আলি শরীফী
সূত্র

-3

যদি পিটেনস্ট্রমের উত্তর আপনার পক্ষে কাজ করে না, তবে এটি এই প্রতিস্থাপন বোতামটি এইচটিএমএল এর সাথে একত্রিত করার চেষ্টা করুন:

<a class="btn btn-primary btn-lg" data-toggle="modal" data-target="#generalModal" id="launchbutton" href="#launchbutton"> Launch demo modal </a>

এটি বোতামটি অন স্ক্রিনে রাখা উচিত।

— বেন
সূত্র