উল্লম্বভাবে বুটস্ট্র্যাপ মডেল উইন্ডোটিকে কেন্দ্র করে

Question

আমি আমার মডেলটি ভিউপোর্টে (মাঝখানে) কেন্দ্র করে রাখতে চাই কিছু সিএসএস বৈশিষ্ট্য যুক্ত করার চেষ্টা করেছি

 .modal { position: fixed; top:50%; left:50%; }   

আমি এই উদাহরণটি ব্যবহার করছি http://jsfiddle.net/rniemeyer/Wjjnd/

আমি চেষ্টা করেছিলাম

$("#MyModal").modal('show').css(
    {
        'margin-top': function () {
            return -($(this).height() / 2);
        },
        'margin-left': function () {
            return -($(this).width() / 2);
        }
    })

Comments

.modal.fade.inপাশাপাশি ওভাররাইড করার চেষ্টা করুন

— haim770

এটি দিয়ে চেষ্টা করুন: github.com/jschr/bootstrap-modal

— জন ম্যাগনোলিয়া

এই zerosixthree.se/… ব্যবহার করে দেখুন: আমি .modal.fade.in {শীর্ষ: 50%; রূপান্তর: অনুবাদ Y (-50%); }

— জোয়ান সেবাস্তিয়ান

যুক্ত ফ্লেক্সবক্স সমাধান ( translateY(-50%)যখন মডেল সামগ্রীগুলি ডিভাইসের উচ্চতার চেয়ে লম্বা হয় তখন একটিকে মডেলের শীর্ষে অ্যাক্সেসযোগ্য করে তোলে)।

— তাও

বুটস্ট্র্যাপ হিসাবে 4 মডেল-সংলাপ কেন্দ্রিক যুক্ত করা হয়েছিল যে এটি আর প্রয়োজন নেই। নীচের উত্তরটি পর্যালোচনা করুন।

— jcaruso

Answer 1

এটি কাজটি করে: http://jsfiddle.net/sRmLV/1140/

এটি একটি সহায়ক-ডিভ এবং কিছু কাস্টম সিএসএস ব্যবহার করে। কোন জাভাস্ক্রিপ্ট বা jQuery প্রয়োজন।

এইচটিএমএল (বুটস্ট্র্যাপের ডেমো-কোডের ভিত্তিতে )

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

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="vertical-alignment-helper">
        <div class="modal-dialog vertical-align-center">
            <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>
</div>

সিএসএস

.vertical-alignment-helper {
    display:table;
    height: 100%;
    width: 100%;
    pointer-events:none; /* This makes sure that we can still click outside of the modal to close it */
}
.vertical-align-center {
    /* To center vertically */
    display: table-cell;
    vertical-align: middle;
    pointer-events:none;
}
.modal-content {
    /* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
    width:inherit;
    max-width:inherit; /* For Bootstrap 4 - to avoid the modal window stretching full width */
    height:inherit;
    /* To center horizontally */
    margin: 0 auto;
    pointer-events: all;
}

Comments

এই সমাধান সহ, উচ্চতার কারণে: 100%; এবং প্রস্থ: 100%; আপনি মডেলগুলি বাইরে ক্লিক করে মডেলগুলি বন্ধ করতে পারবেন না। আপনি কি এই @ রেনস ডি নোবেলের কোনও সমাধানের কথা ভাবতে পারেন?

— pcatre

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

— pcatre

@ প্যাক্যাট্রে, টিপটির জন্য ধন্যবাদ! আমি এই জন্য একটি ঠিক সঙ্গে কোড আপডেট করেছি। পয়েন্টার-ইভেন্টগুলি সেট করা: কিছুই নয়; প্রান্তিককরণ-ক্লাসে কৌশলটি করে। আইই ১১, সর্বশেষ ক্রোম এবং ফায়ারফক্স এবং আইওএস সাফারি পরীক্ষিত।

— আরনোবেল

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

— মাইকেল জি

বুটস্ট্র্যাপ হিসাবে 4 মডেল-সংলাপ কেন্দ্রিক যুক্ত করা হয়েছিল যে এটি আর প্রয়োজন নেই। নীচের উত্তরটি পর্যালোচনা করুন।

— jcaruso

Answer 2

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

(function ($) {
    "use strict";
    function centerModal() {
        $(this).css('display', 'block');
        var $dialog  = $(this).find(".modal-dialog"),
        offset       = ($(window).height() - $dialog.height()) / 2,
        bottomMargin = parseInt($dialog.css('marginBottom'), 10);

        // Make sure you don't hide the top part of the modal w/ a negative margin if it's longer than the screen height, and keep the margin equal to the bottom margin of the modal
        if(offset < bottomMargin) offset = bottomMargin;
        $dialog.css("margin-top", offset);
    }

    $(document).on('show.bs.modal', '.modal', centerModal);
    $(window).on("resize", function () {
        $('.modal:visible').each(centerModal);
    });
}(jQuery));

Comments

