টুইটার বুটস্ট্র্যাপ মডেল: স্লাইড ডাউন প্রভাব কীভাবে সরাবেন

Question

টুইটার বুটস্ট্র্যাপ মোডাল উইন্ডো অ্যানিমেশনটি স্লাইড ডাউন ইফেক্ট থেকে স্লাইড ডাউন এফিডে বা স্লাইড ছাড়াই প্রদর্শন করার কোনও উপায় আছে? আমি এখানে ডকুমেন্টেশনের মাধ্যমে পড়েছি:

http://getbootstrap.com/javascript/#modals

তবে তারা মডেল বডি স্লাইড প্রভাবগুলি পরিবর্তনের জন্য কোনও বিকল্প উল্লেখ করেন না।

Answer 1

শুধু খুঁজে নিতে fadeমোডাল DIV আছে থেকে বর্গ।

বিশেষত, পরিবর্তন:

<div class="modal fade hide">

প্রতি:

<div class="modal hide">

---

আপডেট: বুটস্ট্রা ৩-এর জন্য, hideক্লাসের প্রয়োজন নেই।

Comments

যদিও ওপি এটিকে কীভাবে বিবর্ণ করতে হবে তার জন্য জিজ্ঞাসা করলেও সেই উত্তরগুলির মধ্যে কয়েকটি প্রশ্নের বিকল্প গঠনের জন্য সঠিক। অনুমান করুন এটি কেবল একটি খারাপ প্রশ্ন কারণ এটি একটিতে সত্যই 2 টি প্রশ্ন এবং কেউই উভয় প্রশ্নের উত্তর একটির জবাব দেয় নি।

— umassthrower

আপনাকে বুটস্ট্র্যাপ উত্সগুলি সংশোধন করতে হবে না। আপনাকে কেবল আপনার এইচটিএমএল সংশোধন করতে হবে। এটা সঠিক উত্তর.

— এমপিসিসিএলরেডো

@ উমাসথ্রওয়ার সঠিক। কীভাবে কোনও রূপান্তর নেই তার উত্তর দেওয়া হয়। উপরে থেকে কীভাবে বিবর্ণ হবে তবে ড্রপ-ডাউন করবেন না এই প্রশ্নটি এই উত্তরটির আওতায় আসে না।

— সিনেসো

আমি বুঝতে পারি না এটি কীভাবে সঠিক উত্তর ... এটি কোনও বিবর্ণ ছাড়াই মডেল পপটিকে পরিণত করে, এবং ওপি স্লাইডটি সরিয়ে দিতে বলেছে, তবে বিবর্ণ নয় ...

— শন টেলর

আমি ম্লান রাখা এবং স্লাইডটি অপসারণের অপেক্ষায় রয়েছি এবং এই উত্তরটি সহায়ক নয়। এটি অদ্ভুত বুটস্ট্র্যাপটি মডেলের জন্য স্লাইড প্রভাবটি হ্যান্ডেল করতে তাদের বিবর্ণ শ্রেণি ব্যবহার করেছে কারণ বিবর্ণগুলি তাদের সিএসএসে সম্পূর্ণ আলাদা separate

— লইশ

Answer 2

বুটস্ট্র্যাপ দ্বারা ব্যবহৃত মডেলগুলি প্রভাব সরবরাহ করতে CSS3 ব্যবহার করে এবং সেগুলি মডেলগুলির ধারক ডিভ থেকে উপযুক্ত ক্লাসগুলি মুছে ফেলা যায়:

<div class="modal hide fade in" id="myModal">
   ....
</div>

আপনি দেখতে পাচ্ছেন যে এই মডেলের একটি শ্রেণি রয়েছে .fadeযার অর্থ এটি ম্লান হয়ে গেছে এবং এর .inঅর্থ এটি স্লাইড হয়ে যাবে So সুতরাং আপনি যে প্রভাবটি সরাতে চান সে সম্পর্কিত ক্লাসটি সরিয়ে ফেলুন, যা আপনার ক্ষেত্রে কেবল .inশ্রেণি।

সম্পাদনা: সবেমাত্র কিছু পরীক্ষা চালানো হয়েছে এবং এটি প্রদর্শিত হচ্ছে .inএমনটি নয়, ক্লাসটি জাভাস্ক্রিপ্ট দ্বারা যুক্ত করা হয়েছে, যদিও আপনি সেটিকে স্লাইডডাউন করে সিএসএসের সাথে আচরণের ক্ষেত্রে স্লাইড করতে পারেন:

