কীভাবে টুইটার বুটস্ট্র্যাপ মডেল পূর্ণ স্ক্রিন বানাবেন

Question

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-body">
    <%= image_tag "Background.jpg" %>
  </div>
</div>

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

Answer 1

আমি নিম্নলিখিত কোড সহ বুটস্ট্র্যাপ 3 এ অর্জন করেছি:

.modal-dialog {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.modal-content {
  height: auto;
  min-height: 100%;
  border-radius: 0;
}

সাধারণভাবে, যখন আপনার ফাঁক / প্যাডিং সংক্রান্ত সমস্যাগুলি সম্পর্কে প্রশ্ন থাকে, তখন উপাদানটি ডান + ক্লিক (বা ম্যাকের সাথে সিএমডি + ক্লিক করুন) চেষ্টা করুন এবং Chrome এ "উপাদান পরিদর্শন করুন" বা ফায়ারফক্সে "ফায়ারব্যাগের সাহায্যে উপাদানটি পরীক্ষা করুন" নির্বাচন করুন। আপনার প্রয়োজনীয় প্যাডিং / স্পেসিং না পাওয়া পর্যন্ত "এলিমেন্টস" প্যানেলে বিভিন্ন এইচটিএমএল উপাদানগুলি নির্বাচন করার এবং রিয়েল-টাইমে ডানদিকে সিএসএস সম্পাদনা করার চেষ্টা করুন।

এখানে একটি লাইভ ডেমো রয়েছে

এখানে ঝাঁকুনির লিঙ্ক is

Comments

আমিও যোগ চাই margin: 0থেকে .modal-dialog।

— হ্যারিসন 4

বিটিডাব্লু: .modal-contentসামগ্রীর নীচে উপচে পড়া এবং নীচে স্ক্রোল করা যখন এর হাইট ব্রেক। এটি হওয়া উচিতmin-height: 100%; height: auto;

— ইয়ানিক রোচন

যদি কোনও মোবাইল অ্যাপের জন্য ডিজাইনিং করা হয় তবে আপনি বৃহত্তর স্ক্রিনগুলি @ মিডিয়া (সর্বাধিক প্রস্থ: 768px) এর জন্য সাধারণ মডেল প্রস্থ রাখতে ক্রিস 'সিএসএস একটি মিডিয়া ক্যোয়ারির ভিতরে রাখতে পারেন {...}

— নিকোলাস কননাউল্ট

আপনি। আধুনিক {প্যাডিং যুক্ত করতে পারেন: ... পিক্স} আপনার যদি "প্রায়" সম্পূর্ণ পর্দার

— মডেল প্রয়োজন হয়

.modal-dialogএছাড়াও প্রয়োজন max-width: 100%;জন্য বুটস্ট্র্যাপ 4

— আনন্দ Rockzz

Answer 2

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

.modal-dialog {
  width: 98%;
  height: 92%;
  padding: 0;
}

.modal-content {
  height: 99%;
}

Comments

আরও সঠিক উত্তর যা গোলাকার কোণগুলির সাথে মডেলটির অনুভূতি বজায় রাখে, স্বীকৃত উত্তরটি মডেলের পরিবর্তে একটি ওভারলে স্তর উপস্থাপন করে

— ক্লেইন ডিসিলভা

যদি মডেলটি পুরো স্ক্রিনটি দখল করে থাকে, আপনার চারপাশে চারপাশে কোণা থাকলে এটি ভয়ঙ্কর (আইএমএইচও) দেখাবে।

— ডেমেন্টিক

Answer 3

বুটস্ট্র্যাপ 4 এর জন্য আমাকে সর্বোচ্চ প্রস্থ সহ মিডিয়া ক্যোয়ারী যুক্ত করতে হবে: কোনওটি নয়

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

.modal-dialog {
  width: 98%;
  height: 92%;
  padding: 0;
}

.modal-content {
  height: 99%;
}

Answer 4

আমি পূর্ণস্ক্রিন মডেলগুলির জন্য একটি "প্রতিক্রিয়াশীল" সমাধান নিয়ে এসেছি:

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

বুটস্ট্র্যাপ 3 এবং বুটস্ট্র্যাপ 4 এর জন্য প্রয়োগ করা হয়েছে ।

বুটস্ট্র্যাপ ভি 4

নিম্নলিখিত জেনেরিক কোডটি কাজ করা উচিত:

.modal {
  padding: 0 !important; // override inline padding-right added from js
}
.modal .modal-dialog {
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
}
.modal .modal-content {
  height: 100%;
  border: 0;
  border-radius: 0;
}
.modal .modal-body {
  overflow-y: auto;
}

নীচের স্ক্যাস কোড অন্তর্ভুক্ত করে, এটি নিম্নলিখিত ক্লাসগুলি তৈরি করে যা .modalউপাদানটিতে যুক্ত করা দরকার :

+---------------+---------+---------+---------+---------+---------+
|               |   xs    |   sm    |   md    |   lg    |   xl    | 
|               | <576px  | ≥576px  | ≥768px  | ≥992px  | ≥1200px |
+---------------+---------+---------+---------+---------+---------+
|.fullscreen    |  100%   | default | default | default | default | 
+---------------+---------+---------+---------+---------+---------+
|.fullscreen-sm |  100%   |  100%   | default | default | default | 
+---------------+---------+---------+---------+---------+---------+
|.fullscreen-md |  100%   |  100%   |  100%   | default | default |
+---------------+---------+---------+---------+---------+---------+
|.fullscreen-lg |  100%   |  100%   |  100%   |  100%   | default |
+---------------+---------+---------+---------+---------+---------+
|.fullscreen-xl |  100%   |  100%   |  100%   |  100%   |  100%   |
+---------------+---------+---------+---------+---------+---------+

স্ক্যাস কোডটি হ'ল:

@mixin modal-fullscreen() {
  padding: 0 !important; // override inline padding-right added from js

  .modal-dialog {
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
  }

  .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
  }

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

}

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-down($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    .modal-fullscreen#{$infix} {
      @include modal-fullscreen();
    }
  }
}