এই এক নিখুঁত! $ (ডকুমেন্ট) এর পরিবর্তে। উচ্চতা () এর সঠিকভাবে $ (উইন্ডো) ব্যবহার করুন .উত্তর () লাইনে 4। প্লাস আমি শেষ লাইনটি পরিবর্তন করব: $('.modal:visible').each(centerModal);

— ডেনিস চেমেল

এটা আমার জন্য নিখুঁতভাবে কাজ করে, আপনাকে ধন্যবাদ। যখন আমরা এই কোডটি ব্যবহার করি, তখন আমাদের অবশ্যই মডেল-ডায়ালগের শীর্ষ এবং নীচে প্যাডিং সেট করতে হবে নিখুঁত কেন্দ্রীকরণে p

— মিনা মুরসালি

মোডালটি উইন্ডোর উচ্চতার চেয়ে লম্বা হলে এটি বিরতি দেয়। তাই আমি ডায়লগের মার্জিন-শীর্ষ সেট করার আগে ঠিক নীচের লাইনটি যুক্ত করেছি: if(offset < 0) offset = 0; আমি পুরো ব্লকটিকে একটি উত্তর কেসে সাঁকিয়ে যাচ্ছি যা পরিষ্কার নয়!

— জেটলেজ

নীচের উত্তরে আমি

— মার্ডেলের

পারফেক্ট, অনুপস্থিত ছিল $ (এটি) .সিএসএস ('প্রদর্শন', 'ব্লক'); সমস্ত সময় এবং কেন উচ্চতা 0 ছিল ভেবেছিলেন

— জুনিস গ্রুজিস

Answer 3

আমি আমার অ্যাপ্লিকেশনটির জন্য এটি করেছি। আপনি যদি বুটস্ট্র্যাপ সিএসএস ফাইলের নিম্নোক্ত ক্লাসগুলিতে একবার নজর রাখেন। মডেল-ডায়ালগটিতে 10px এবং @ মিডিয়া স্ক্রিনের ডিফল্ট প্যাডিং থাকে এবং (ন্যূনতম প্রস্থ: 768px) mod আধুনিক সংলাপটির শীর্ষ প্যাডিং 30px এ সেট করা থাকে। সুতরাং আমার কাস্টম সিএসএস ফাইলে আমি মিডিয়া স্ক্রিনের প্রস্থ উল্লেখ না করেই আমার শীর্ষ প্যাডিংটি সমস্ত পর্দার জন্য 15% হিসাবে সেট করেছি। আশাকরি এটা সাহায্য করবে.

.modal-dialog {
  padding-top: 15%;
}

Comments

এটি কেবলমাত্র ছোট অ্যালার্ট বাক্সগুলির জন্য কাজ করে, এবং লার্জ বাক্সগুলির জন্য কাজ করে না

— মিনা মুরসালি

আপনি কেবলমাত্র ছোট ছোট মডেলগুলিতে আবেদন করতে পারেন:.modal-dialog.modal-sm { padding-top:15%; }

— ডঙ্ক

Answer 4

সমস্ত HTML5 ব্রাউজারের জন্য আমি খুঁজে পেয়েছি সেরা উপায়:

body.modal-open .modal {
    display: flex !important;
    height: 100%;
} 

body.modal-open .modal .modal-dialog {
    margin: auto;
}

Comments

আমি এই সমাধানটি খুব পছন্দ করেছিলাম। নিশ্চিত হতে পারছি না ডেস্কটপ বা Safari- এর পুরোনো সংস্করণগুলি কিন্তু এটি সম্পর্কে আইওএস 8. উপর জরিমানা মনে করা হয়

— নিকোলাস Galler

হ্যাঁ আমি @ নিকোলাসগ্যালারের সাথে একমত এটি আমার পক্ষেও ভাল কাজ করে। আমি ক্রোম এবং ফায়ারফক্সে পরীক্ষা করেছি। এটা ভাল কাজ করে.

— মঞ্জুনাথ রেড্ডি

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

— ক্রেগ হর্ষবার্গার

বন্ধ করুন, তবে পৃষ্ঠায় একাধিক উপস্থিতি থাকলে এটি মডেলগুলি বন্ধ করতে সক্ষম হয়ে যায়। ঠিক করার জন্য নীচে আমার উত্তর দেখুন।

— রবার্ট ম্যাককি

আপডেট করুন: যোগ করার পদ্ধতি align-items: center;থেকে body.modal-open .modalকাজ মনে হয়।

— বার্নি

Answer 5

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="table">
        <div class="table-cell">
            <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>
    </div>
</div>

// স্টাইলস

.table {
 display: table;
 height:100%;
}
.table-cell {
display: table-cell;
vertical-align: middle;
}

Comments

এটি সর্বজনীন উত্তর। আমি জানি না কেন কেন কেউ এই জন্য ভোট দেয়নি।

— সিএসবা তোথ