.modal.fade {
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    -o-transition: none;
    transition: none;
}

ডেমো

Comments

আপনার এটিকে পটভূমিতেও যুক্ত করা উচিত: modal.fade, .modal-backdrop.fadeইত্যাদি ...

— ডেভিড হেলসিং

ডেভিড যে কারণে উল্লেখ করেছেন, সেই উপাদানটি অ্যানিমেশনগুলি ছাড়াই ফাইলটি সম্পাদনা করা ভাল to

— পিটার হ্যানলি

বিবর্ণ শ্রেণিটি is

— চ্ছিক,

@ উমাসট্রওয়ারটি উত্তরটি বেশ পুরানো, লেখার সময় সেই পছন্দটি বিদ্যমান ছিল না।

— আন্দ্রেস ইলিচ

আমি নিশ্চিত নই যে মন্তব্যটি ঠিক আছে কারণ বিএস ২.০ প্রকাশিত হয়েছিল যে উত্তরটির 3 মাস আগে 3 মাস আগে প্রকাশিত হয়েছিল এবং গত গ্রীষ্মে v2.0 ব্যবহার করার সময় আমি আমার মডেলগুলি থেকে বিবর্ণ সরিয়েছি। সম্ভবত তারা তার পরে ডকুমেন্টেশন পরিবর্তন করেনি। জানিনা।

— umassthrower

Answer 3

আপনি যদি স্লাইডের পরিবর্তে মডেল ম্লান থাকতে চান (কেন এটি .fadeযাইহোক বলা হয়?) আপনি নিজের সিএসএস ফাইলে ক্লাসটি ওভাররাইট করতে পারেন বা এটির মাধ্যমে সরাসরি bootstrap.css:

.modal.fade{
    -webkit-transition: opacity .2s linear, none;
    -moz-transition: opacity .2s linear, none;
    -ms-transition: opacity .2s linear, none;
    -o-transition: opacity .2s linear, none;
    transition: opacity .2s linear, none;
    top: 50%;
}

আপনি যদি কোনও প্রভাব না চান তবে কেবলমাত্র fadeমডেল ক্লাসগুলি থেকে ক্লাসটি সরিয়ে ফেলুন ।

Comments

শীর্ষ: 50% কষ্ট সৃষ্টি হতে যখন ডায়ালগ বন্ধ বলে মনে হয়। কথোপকথনটি ঠিক আগের জায়গায় খোলা আছে বলে মনে হচ্ছে; তবে বন্ধ হওয়ার ঠিক আগে, বিভক্ত দ্বিতীয়টির জন্য এটি কেন্দ্রের দিকে চলে যায় এবং তারপর বন্ধ হয় ses কমপক্ষে ক্রোমে। অন্য কেউ এটিও লক্ষ্য করেছে?

— মোহিতপ

@ ফুলম বানর - চিয়ার্স, ম্লান চেয়েছিলেন তবে স্লাইডটি নয়। যদি কেউ এসএসএস / কম্পাস সংস্করণ চায় ... ... মডেল.ফ্যাড {@ রূপান্তর অন্তর্ভুক্ত করুন (অস্বচ্ছতা .2 এস লিনিয়ার, কিছুই নয়);}

— সাইমন