কোডেপে ডেমো: https://codepen.io/andreivictor/full/MWYNPBV/

---

বুটস্ট্র্যাপ ভি 3

এই বিষয়ে পূর্ববর্তী প্রতিক্রিয়াগুলির ভিত্তিতে (@ ক্রিস জে, @ কেকারলি), নিম্নলিখিত জেনেরিক কোডটি কাজ করা উচিত:

.modal {
  padding: 0 !important; // override inline padding-right added from js
}

.modal .modal-dialog {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.modal .modal-content {
  height: auto;
  min-height: 100%;
  border: 0 none;
  border-radius: 0;
  box-shadow: none;
}

আপনি যদি প্রতিক্রিয়াশীল পূর্ণস্ক্রিন মডেলগুলি ব্যবহার করতে চান তবে নীচের ক্লাসগুলিকে .modalউপাদানটিতে যুক্ত করতে হবে :

• .modal-fullscreen-md-down- মডেলটি এর চেয়ে ছোট স্ক্রিনগুলির জন্য পূর্ণস্ক্রিন 1200px।
• .modal-fullscreen-sm-down- মডেলটি এর চেয়ে ছোট স্ক্রিনগুলির জন্য পূর্ণস্ক্রিন 922px।
• .modal-fullscreen-xs-down- মডেলটি এর চেয়ে ছোট স্ক্রিনের জন্য পূর্ণস্ক্রিন 768px।

নিম্নলিখিত কোডটি একবার দেখুন:

/* Extra small devices (less than 768px) */
@media (max-width: 767px) {
  .modal-fullscreen-xs-down {
    padding: 0 !important;
  }
  .modal-fullscreen-xs-down .modal-dialog {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }
  .modal-fullscreen-xs-down .modal-content {
    height: auto;
    min-height: 100%;
    border: 0 none;
    border-radius: 0;
    box-shadow: none;
  } 
}

/* Small devices (less than 992px) */
@media (max-width: 991px) {
  .modal-fullscreen-sm-down {
    padding: 0 !important;
  }
  .modal-fullscreen-sm-down .modal-dialog {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }
  .modal-fullscreen-sm-down .modal-content {
    height: auto;
    min-height: 100%;
    border: 0 none;
    border-radius: 0;
    box-shadow: none;
  }
}

/* Medium devices (less than 1200px) */
@media (max-width: 1199px) {
  .modal-fullscreen-md-down {
    padding: 0 !important;
  }
  .modal-fullscreen-md-down .modal-dialog {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }
  .modal-fullscreen-md-down .modal-content {
    height: auto;
    min-height: 100%;
    border: 0 none;
    border-radius: 0;
    box-shadow: none;
  }
}

---

ডেমো কোডেপেন: https://codepen.io/andreivictor/full/KXNdoO- এ উপলব্ধ ।

---

যারা স্যাসকে প্রিপ্রোসেসর হিসাবে ব্যবহার করেন তারা নিম্নলিখিত মিক্সিনের সুবিধা নিতে পারেন:

@mixin modal-fullscreen() {
  padding: 0 !important; // override inline padding-right added from js

  .modal-dialog {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }

  .modal-content {
    height: auto;
    min-height: 100%;
    border: 0 none;
    border-radius: 0;
    box-shadow: none;
  }

}

Answer 5

নিম্নলিখিত ক্লাসটি বুটস্ট্র্যাপে একটি পূর্ণ-স্ক্রিন মডেল তৈরি করবে:

.full-screen {
    width: 100%;
    height: 100%;
    margin: 0;
    top: 0;
    left: 0;
}

আমি নিশ্চিত নই যে আপনার মডেলের অভ্যন্তরীণ সামগ্রী কীভাবে কাঠামোবদ্ধ, এটি সিএসএসের সাথে সম্পর্কিত সামগ্রিক উচ্চতার উপর প্রভাব ফেলতে পারে have

Comments

ফুলস্ক্রিন কি? আমি # মাইমোডালে সিএসএস অন্তর্ভুক্ত করেছি এটি প্রস্থের জন্য কাজ করেছে তবে উচ্চতা নয়।

— হৃষীকেশ সরদার

.fullscreenসমস্যা সমাধানের জন্য আমি তৈরি করা একটি শ্রেণী, এটি বুটস্ট্র্যাপের অন্তর্ভুক্ত নয়। আপনি কি জেএসফিডল বা কোডপেনে আপনার কোডের নমুনা পোস্ট করতে পারেন ? আমি আপনার কোড না দেখে আপনাকে সাহায্য করতে পারি না।

— micjamking

উচ্চতা যুক্ত করার জন্য আপনাকে মডেল-বডিতে উচ্চতা যুক্ত করতে হবে # মাইমোডালে নয়।

— কাসিমরামজান

Answer 6

বুটস্ট্র্যাপ 4 এর জন্য

ক্লাস যুক্ত করুন:

.full_modal-dialog {
  width: 98% !important;
  height: 92% !important;
  min-width: 98% !important;
  min-height: 92% !important;
  max-width: 98% !important;
  max-height: 92% !important;
  padding: 0 !important;
}

.full_modal-content {
  height: 99% !important;
  min-height: 99% !important;
  max-height: 99% !important;
}

এবং এইচটিএমএলে:

<div role="document" class="modal-dialog full_modal-dialog">
    <div class="modal-content full_modal-content">

Answer 7

স্নিপেট @Chris J থেকে মার্জিন এবং ওভারফ্লো কিছু সমস্যা ছিল। @ ক্রিস জে এর ফিডেলের উপর ভিত্তি করে @ ইয়ানিক্রচোন এবং @ জোয়ানার প্রস্তাবিত পরিবর্তনগুলি নীচের জেসফিডেলে পাওয়া যাবে ।

এটি সিএসএস কোড যা আমার পক্ষে কাজ করেছে:

.modal-dialog {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}
.modal-content {
    height: 100%;
    min-height: 100%;
    height: auto;
    border-radius: 0;
}

Answer 8

আপনার ডিআইভি ট্যাগগুলি নীচের মত সেট করতে হবে।

আরো বিস্তারিত জানার খুঁজুন> http://thedeveloperblog.com/bootstrap-modal-with-full-size-and-scrolling

</style>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
   More Details
</button>
</br>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-content">
        <div class="container">;
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h3 class="modal-title" id="myModalLabel">Modal Title</h3>
          </div>
              <div class="modal-body" >
                Your modal text 
              </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>
    </div>                                      
</div>

Answer 9

সমাধানটির আমার প্রকরণ: (স্ক্যাস)

  .modal {
        .modal-dialog.modal-fs {
            width: 100%;
            margin: 0;
            box-shadow: none;
            height: 100%;
            .modal-content {
                border: none;
                border-radius: 0;
                box-shadow: none;
                box-shadow: none;
                height: 100%;
            }
        }
    }

(Css) ব্যবহার

.modal .modal-dialog.modal-fs {
  width: 100%;
  margin: 0;
  box-shadow: none;
  height: 100%;
}
.modal .modal-dialog.modal-fs .modal-content {
  border: none;
  border-radius: 0;
  box-shadow: none;
  box-shadow: none;
  height: 100%;
}

Answer 10

.modal.in .modal-dialog {
 width:100% !important; 
 min-height: 100%;
 margin: 0 0 0 0 !important;
 bottom: 0px !important;
 top: 0px;
}


.modal-content {
    border:0px solid rgba(0,0,0,.2) !important;
    border-radius: 0px !important;
    -webkit-box-shadow: 0 0px 0px rgba(0,0,0,.5) !important;
    box-shadow: 0 3px 9px rgba(0,0,0,.5) !important;
    height: auto;
    min-height: 100%;
}

.modal-dialog {
 position: fixed !important;
 margin:0px !important;
}

.bootstrap-dialog .modal-header {
    border-top-left-radius: 0px !important; 
    border-top-right-radius: 0px !important;
}


@media (min-width: 768px)
.modal-dialog {
    width: 100% !important;
    margin: 0 !important;
}

Comments

কেন এটি প্রশ্নের উত্তর, তা আরও স্পষ্ট করে ব্যাখ্যা করার চেষ্টা করুন।

— জেরোইন হাইয়ার

Answer 11

এটা ব্যবহার কর:

.modal-full {
    min-width: 100%;
    margin: 0;
}

.modal-full .modal-content {
    min-height: 100vh;
}

এবং তাই:

<div id="myModal" class="modal" role="dialog">
    <div class="modal-dialog modal-full">
        <!-- Modal content-->
        <div class="modal-content ">
            <div class="modal-header ">                    
                <button type="button" class="close" data-dismiss="modal">&times; 
                </button>
                <h4 class="modal-title">hi</h4>
            </div>
            <div class="modal-body">
                <p>Some text in the modal.</p>
            </div>
        </div>

    </div>
</div>