আমি এক ডজন প্রস্তাব সহ কমপক্ষে 4 এসও এন্ট্রি পেয়েছি। বিটিডাব্লু, এইচটিএমএল 5 এর বয়সে এটি কোনও কার্যকারিতার মধ্যে অন্তত কিছু ফ্রেমে তৈরি করা উচিত। পাচারের বদলে।

— সিএসবা তোথ

এছাড়াও নোট করুন: আপনি প্রস্থ বলেছেন: টেবিল শৈলীর জন্য 100%, আপনি অনুভূমিক কেন্দ্রীকরণ পাবেন (যদি মোডাল ওভারফ্লো লুকানো না থাকে তবে)।

— সিএসবা তোথ

এখন পর্যন্ত সেরা উত্তর। এটি একটি স্ক্রোলবার তৈরি করে তবে আপনি এটি তৈরি করে অক্ষম করতে পারেন। আধুনিক-ওপেন। আধুনিক al ওভারফ্লো-ওয়াই: লুকানো; }

— ক্রিস্টোফ

Answer 6

শীর্ষস্থানীয় প্যারামিটারটি আপনার কাস্টম ঘোষণায় মান সেট করতে বাধ্য করতে, .modal.fade.in এ ওভাররাইড করা হচ্ছে, !importantশীর্ষের পরে কীওয়ার্ড যুক্ত করুন । এটি ব্রাউজারটিকে সেই মানটি ব্যবহার করতে এবং কীওয়ার্ডের জন্য অন্য কোনও মান উপেক্ষা করতে বাধ্য করে। এটির এমন একটি অপূর্ণতা রয়েছে যা আপনি অন্য কোথাও মানটিকে ওভাররাইড করতে পারবেন না।

.modal {
    position: fixed;
    top: 50% !important;
    left: 50%;
}

Comments

মডেলটির ব্যাকগ্রাউন্ডে ক্লিক করার সময় এটি আমাকে মডেলটি বন্ধ করতে বাধা দেয়।

— স্কট সিম্পসন

Answer 7

বুটস্ট্র্যাপ 4 হিসাবে জাভাস্ক্রিপ্ট ছাড়াই আপনার অর্জনের জন্য নিম্নলিখিত ক্লাসটি যুক্ত করা হয়েছিল।

modal-dialog-centered

আপনি তাদের ডকুমেন্টেশন এখানে পেতে পারেন ।

মোডেলটিকে উল্লম্বভাবে কেন্দ্র করতে আপনাকে .odal- ডায়ালগ-কেন্দ্রিক। মডেল-ডায়লগ উভয়ই যুক্ত করতে হবে বলে নির্দেশ করার জন্য vd ধন্যবাদ।

Comments

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

— broc.seib

উভয় মডেল-সংলাপ এবং মডেল-সংলাপ কেন্দ্রিক যুক্ত করে আরও ভাল ফলাফল হয়েছে

— vd

@vd thats ডকুমেন্টেশনটি বুঝে "মোডালটিকে উল্লম্বভাবে কেন্দ্রের জন্য মোডাল-ডায়লগ-কেন্দ্রিক। আমি আমার উত্তর আপডেট করব এবং এটি প্রতিফলিত করতে তাদের পক্ষে যারা এটি ধরেনি।

— jcaruso

Answer 8

এটি আমার পক্ষে নিখুঁতভাবে কাজ করে:

.modal {
text-align: center;
padding: 0!important;
}

.modal:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -4px;
}

.modal-dialog {
display: inline-block;
text-align: left;
vertical-align: middle;
}

সম্পূর্ণ ডেমো URL: https://codepen.io/dimbslmh/full/mKfCc

Answer 9

তুমি ব্যবহার করতে পার:

.modal {
    position: fixed;
    top: 50% !important;
    left: 50%;
    transform: translate(-50%, -50%);
}

এটি উভয় উল্লম্ব এবং অনুভূমিকভাবে কেন্দ্র করে।

Comments

এটি ফ্লেক্স ব্যবহার না করে সিএসএসের সাথে সত্য "কীভাবে কিছু কেন্দ্র করবেন"। প্রসঙ্গটি বুটস্ট্র্যাপ বা একটি মডেল তা অপ্রাসঙ্গিক হওয়া উচিত। অন্য সমস্ত উত্তরগুলি খুব বেশি ওভারকিল।

— ESR

এই পদ্ধতির সাহায্যে, যদি মডেলটি ডিভাইসের স্ক্রিনের উচ্চতার চেয়ে লম্বা হয় তবে মডেলের শীর্ষটি অ্যাক্সেসযোগ্য হয়ে যায়।

— তাও

Answer 10

কারণ এখানে বেশিরভাগ উত্তর কাজ করে না, বা কেবল আংশিকভাবে কাজ করে:

body.modal-open .modal[style]:not([style='display: none;']) {
    display: flex !important;
    height: 100%;
} 

body.modal-open .modal[style]:not([style='display: none;']) .modal-dialog {
    margin: auto;
}