@ মোহিতপ "শীর্ষ: ৫০%" এর পরিবর্তে, আমি "শীর্ষ: ২৫%" ব্যবহার করছি। আমি .modal.fade.in যোগ করেছি {শীর্ষ: 25%; Me মনে হয় আমার জন্য কৌশলটি করেছেন। আমার মোডালটিতে "ইন" ক্লাস না থাকায় এটি কেন কাজ করে তা নির্দিষ্ট নয়।

— ড্যারেন

@dkrape inক্লাসটি বুটস্ট্র্যাপ.জেএস দ্বারা যুক্ত হয়েছে

— ডেভ সাগ

এই প্রশ্নের দুটি অংশের উত্তর, এটিই সঠিক উত্তর।

— 30:34

Answer 4

আমি বিশ্বাস করি যে এই উত্তরগুলির বেশিরভাগই বুটস্ট্র্যাপ 2 এর জন্য I বুটস্ট্র্যাপ 2 এর জন্য আমার পূর্ববর্তী উত্তরের মতো এটি এখনও একটি অস্বচ্ছতা বিবর্ণ করবে, তবে স্লাইড স্থানান্তরটি করবে না ।

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

কম জন্য, নিম্নলিখিত কোড সন্ধান করুন MODALS.less

&.fade .modal-dialog {
  .translate(0, -25%);
  .transition-transform(~"0.3s ease-out");
}
&.in .modal-dialog { .translate(0, 0)}

তারপর পরিবর্তন -25%করার জন্য0%

বিকল্পভাবে, আপনি যদি কেবল সিএসএস ব্যবহার করেন তবে নিম্নলিখিতগুলিতে সন্ধান করুন theme.css:

.modal.fade .modal-dialog {
  -webkit-transform: translate(0, -25%);
  -ms-transform: translate(0, -25%);
  transform: translate(0, -25%);
  -webkit-transition: -webkit-transform 0.3s ease-out;
  -moz-transition: -moz-transform 0.3s ease-out;
  -o-transition: -o-transform 0.3s ease-out;
  transition: transform 0.3s ease-out;
}

এবং তারপর পরিবর্তন -25%করার জন্য 0%।

Comments

আমি বুটস্ট্র্যাপের স্টাইলশিট / কম সম্পাদনার পরিবর্তে কাস্টম স্টাইলশীটে এই স্টাইলগুলিকে ওভাররাইড করব।

— বাসেমে

এই ম্লান ডাব্লু / ও স্লাইডটি পাওয়ার জন্য কেবলমাত্র সহজ সিএসএস সমাধান। ধন্যবাদ.

— ডেভিডেজেজ

Answer 5

আমি .modal.fadeএটির নিজস্ব LESS স্টাইলশীটে ডিফল্ট শৈলীগুলিকে ওভাররাইড করে সমাধান করেছি:

.modal {
  &.fade {
    .transition(e('opacity .3s linear'));
    top: 50%;
  }
  &.fade.in { top: 50%; }
}

এটি ম্লান রাখে / অ্যানিমেশন ম্লান রাখে তবে স্লাইডটি উপরে / স্লাইড ডাউন অ্যানিমেশনটিকে সরিয়ে দেয়।

Comments

ধন্যবাদ. আমি 50% এর পরিবর্তে 10% ব্যবহার করে শেষ করেছি এবং আমার থেকে কিছুটা মসৃণ বলে মনে হচ্ছে .3 এস থেকে .25 এ রূপান্তর হ্রাস পেয়েছে।

— ইসাপির

একটি মডেল একাধিক বার খোলা এবং বন্ধ করা সময়ের সাথে সাথে পৃষ্ঠাটি উপরে সরিয়ে দেয়।

— লইশ

Answer 6

আমি সলিউডটি সরিয়ে ফেলা তবে ফিড ছেড়ে যাওয়ার সেরা সমাধানটি খুঁজে পেয়েছি যা আপনার পছন্দসইয়ের একটি সিএসএস ফাইলে নিম্নলিখিত সিএসএস যুক্ত করে বুটস্ট্র্যাপ সিএসএসের পরে অনুরোধ করা হয়েছে leaves

.modal.fade .modal-dialog 
{
    -moz-transition: none !important;
    -o-transition: none !important;
    -webkit-transition: none !important;
    transition: none !important;

    -moz-transform: none !important;
    -ms-transform: none !important;
    -o-transform: none !important;
    -webkit-transform: none !important;
    transform: none !important;
}

Comments

বিবর্ণ রাখার জন্য তবে স্লাইডটি নিচে

— নামাতে

এই সমাধানটি বুটস্ট্র্যাপ 4 এর জন্যও দুর্দান্ত কাজ করে। ধন্যবাদ!

— এপ্রোভেন্ট

Answer 7

আমি স্লাইড প্রভাব পছন্দ করি না। এটি ঠিক করার জন্য আপনাকে top.modal.fade এবং modal.fade.in উভয়ের জন্য একই বৈশিষ্ট্যটি তৈরি করতে হবে । আপনি বন্ধ নিতে পারেন top 0.3s ease-outখুব ট্রানজিশন মধ্যে, কিন্তু এটা এটা ত্যাগ করার আঘাত না। এই পদ্ধতির মত আমি ফেইড ইন / আউট কাজ, এটা এইমাত্র স্লাইডটি নিহত ।

.modal.fade {
  top: 20%;
  -webkit-transition: opacity 0.3s linear;
     -moz-transition: opacity 0.3s linear;
       -o-transition: opacity 0.3s linear;
          transition: opacity 0.3s linear;
}

.modal.fade.in {
  top: 20%;
}

আপনি যদি বুটস্ট্র্যাপ 3 উত্তর খুঁজছেন তবে এখানে দেখুন

Comments

উপরের শীর্ষ দুটি অ-নিখুঁত উদাহরণ ".modal.fade.in" ঘোষণাকে অবহেলা করে, যা বন্ধ হওয়ার পরে কিছুটা মডেলকে লাফিয়ে তোলে। এই এক দুর্দান্ত কাজ করে। এখানে এটি অনুশীলন: jsfiddle.net/dkrape/4EFFq

— ড্যারেন

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

— ডেভ সাগ

Answer 8

আপনি কেবল "শীর্ষ: -25%" অপসারণ করে বুটস্ট্র্যাপ সিএসএস ওভাররাইট করতে পারেন;

একবার মুছে ফেলা হলে, মডেলগুলি স্লাইড অ্যানিমেশন ব্যতীত কেবল ভিতরে এবং বাইরে বিবর্ণ হয়ে যায়।

Answer 9

কেবল বিবর্ণ ক্লাসটি সরিয়ে ফেলুন এবং আপনি যদি মোডালে আরও অ্যানিমেশনগুলি সম্পাদন করতে চান তবে কেবল আপনার মোডাল এ এনিমেট সিএস ক্লাস ব্যবহার করুন।

Answer 10

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

আমি এটির সাথে ডিফল্ট বুটস্ট্র্যাপের কম কোডটিকে নিজের থেকে কম ওভাররাইড করি:

.modal {
  &.fade .modal-dialog {
    .translate(0, 0);
    .transition-transform(~"none");
  }
  &.in .modal-dialog { .translate(0, 0)}
}

এইভাবে আমি কেবল বিবর্ণ প্রভাব, এবং কোনও স্লাইডডাউন ছাড়াই রয়েছি।

Answer 11

.modal.fade, .modal.fade .modal-dialog {
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    -o-transition: none;
    transition: none;
}

Comments

এটি প্রদর্শন এবং লুকানো থেকে অ্যানিমেশন সরিয়ে ফেলবে। অ্যাংুলার-বুটস্ট্র্যাপ ইউআইয়ের সাথেও আমার পক্ষে কাজ করে।

— এসএম আদনান

Answer 12

প্রশ্নটি পরিষ্কার ছিল: কেবল স্লাইডটি সরিয়ে ফেলুন : বুটস্ট্র্যাপ ভি 3 এ এটি কীভাবে পরিবর্তন করবেন তা এখানে

মোডালস.বিহীন মন্তব্যে অনুবাদ বিবৃতিটি প্রকাশ করুন:

&.fade .modal-dialog {
  //   .translate(0, -25%);

Answer 13

তাকান http://quickrails.com/twitter-bootstrap-modal-how-to-remove-slide-down-effect-but-leaves-the-fade/

.modal.fade .modal-dialog 
{
    -moz-transition: none !important;
    -o-transition: none !important;
    -webkit-transition: none !important;
    transition: none !important;
    -moz-transform: none !important;
    -ms-transform: none !important;
    -o-transform: none !important;
    -webkit-transform: none !important;
    transform: none !important;
}

Answer 14

এটি আপডেট করতে চেয়েছিলেন। আপনার বেশিরভাগই এই সমস্যাটি সম্পূর্ণ করেন নি। আমি বুটস্ট্র্যাপ 3 ব্যবহার করছি above উপরের কোনও ঠিকঠাক কাজ করেনি।

স্লাইডের প্রভাবটি সরিয়ে ফেলতে তবে বিবর্ণ রাখতে হবে boot

 .modal.fade .modal-dialog{/*-webkit-transform:translate(0,-25%);-ms-transform:translate(0,-25%);transform:translate(0,-25%);-webkit-transition:-webkit-transform .3s ease-out;-moz-transition:-moz-transform .3s ease-out;-o-transition:-o-transform .3s ease-out;transition:transform .3s ease-out*/}

 .modal.in .modal-dialog{/*-webkit-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)*/}

Answer 15

নিম্নলিখিত CSS আমার জন্য কাজ করে - বুটস্ট্র্যাপ 3 ব্যবহার করে boo বুস্ট্র্যাপ স্টাইলগুলির পরে আপনার এই সিএসএস যুক্ত করতে হবে -

.modal.fade .modal-dialog{
    -webkit-transition-property: transform; 
    -webkit-transition-duration:0 ; 
    transition-property: transform; 
    transition-duration:0 ; 
}

.modal.fade {
   transition: none; 
}

Answer 16

কেবল মডেল ক্লাস থেকে 'বিবর্ণ' শ্রেণি সরিয়ে ফেলুন

class="modal fade bs-example-modal-lg"

যেমন

class="modal bs-example-modal-lg"