পৃষ্ঠার উপরে বা নীচে স্ক্রল করা অবস্থায় পর্দার মাঝখানে একটি 'ডিভ' রেখেছেন?

Question

আমার পৃষ্ঠায় একটি বোতাম রয়েছে যা ক্লিক করলে divআমার পর্দার মাঝখানে একটি (পপআপ শৈলী) প্রদর্শিত হয়।

আমি divস্ক্রিনের মাঝখানে মাঝখানে নীচের সিএসএস ব্যবহার করছি :

.PopupPanel
{
    border: solid 1px black;
    position: absolute;
    left: 50%;
    top: 50%;
    background-color: white;
    z-index: 100;

    height: 400px;
    margin-top: -200px;

    width: 600px;
    margin-left: -300px;
}

পৃষ্ঠাটি যতক্ষণ না স্ক্রোল না হয় ততক্ষণ এই সিএসএস ঠিকঠাক কাজ করে।

তবে, আমি যদি আমার পৃষ্ঠার নীচে বোতামটি রাখি, এটি ক্লিক করা হয়, তারপরে divউপরের অংশটি প্রদর্শিত হয় এবং ব্যবহারকারীকে এর সামগ্রীগুলি দেখতে স্ক্রোল করতে হয় div।

divপৃষ্ঠাটি স্ক্রোল হওয়া সত্ত্বেও আমি কীভাবে স্ক্রিনের মাঝখানে প্রদর্শিত করব তা জানতে চাই ।

Comments

প্রশ্ন প্রশ্ন। আপনি মার্জিন-শীর্ষটি কেন বিয়োগ করছেন: (200) এবং মার্জিন-বাম আমি মনে করি এটি উচ্চতা এবং প্রস্থের মাধ্যম, তবে পরম কেন্দ্রটি পেতে আমাদের কেন এটি করতে হবে? বাম 50% এবং শীর্ষ 50% কৌতুক করা উচিত নয়?

— jmoon90

@ jmoon90 left: 50%; top: 50%প্যাচসমূহ উপরের কোণায় বাম এর .PopupPanelস্ক্রীনের কেন্দ্রে রয়েছে। এরপরে আমরা এটিটিকে কেন্দ্রস্থলে ফিরে প্রস্থ এবং উচ্চতার অর্ধেক স্থানান্তরিত করি। দেখুন css-tricks.com কেন্দ্র করে

— kub1x

Answer 1

এর পরিবর্তে positionবৈশিষ্ট্যটি পরিবর্তন করুন ।fixedabsolute

Comments

পপ আপ ডিভ এবং স্ক্রিনের চেয়ে বড় এর স্ক্রোল করার দরকার থাকলে কী হবে?

— দার্কবার

মাথায় রাখুন যে এটি সর্বাধিক প্রতিক্রিয়াশীল সমাধান নয় (তবে উপরের সমস্যার জন্য নিখুঁত সমাধান)। চেক getbootstrap.com/javascript/#modals এবং আপনার DevTools সঙ্গে বর্ণন আপনার পপআপ / মোডাল সঙ্গে কাজ সম্পর্কে কিছু চমৎকার ধারনা পেতে।

— কাস ব্লিম

Answer 2

পরিবর্তন position:absolute;করুনposition:fixed;

Answer 3

উদ্ধৃতি : আমি কীভাবে স্ক্রিনটির মাঝখানে ডিভটি প্রদর্শন করতে হয় তা জানতে চাই, ব্যবহারকারী স্ক্রোল করে উপরে / নিচে আছে কিনা।

পরিবর্তন

position: absolute;

প্রতি

position: fixed;

---

এর জন্য position: absoluteএবং এর জন্য ডাব্লু 3 সি স্পেসিফিকেশন position: fixed।

Answer 4

আপনার ঠিক মাত্রা না থাকলেও পর্দার মাঝখানে একটি বাক্স কেনার জন্য আমি একটি নতুন কৌশল পেয়েছি। ধরা যাক আপনি 60% প্রস্থ / 60% উচ্চতা একটি বাক্স চান। এটি কেন্দ্রীভূত করার উপায়টি 2 বাক্স তৈরি করে: একটি "ধারক" বাক্স যে অবস্থানটি বামে থাকে: 50% শীর্ষ: 50%, এবং অভ্যন্তরে বিপরীত অবস্থানের সাথে একটি "পাঠ্য" বাক্স: -50%; শীর্ষ: -50%;

এটি কাজ করে এবং এটি ক্রস ব্রাউজারের সাথে সামঞ্জস্যপূর্ণ।

নীচের কোডটি দেখুন, আপনি সম্ভবত আরও ভাল ব্যাখ্যা পাবেন:

jQuery('.close a, .bg', '#message').on('click', function() {
  jQuery('#message').fadeOut();
  return false;
});

html, body {
  min-height: 100%;
}

#message {
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
}

#message .container {
  height: 60%;
  left: 50%;
  position: absolute;
  top: 50%;
  z-index: 10;
  width: 60%;
}

#message .container .text {
  background: #fff;
  height: 100%;
  left: -50%;
  position: absolute;
  top: -50%;
  width: 100%;
}

#message .bg {
  background: rgba(0, 0, 0, 0.5);
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 9;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="message">
  <div class="container">
    <div class="text">
      <h2>Warning</h2>
      <p>The message</p>
      <p class="close"><a href="#">Close Window</a></p>
    </div>
  </div>
  <div class="bg"></div>
</div>

Answer 5

সঠিক পদ্ধতি

.PopupPanel
{
    border: solid 1px black;
    position: fixed;
    left: 50%;
    top: 50%;
    background-color: white;
    z-index: 100;
    height: 400px;
    margin-top: -200px;

    width: 600px;
    margin-left: -300px;
}