সমস্ত মডেলের পরিবর্তে বর্তমানে সক্রিয় থাকা মডেলগুলিতে কেবল শৈলী প্রয়োগ করতে আপনাকে [শৈলী] নির্বাচনকারী ব্যবহার করতে হবে। .inদুর্দান্ত হতে পারত, তবে এটি রূপান্তর সম্পূর্ণ হওয়ার পরে যুক্ত হয়েছিল বলে মনে হয় যা খুব দেরি হয়ে গেছে এবং কিছু সত্যই খারাপ রূপান্তর ঘটায়। ভাগ্যক্রমে এটি প্রদর্শিত হয় বুটস্ট্র্যাপ সর্বদা মডেলের উপর একটি শৈলীর বৈশিষ্ট্য প্রয়োগ করে ঠিক যেমন এটি দেখাতে শুরু করে তাই এটি কিছুটা হ্যাকি, তবে এটি কার্যকর।

:not([style='display: none;'])অংশ সঠিকভাবে শৈলী বৈশিষ্ট্য সরানোর না এবং এর পরিবর্তে কেউ শৈলী ডিসপ্লে সেটিং যখন আপনি ডায়ালগটি বন্ধ বুটস্ট্র্যাপ করার জন্য একটি কার্যসংক্রান্ত নেই।

Comments

দুর্দান্ত, আপনাকে ধন্যবাদ। এটি আসলে একমাত্র কাজ যা

— ২০১ worked সালে

4 বছর কেটে গেছে। এখনও দরকারী। ধন্যবাদ বন্ধু!

— হাসান নোমানি

Answer 11

আপনি বুটস্ট্র্যাপ 3 মডেলের মতো উল্লম্ব সারিবদ্ধ কেন্দ্র অর্জন করতে পারেন:

.modal-vertical-centered {
  transform: translate(0, 50%) !important;
  -ms-transform: translate(0, 50%) !important; /* IE 9 */
  -webkit-transform: translate(0, 50%) !important; /* Safari and Chrome */
}

এবং এই CSS ক্লাসটিকে "মডেল-ডায়ালগ" ধারকটিতে যুক্ত করুন

<div class="modal-dialog modal-vertical-centered">
...

জেএসফিডাল কাজের উদাহরণ: http://jsfiddle.net/U4NRx/

Comments

এটি ঠিক কীভাবে ডায়লগটিকে উল্লম্বভাবে কেন্দ্র করে?

— gklpak

বেশিরভাগ জায়গায় দুর্দান্ত কাজ করে তবে অ্যান্ড্রয়েড ৪.৪ এর চেয়ে কম মোড়ানো এইচটিএমএল 5 অ্যাপ্লিকেশনগুলিতে কাজ করে না।

— জোশ

আমার মডেলটি এটির সাথে পৃষ্ঠায় ছিল

— ডোরিয়ান

হা! আমি ব্যবহার করি: .modal.fade.in {শীর্ষ: 50%; রূপান্তর: অনুবাদ Y (-50%); }

— জোয়ান সেবাস্তিয়ান

কেবল 50% থেকে 15% পরিবর্তন করুন এবং তারপরে ডায়লগটি উইন্ডোর মাঝখানে থাকবে। .মডাল-উল্লম্ব-কেন্দ্রিক {রূপান্তর: অনুবাদ (0, 15%)! গুরুত্বপূর্ণ; -এমএস-ট্রান্সফর্ম: অনুবাদ (0, 15%)! গুরুত্বপূর্ণ; / * আইই 9 /-ওয়েবেকিট-ট্রান্সফর্ম: অনুবাদ (0, 15%)! গুরুত্বপূর্ণ; / সাফারি এবং ক্রোম * /}

— হাইমাই

Answer 12

এটি করার সবচেয়ে সহজ এবং সহজ উপায় হ'ল ফ্লেক্সবক্স ব্যবহার করা! নীচে স্ক্রিনের কেন্দ্রস্থলে একটি বুটস্ট্র্যাপ 3 মডেলটি উল্লম্বভাবে সারিবদ্ধ করবে এবং এখানে পোস্ট হওয়া অন্যান্য সমাধানগুলির তুলনায় অনেক পরিস্কার এবং সহজ simp

body.modal-open .modal.in {
  display: flex !important;
  align-items: center;
}

দ্রষ্টব্য: যদিও এটি সহজ সমাধান, এটি ব্রাউজার সমর্থনের কারণে সবার পক্ষে কাজ নাও করতে পারে: http://caniuse.com/#feat=flexbox

দেখে মনে হচ্ছে (যথারীতি) আইই পিছনে। আমার ক্ষেত্রে, আমি নিজের বা ক্লায়েন্টদের জন্য যে সমস্ত পণ্য বিকাশ করি তা হ'ল আই 10 +। (আইই এর পুরানো সংস্করণগুলিকে সমর্থন করে যখন এটি প্রকৃতপক্ষে পণ্যটি বিকাশ করতে এবং এমভিপি দ্রুত আউট পেতে ব্যবহৃত হতে পারে তখন উন্নয়নের সময়কে বিনিয়োগের জন্য বিনিয়োগ করা বুদ্ধিমান বুদ্ধিমানের কাজ নয়)। এটি অবশ্যই সবার কাছে বিলাসিতা নয়।

