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

Question 1

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

এটি আমার এইচটিএমএল কোড। আমি কন্টেন্ট কল করতে Ajax ব্যবহার।

<div id="modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="ModalLabel"></h3>
    </div>
    <div class="modal-body">

    </div>
</div>

Question 2

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

.modal-body {
    position: relative;
    overflow-y: auto;
    max-height: 400px;
    padding: 15px;
}

সুতরাং আপনি jquery cssপদ্ধতিটি ব্যবহার করে গতিশীলভাবে ইনলাইন স্টাইল যুক্ত করতে পারেন :

বুটস্ট্র্যাপ ব্যবহারের নতুন সংস্করণগুলির জন্য show.bs.modal

$('#modal').on('show.bs.modal', function () {
       $(this).find('.modal-body').css({
              width:'auto', //probably not needed
              height:'auto', //probably not needed 
              'max-height':'100%'
       });
});

বুটস্ট্র্যাপ ব্যবহারের পুরানো সংস্করণগুলির জন্য show

$('#modal').on('show', function () {
       $(this).find('.modal-body').css({
              width:'auto', //probably not needed
              height:'auto', //probably not needed 
              'max-height':'100%'
       });
});

বা ওভাররাইড করতে সিএসএস বিধি ব্যবহার করুন:

.autoModal.modal .modal-body{
    max-height: 100%;
}

এবং এই autoModalলক্ষ্যটিকে আপনার টার্গেটের মডেলগুলিতে যুক্ত করুন।

বিষয়বস্তুটিকে গতিময়ভাবে ফিডে পরিবর্তন করুন, আপনি সেই অনুযায়ী মোডালকে পুনরায় আকার দিতে দেখবেন। Demo

বুটস্ট্র্যাপের আরও নতুন সংস্করণ উপলভ্য দেখুন event names।

show.bs.modal শো ইভেন্ট পদ্ধতিটি কল করার সাথে সাথে এই ইভেন্টটি তত্ক্ষণাত্ ছড়িয়ে পড়ে । যদি কোনও ক্লিকের কারণে ঘটে থাকে তবে ক্লিক করা উপাদান ইভেন্টের সম্পর্কিত টার্গেট সম্পত্তি হিসাবে উপলব্ধ।
show.bs.modal মডেলটি ব্যবহারকারীর কাছে দৃশ্যমান হয়ে উঠলে এই ইভেন্টটি বরখাস্ত করা হয় (সিএসএস রূপান্তর সম্পূর্ণ হওয়ার জন্য অপেক্ষা করবে)। যদি কোনও ক্লিকের কারণে ঘটে থাকে তবে ক্লিক করা উপাদান ইভেন্টের সম্পর্কিত টার্গেট সম্পত্তি হিসাবে উপলব্ধ।
hd.bs.modal এই ইভেন্টটি তত্ক্ষণাত্ বরখাস্ত করা হয় যখন লুকানোর উদাহরণ পদ্ধতিটি কল করা হয়।
লুকানো.বস.মোডাল যখন এই মডেলটি ব্যবহারকারীর কাছ থেকে গোপন করা শেষ করে (সিএসএস রূপান্তরগুলি সম্পূর্ণ হওয়ার অপেক্ষায় থাকবে) তখন এই ইভেন্টটি বরখাস্ত করা হয়।
loaded.bs.modal মডেলটি দূরবর্তী বিকল্প ব্যবহার করে সামগ্রী লোড করলে এই ইভেন্টটি বরখাস্ত করা হয়।

বুটস্ট্র্যাপের পুরানো সংস্করণ modal events সমর্থিত।

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

Question 3

এটি আমার পক্ষে কাজ করেছিল, উপরের কোনওটিই কাজ করেনি।

.modal-dialog{
    position: relative;
    display: table; /* This is important */ 
    overflow-y: auto;    
    overflow-x: auto;
    width: auto;
    min-width: 300px;   
}

Question 4

তাই আমি সব আমি কি করতে DIV আছে সঙ্গে মোডাল বিষয়বস্তু অধিষ্ঠিত সেট করা হয় করেছেন তা খুঁজে পাওয়া আমার জন্য কাজ PSL এর উত্তর পাই নি style="display: table;"। মোডাল সামগ্রীটি নিজেই বলে দেয় এটি কতটা বড় হতে চায় এবং মডেলটি এটি সংযুক্ত করে।

Question 5

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

.modal-dialog{
  display: table
}

ক্ষেত্রে যদি আপনি ইনলাইন যোগ করতে চান

<div class="modal-dialog" style="display:table;">
//enter code here
</div>

display:table;মডেল-সামগ্রী শ্রেণিতে যুক্ত করবেন না । এটি আপনার কাজটি করেছে তবে বৃহত আকারের জন্য আপনার মডেলটি নিচের স্ক্রিনশটগুলি দেখুন। আপনি যদি মডেল-সামগ্রীতে স্টাইল যুক্ত করেন তবে মডেল-সংলাপে শৈলী যুক্ত করলে প্রথম চিত্রটি । এটি স্বভাবযুক্ত দেখাচ্ছে।

Question 6

বুটস্ট্র্যাপ 3 এর মতো ব্যবহার করুন

$('#myModal').on('hidden.bs.modal', function () {
// do something…
})

Question 7

আমার জন্য সিম্পল সিএসএস কাজ

.modal-dialog { 
max-width : 100% ;
}

Question 8

আমি কেবল CSS টি ওভাররাইড করি:

.modal-dialog {
    max-width: 1000px;
}

Question 9

width:fit-contentমডেল ডিভ উপর সেট করুন।

Question 10

আপনি যদি gijgo.com থেকে jquery কথোপকথন প্লাগইন ব্যবহার করেন এবং প্রস্থকে অটোতে সেট করেন তবে আপনি এটি করতে পারেন।

$("#dialog").dialog({
  uiLibrary: 'bootstrap',
  width: 'auto'
});

<html>
<head>
  <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
  <link href="http://code.gijgo.com/1.0.0/css/gijgo.css" rel="stylesheet" type="text/css">
  <script src="http://code.gijgo.com/1.0.0/js/gijgo.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
 <div id="dialog" title="Wikipedia">
   <img src="https://upload.wikimedia.org/wikipedia/en/thumb/8/80/Wikipedia-logo-v2.svg/1122px-Wikipedia-logo-v2.svg.png" width="320"/>
 </div>
</body>
</html>

স্নিপেট প্রসারিত করুন

আপনি যদি পুনরায় আকার পরিবর্তনযোগ্য সেট করে রাখেন তবে আপনি ব্যবহারকারীদের আকার নিয়ন্ত্রণ করতেও পারবেন। আপনি এই সম্পর্কে একটি ডেমো দেখতে পারেন http://gijgo.com/ ডায়ালগ / ডেমোস / বুটস্ট্র্যাপ- আধুনিক- পরিবর্তনযোগ্য

Question 11

একটি সাধারণ সিএসএস সমাধান যা উল্লম্ব এবং অনুভূমিকভাবে মডেলকে কেন্দ্র করবে:

.modal.show {
  display: flex !important;
  justify-content: center;
}

.modal-dialog {
  align-self: center;
}

Question 12

বুটস্ট্র্যাপের জন্য 2 অটো সামঞ্জস্যপূর্ণ মডেলের উচ্চতা গতিশীল

  //Auto adjust modal height on open 
  $('#modal').on('shown',function(){
     var offset = 0;
     $(this).find('.modal-body').attr('style','max-height:'+($(window).height()-offset)+'px !important;');
  });

Question 13

বুটস্ট্র্যাপ 3 এবং মডেল-বডি ডিভের উচ্চতা 442px এর চেয়ে বেশি হতে চাই না বলে আমার একই সমস্যা ছিল। এটি আমার ক্ষেত্রে এটি ঠিক করার জন্য প্রয়োজনীয় সমস্ত CSS ছিল:

.modal-body {
    overflow-y: auto;
}

Question 14

মাইন সলিউশনটি কেবল স্টাইলের নীচে যুক্ত করা ছিল। <div class="modal-body" style="clear: both;overflow: hidden;">

Question 15

বুটস্ট্র্যাপ 4 হিসাবে - এর একটি স্টাইল রয়েছে:

@media (min-width: 576px)
.modal-dialog {
    max-width: 500px;
}

তাই আপনি মাপ পরিবর্তন করতে খুঁজছি হয় মোডাল প্রস্থকে কিছু-চওড়া বড়, আমি উদাহরণস্বরূপ আপনার CSS এ এই ব্যবহার সুপারিশ করবে:

.modal-dialog { max-width: 87vw; }

নোট করুন যে সেটিং width: 87vw;বুটস্ট্র্যাপগুলি ওভাররাইড করবে না max-width: 500px;।

Question 16

আমার সন্ধান আমাকে এখানে নিয়ে গেছে তাই আমার দু'টি সেন্ট মূল্যবান ধারণা যুক্ত করতে পারে। আপনি যদি বানর বান্ধব টুইটার বুটস্ট্র্যাপ মডেল ব্যবহার করেন তবে আপনি এরকম কিছু করতে পারেন:

    var dialog = new BootstrapDialog({
        id: 'myDialog',
        title: 'Title',
        closable: false,
        // whatever you like configuration here...
    });

    dialog.realize();
    if (isContentAYoutubeVideo()) {
        dialog.getModalDialog().css('width', '80%'); // set the width to whatever you like
    }
    dialog.open();

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