আমি বড় বড় সাইটগুলি দেখেছি যে ফ্লেক্সবক্স সমর্থিত কিনা এবং এটি পৃষ্ঠার বডিতে একটি শ্রেণি প্রয়োগ করে - তবে ফ্রন্ট-এন্ড ইঞ্জিনিয়ারিংয়ের সেই স্তরটি বেশ শক্তিশালী এবং আপনার এখনও একটি ফলব্যাকের দরকার পড়ে need

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

পিএস - এই সাইটটি আমাকে পুরোপুরি ফ্লেক্সবক্সকে উপলব্ধি করতে এবং এটি যে কোনও ব্যবহারের ক্ষেত্রে প্রয়োগ করতে সহায়তা করেছে: http://flexboxfroggy.com/

সম্পাদনা: এক পৃষ্ঠায় দুটি মডেলের ক্ষেত্রে, এটি .modal.in এ প্রয়োগ করা উচিত

Comments

এটি অন্যথায় ভাল কাজ করে তবে ক্লোজিং অ্যানিমেশনটি ভাল দেখাচ্ছে না।

— ব্যবহারকারী2061057

CSS3 রূপান্তরগুলি সহ কোনও অ্যানিমেশনটি সক্ষম করতে সক্ষম হওয়া উচিত?

— গ্রেগ ব্লাস

Answer 13

সুবিধাদি:

• এমনকি ডিভাইসের চেয়ে লম্বা অবস্থায় মোডাল সামগ্রীগুলি অ্যাক্সেসযোগ্য
• ব্যবহার করে না display:table-cell(এটি বিন্যাসের জন্য বোঝানো হয়নি)
• ডিফল্ট বুটস্ট্র্যাপ 3 মডেলে কোনও পরিবর্তন প্রয়োজন হয় না markup
• পজিশনিং খাঁটি সিএসএস। এর নীচে এবং উপরে ক্লিক / ট্যাপে মডেলটি বন্ধ করার জন্য জেএস যুক্ত করা হয়েছে
• আমি SCSSযারা ব্যবহার করে gulpবা তাদের জন্য প্রি-প্রিক্সড অন্তর্ভুক্ত করেছিgrunt

// closes the modal on click/tap below/above the modal

$('.modal-dialog').on('click tap', function(e){
    if (e.target.classList.contains('modal-dialog')) {
    $('.modal').modal('hide');
  }
})

.modal-dialog {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
     -moz-box-orient: vertical;
     -moz-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
     -moz-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  overflow-y: auto;
  min-height: -webkit-calc(100vh - 60px);
  min-height: -moz-calc(100vh - 60px);
  min-height: calc(100vh - 60px);
}
@media (max-width: 767px) {
  .modal-dialog {
    min-height: -webkit-calc(100vh - 20px);
    min-height: -moz-calc(100vh - 20px);
    min-height: calc(100vh - 20px);
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


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

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <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>
</div>

দ্রষ্টব্য : আমি বুটস্ট্রাপ 3 এর সর্বশেষ চশমা সহ এই উত্তরটি আপ টু ডেট রাখতে চাইছি একটি বুটস্ট্র্যাপ 4 সমাধানের জন্য এই উত্তরটি দেখুন (আপাতত তারা কম-বেশি একইরকম, তবে সময়ের সাথে সাথে তারা বিচ্ছিন্ন হতে পারে)। আপনি যদি এটিতে কোনও বাগ বা সমস্যা খুঁজে পান তবে আমাকে জানান এবং আমি আপডেট করব। ধন্যবাদ।

---

পরিষ্কার, আন-প্রিফিক্সড SCSS( gulp/ এর সাথে ব্যবহারের জন্য grunt):

.modal-dialog {
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow-y: auto;
  min-height: calc(100vh - 60px);
  @media (max-width: 767px) {
    min-height: calc(100vh - 20px);
  }
}

Comments

সেরা সমাধান আইএমও।

— র‌্যাডমেশন

Answer 14

তবুও অন্য একটি সিএসএস সমাধান। ভিউ পোর্টের চেয়ে বড় পপআপগুলির জন্য কাজ করে না।

.modal-dialog {
    position: absolute;
    right: 0;
    left: 0;
    margin-top: 0;
    margin-bottom: 0; 
}
.modal.fade .modal-dialog {
    transition: top 0.4s ease-out;
    transform: translate(0, -50%);
    top: 0;
}
.modal.in .modal-dialog {
    transform: translate(0, -50%);
    top: 50%;
}

ইন .modal-dialogবর্গ পরম (আপেক্ষিক থেকে) এর অবস্থান অগ্রাহ্য এবং কন্টেন্ট কেঁদ্রীকরণright:0, left: 0

অনুবাদ না .modal.fade .modal-dialog , .modal.in .modal-dialogকরে ট্রানজিশন অ্যানিমেশন সেট করতে Intop

margin-topছোট পপআপের ক্ষেত্রে কেন্দ্রের নীচে কিছুটা নীচে পপআপটি সরানো হয় এবং দীর্ঘ পপআপগুলির ক্ষেত্রে, মডেলটি হেডারের সাথে আটকে থাকে। অত: পরmargin-top:0, margin-bottom:0

এটি আরও পরিমার্জন করা প্রয়োজন।

Answer 15

যারা কৌণিক-ইউআই বুটস্ট্র্যাপ ব্যবহার করছেন তাদের উপরের তথ্যের উপর ভিত্তি করে নীচের ক্লাসগুলি যুক্ত করতে পারেন:

দ্রষ্টব্য: অন্য কোনও পরিবর্তনের প্রয়োজন নেই এবং এটি সমস্ত মডেলগুলিকে সমাধান করবে।

// The 3 below classes have been placed to make the modal vertically centered
.modal-open .modal{
    display:table !important;
    height: 100%;
    width: 100%;
    pointer-events:none; /* This makes sure that we can still click outside of the modal to close it */
}

.modal-dialog{
    display: table-cell;
    vertical-align: middle;
    pointer-events: none;
}

.modal-content {
    /* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
    width:inherit;
    height:inherit;
    /* To center horizontally */
    margin: 0 auto;
    pointer-events: all;
}

Answer 16

জাভাস্ক্রিপ্ট আমাদের প্রয়োজন নেই। বুস্ট্র্যাপ মোডাল যুক্ত হয় .in বর্গ প্রদর্শিত হয়। এই ক্লাসের সংমিশ্রণটি মোডালক্লাসনেম.ফ্যাড.ইন.এ ফ্লেক্স সিএসএসের সাথে সংশোধন করুন এবং আপনি হয়ে গেছেন।

আপনার মডেলটি উল্লম্ব এবং অনুভূমিকভাবে কেন্দ্র করে এই CSS যুক্ত করুন add

.modal.fade.in {
    display: flex !important;
    justify-content: center;
    align-items: center;
}
.modal.fade.in .modal-dialog {
    width: 100%;
}

Answer 17

আমার পছন্দ, সামান্য সিএসএস: (আইই 8 তে কাজ করছে না)

.modal.fade .modal-dialog {
    transform: translate(-50%, -80%);
}

.modal.in .modal-dialog {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin-top: 0px;
}

মডেলটি কীভাবে প্রদর্শিত হয় তা পরিবর্তনের জন্য আপনি প্রথম নিয়মের সাথে খেলতে পারেন।

ব্যবহার: বুটস্ট্র্যাপ 3.3.4

Answer 18

আপনার বিদ্যমান একটিতে কেবল নিম্নলিখিত সিএসএস যুক্ত করুন, এটি আমার পক্ষে ভাল কাজ করে

.modal {
  text-align: center;
}
@media screen and (min-width: 768px) {
    .modal:before {
      display: inline-block;
      vertical-align: middle;
      content: " ";
      height: 100%;
    }
}
.modal-dialog {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
}

Answer 19

অরণির উত্তরের ভিত্তিতে , তবে পৃষ্ঠা স্ক্রোলের জন্য অ্যাকাউন্টিং।

(function($) {
    "use strict";
    function positionModals(e) {
        var $this = $(this).css('display', 'block'),
            $window = $(window),
            $dialog = $this.find('.modal-dialog'),
            offset = ($window.height() - $window.scrollTop() - $dialog.height()) / 2,
            marginBottom = parseInt($dialog.css('margin-bottom'), 10);

        $dialog.css('margin-top', offset < marginBottom ? marginBottom : offset);
    }

    $(document).on('show.bs.modal', '.modal', positionModals);

    $(window).on('resize', function(e) {
        $('.modal:visible').each(positionModals);
    });
}(jQuery));

Answer 20

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

http://plnkr.co/edit/JCGVZQ?p=preview

বুটস্ট্র্যাপ সিএসএসের চেয়ে উচ্চতর স্পেসিফিকেশন অর্জনের জন্য .modal- ডায়ালগ ক্লাসের সাথে DIV ধারকটিতে কিছু সিএসএস ক্লাস যুক্ত করুন, যেমন। কেন্দ্রে।

এইচটিএমএল

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog centered modal-lg">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

এবং এটি তৈরি করুন।

সিএসএস

.modal .modal-dialog.centered {
    position: fixed;
    bottom: 50%;
    right: 50%;
    transform: translate(50%, 50%);
}

অথবা এমনকি ফ্লেক্সবক্স ব্যবহার করে আরও সহজ।

সিএসএস

.modal {
    display: flex;
    align-items: center;
    justify-content: center;
}

Comments

এই ফ্লেক্সবক্স সংস্করণটি প্রত্যাশার মতো কাজ করে না। সর্বশেষতম ক্রোম (52.0.x) এর উপর পরীক্ষা করা, .ডমাল-ডায়ালগটি সঠিকভাবে কেন্দ্র করে তবে এর সামগ্রীর মিথস্ক্রিয়াটি পুরানো জায়গায় (অদ্ভুতভাবে) হিমশীতল বলে মনে হচ্ছে। তবে, আপনি এই কৌশলটি সরাসরি। মডেল-ডায়ালগ (মোডাল নয়) তে ব্যবহার করার চেষ্টা করতে পারেন এবং অন্য কয়েকটি বৈশিষ্ট্য সহ এটি কার্যকর বলে মনে হচ্ছে। =)

— জিওভান্নিপ্ডস

Answer 21

.modal.in .modal-dialog {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

Answer 22

এটি BS3 এ কাজ করে, ভি 2-তে পরীক্ষিত নয়। এটি মডেলকে উল্লম্বভাবে কেন্দ্র করে। মনে রাখবেন যে এটি সেখানে রূপান্তরিত হবে - আপনি যদি এটির জন্য সিএসএস transitionসম্পত্তি সম্পাদনা করতে পজিশনে উপস্থিত হতে চান.modal-dialog

centerModal = function() {
    var $dialog = $(this).find(".modal-dialog"),
        offset = ($(window).height() - $dialog.height()) / 2;

    // Center modal vertically in window
    $dialog.css({
        'transform': 'translateY(' + offset + 'px) !important',
    });
};

$('.modal').on('shown.bs.modal', centerModal);
$(window).on("resize", function() {
    $('.modal').each(centerModal);
});

Answer 23

e(document).on('show.bs.modal', function () {
        if($winWidth < $(window).width()){
            $('body.modal-open,.navbar-fixed-top,.navbar-fixed-bottom').css('marginRight',$(window).width()-$winWidth)
        }
    });
    e(document).on('hidden.bs.modal', function () {
        $('body,.navbar-fixed-top,.navbar-fixed-bottom').css('marginRight',0)
    });

Comments

আপনার উত্তরটিতে 'ই' ফাংশনটি কী তা আপনি পরিষ্কার করতে পারেন?

— মাইকেল বাটলার

Answer 24

এটি অরণির উত্তর নেয় এবং যদি মডেলটি পর্দার উচ্চতার চেয়ে লম্বা হয় তবে তা কাজ করে:

function centerModal() {
    $(this).css('display', 'block');
    var $dialog = $(this).find(".modal-dialog");
    var offset = ($(window).height() - $dialog.height()) / 2;
    //Make sure you don't hide the top part of the modal w/ a negative margin if it's longer than the screen height, and keep the margin equal to the bottom margin of the modal
    var bottomMargin = $dialog.css('marginBottom');
    bottomMargin = parseInt(bottomMargin);
    if(offset < bottomMargin) offset = bottomMargin;
    $dialog.css("margin-top", offset);
}

$('.modal').on('show.bs.modal', centerModal);
$(window).on("resize", function () {
    $('.modal:visible').each(centerModal);
});

Comments

আরে @ জেটলেজ আপনি কেন আরনির উত্তরটি এটিকে অন্তর্ভুক্ত করতে সম্পাদনা করেন না? আপনি তার কোডে একটি বড় বাগ সমাধান করেছেন।

— pcatre

@ প্যাক্যাট্রে - আমি জানতাম না যে আমি সম্পাদনাগুলি জমা দিতে পারি! এটি নির্দেশ করার জন্য ধন্যবাদ

— jetlej

Answer 25

বুটস্ট্র্যাপ মোডাল.জেএসে উল্লম্ব মডেল সেন্টারিং যুক্ত করতে আমি ফাংশনটির শেষে এটি যুক্ত করেছি Modal.prototype.show:

var $modalDialog = $('.modal-dialog'),
        modalHeight = $modalDialog.height(),
        browserHeight = window.innerHeight;

    $modalDialog.css({'margin-top' : modalHeight >= browserHeight ? 0 : (browserHeight - modalHeight)/2});

Comments

পৃষ্ঠার আকার পরিবর্তন বা এর অভ্যন্তরের স্টাফগুলি প্রসারিত / সংকুচিত হওয়ার কারণে ডায়ালগটি একবার প্রদর্শিত হলে উচ্চতা পরিবর্তন করে well

— দিরবাইও

Answer 26

মোডালটি ভার্চ্যালি মিডিল অল ডায়ালগটি সারিবদ্ধ করতে।

/* বিঃদ্রঃ:

1. আপনার নির্বাচক নিয়োগের প্রয়োজন নেই, এটি ডকুমেন্ট থেকে সমস্ত মডেল সন্ধান করবে এবং এটি উল্লম্বভাবে মাঝখানে তৈরি করবে

২. মাঝখানে কিছু নির্দিষ্ট মডেলকে এটিকে কেন্দ্র হিসাবে ব্যবহার করতে পারবেন যাতে আপনি ব্যবহার করতে পারেন: ক্লিক ইভেন্টে নির্বাচক নয়

* /

 $( "[data-toggle='modal']" ).click(function(){
     var d_tar = $(this).attr('data-target'); 
     $(d_tar).show();   
     var modal_he = $(d_tar).find('.modal-dialog .modal-content').height(); 
     var win_height = $(window).height();
     var marr = win_height - modal_he;
     $('.modal-dialog').css('margin-top',marr/2);
  });

মিলন পান্ড্য থেকে

Answer 27

এই সাধারণ স্ক্রিপ্টটি ব্যবহার করুন যা মডেলগুলিকে কেন্দ্র করে।

আপনি যদি চান তবে কেবলমাত্র কয়েকটি মডেলের কার্যকারিতা সীমাবদ্ধ করতে আপনি একটি কাস্টম ক্লাস (উদাহরণ: .modal.modal-vcenter এর পরিবর্তে মোডালের পরিবর্তে) সেট করতে পারেন।

var modalVerticalCenterClass = ".modal";

function centerModals($element) {
    var $modals;
    if ($element.length) {
      $modals = $element;
    } else {
    $modals = $(modalVerticalCenterClass + ':visible');
}
$modals.each( function(i) {
    var $clone = $(this).clone().css('display', 'block').appendTo('body');
    var top = Math.round(($clone.height() - $clone.find('.modal-content').height()) / 2);
    top = top > 0 ? top : 0;
    $clone.remove();
    $(this).find('.modal-content').css("margin-top", top);
});
}
$(modalVerticalCenterClass).on('show.bs.modal', function(e) {
    centerModals($(this));
});
$(window).on('resize', centerModals);

মডেলের অনুভূমিক ব্যবধানের জন্য এই সিএসএস ফিক্স যুক্ত করুন; আমরা মডেলগুলিতে স্ক্রোলটি প্রদর্শন করি, বুটস্ট্র্যাপ দ্বারা বডি স্ক্রোলগুলি স্বয়ংক্রিয়ভাবে লুকানো থাকে:

/* scroll fixes */
.modal-open .modal {
  padding-left: 0px !important;
  padding-right: 0px !important;
  overflow-y: scroll;
}

Answer 28

এই প্রশ্নের আর একটি সিএসএস উত্তর ...
এই সমাধানটি কেবলমাত্র এর বাইরে ক্লিক করে মডেলটি বন্ধ করার ক্ষমতা বজায় রেখে কেবল পছন্দসই প্রভাব অর্জন করতে সিএসএস ব্যবহার করে। এটি আপনাকে .modal-contentউচ্চতা এবং প্রস্থ সর্বাধিক সেট করার অনুমতি দেয় যাতে আপনার পপ-আপ ভিউপোর্টের বাইরে না বাড়তে পারে। মডেল আকারের বাইরে সামগ্রীগুলি বাড়লে একটি স্ক্রোল স্বয়ংক্রিয়ভাবে উপস্থিত হবে।

দ্রষ্টব্য: সঠিকভাবে কাজ করার জন্য
প্রস্তাবিত বুটস্ট্র্যাপ .modal-dialog divবাদ দেওয়া উচিত (কোনও কিছু ভেঙে যাবে বলে মনে হয় না)। ক্রোম ৫১ এবং আইই ১১. সিএসএস কোডে পরীক্ষিত

:

.modal {
   height: 100%;
   width: 100%;
}

.modal-content {
   margin: 0 auto;
   max-height: 600px;
   max-width: 50%;
   overflow: auto;
   transform: translateY(-50%);
}

সম্পাদনা করুন:.modal-dialog বর্গ আপনার চয়ন করা হোক বা না হোক একটি ব্যবহারকারী মোডাল নিজেই বাইরে ক্লিক করে মোডাল বন্ধ করতে পারেন। বেশিরভাগ মডেলের স্পষ্টতই 'ক্লোজ' বা 'বাতিল' বোতাম থাকে। এই workaround ব্যবহার করার সময় এটি মনে রাখবেন।

Answer 29

প্রস্থ এবং উচ্চতার সাথে আপনার মডেলকে কেন্দ্রিয় করার সর্বোত্তম সমাধান হ'ল সিএসএস অ্যাড এবং মডেলগুলিতে এই 'কেন্দ্রীভূত' হিসাবে একটি শ্রেণি হিসাবে যুক্ত করুন ..

.centralize{
   position:absolute;
   left:50%;
   top:50%;

   background-color:#fff;
   transform: translate(-50%, -50%);
   width: 40%; //specify watever u want
   height: 50%;
   }

Answer 30

উলম্ব কেন্দ্রিক উল্লম্বভাবে মোডাল কেন্দ্রে .modal-ডায়ালগ-কেন্দ্রিক .modal-ডায়ালগ যোগ করুন

ডেমো মডেল চালু করুন

<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalCenterTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>