নেটিভ মোডাল পজিশনিংয়ের জন্য সিএসএস পপওভার এপিআই-এর শক্তি উন্মোচন করুন। এই বিস্তারিত গাইডটি এপিআই-এর বৈশিষ্ট্য, সুবিধা এবং বাস্তব উদাহরণসহ এর প্রয়োগ নিয়ে আলোচনা করে।
সিএসএস পপওভার এপিআই: নেটিভ মোডাল পজিশনিং ব্যাখ্যা করা হলো
সিএসএস পপওভার এপিআই ওয়েব প্ল্যাটফর্মের একটি তুলনামূলকভাবে নতুন সংযোজন, যা এইচটিএমএল এবং সিএসএস-এ সরাসরি মোডালসহ পপওভার তৈরি ও পরিচালনা করার একটি মানসম্মত উপায় সরবরাহ করে। এটি জটিল জাভাস্ক্রিপ্ট সমাধানের প্রয়োজনীয়তা দূর করে এবং অ্যাক্সেসিবিলিটি উন্নত করে। এই নিবন্ধটি পপওভার এপিআই-এর গভীরে প্রবেশ করে, এর মোডাল পজিশনিং ক্ষমতার উপর আলোকপাত করে এবং ব্যবহারিক উদাহরণ প্রদান করে।
সিএসএস পপওভার এপিআই কী?
পপওভার এপিআই এমন কিছু অ্যাট্রিবিউট এবং সিএসএস প্রপার্টি সরবরাহ করে যা ডেভেলপারদের জাভাস্ক্রিপ্টের উপর বেশি নির্ভর না করেই অ্যাক্সেসিবল, মানসম্মত পপওভার তৈরি করতে সক্ষম করে। এর লক্ষ্য হলো টুলটিপ, ড্রপডাউন মেনু, সিলেক্ট বক্স এবং সবচেয়ে গুরুত্বপূর্ণভাবে, মোডালের মতো সাধারণ ইউআই উপাদান তৈরির প্রক্রিয়া সহজ করা।
পপওভার এপিআই-এর মূল বৈশিষ্ট্যগুলোর মধ্যে রয়েছে:
- নেটিভ অ্যাক্সেসিবিলিটি: পপওভারগুলো স্ক্রিন রিডার এবং কীবোর্ড ব্যবহারকারীদের জন্য স্বয়ংক্রিয়ভাবে অ্যাক্সেসিবল হয়।
- সরল মার্কআপ:
popover
এবংpopovertarget
এর মতো এইচটিএমএল অ্যাট্রিবিউট ব্যবহার করে, আপনি ন্যূনতম কোড দিয়ে পপওভার তৈরি করতে পারেন। - সিএসএস স্টাইলিং: পপওভারগুলোকে স্ট্যান্ডার্ড সিএসএস প্রপার্টি ব্যবহার করে স্টাইল করা যায়, যা তাদের চেহারার উপর সম্পূর্ণ নিয়ন্ত্রণ প্রদান করে।
- স্বয়ংক্রিয় ব্যবস্থাপনা: এপিআই শো/হাইড লজিক, ফোকাস ট্র্যাপিং এবং ব্যাকড্রপ ডিসমিসাল পরিচালনা করে।
মোডাল পজিশনিং বোঝা
মোডালগুলো গুরুত্বপূর্ণ তথ্য প্রদর্শন বা ব্যবহারকারীর ইন্টারঅ্যাকশনের জন্য একটি অপরিহার্য ইউআই উপাদান। ব্যবহারযোগ্যতা এবং ভিজ্যুয়াল আকর্ষণের জন্য সঠিক পজিশনিং অত্যন্ত গুরুত্বপূর্ণ। পপওভার এপিআই মোডালের স্থান নিয়ন্ত্রণের জন্য বেশ কয়েকটি বিকল্প সরবরাহ করে।
ডিফল্ট পজিশনিং
ডিফল্টভাবে, পপওভার এপিআই মোডালগুলোকে ভিউপোর্টের কেন্দ্রে স্থাপন করে। এটি একটি যুক্তিসঙ্গত সূচনা বিন্দু, তবে প্রায়শই আপনি স্থানের উপর আরও নিয়ন্ত্রণ চাইবেন। এই ডিফল্ট আচরণ বিভিন্ন ব্রাউজার এবং প্ল্যাটফর্মে সামঞ্জস্যপূর্ণ, যা বিশ্বব্যাপী ব্যবহারকারীদের জন্য একটি বেসলাইন ব্যবহারযোগ্যতা নিশ্চিত করে। অনেক সংস্কৃতিতে, গুরুত্বপূর্ণ তথ্যকে কেন্দ্রে রাখা হলো পক্ষপাতহীনভাবে উপস্থাপন করার একটি উপায়। তবে, বিভিন্ন সংস্কৃতিতে ইউএক্স ফ্লো-এর জন্য বিভিন্ন প্রত্যাশা থাকে, তাই আপনি সেই প্রত্যাশাগুলো প্রতিফলিত করতে পজিশনিং সামঞ্জস্য করতে চাইতে পারেন। উদাহরণস্বরূপ, কিছু ডান-থেকে-বামে (RTL) ভাষার বাম-থেকে-ডানে (LTR) ভাষার তুলনায় খুব ভিন্ন ইউএক্স থাকে।
সিএসএস দিয়ে পজিশনিং কাস্টমাইজ করা
পপওভার এপিআই আপনাকে স্ট্যান্ডার্ড সিএসএস প্রপার্টি ব্যবহার করে আপনার মোডালের অবস্থান কাস্টমাইজ করার অনুমতি দেয়। এখানে আপনি কীভাবে স্থান নিয়ন্ত্রণ করতে পারেন তা দেখানো হলো:
position: fixed;
ব্যবহার করে
position: fixed;
সেট করা আপনাকে ভিউপোর্টের সাপেক্ষে মোডালটিকে পজিশন করতে দেয়। তারপর আপনি top
, right
, bottom
, এবং left
প্রপার্টি ব্যবহার করে এর অবস্থান সঠিকভাবে নিয়ন্ত্রণ করতে পারেন।
[popover] {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* Other styling */
}
এই উদাহরণটি মোডালটিকে ভিউপোর্টের ঠিক কেন্দ্রে স্থাপন করে। transform: translate(-50%, -50%);
ব্যবহার করা নিশ্চিত করে যে মোডালটি তার আকার নির্বিশেষে কেন্দ্রে থাকবে।
ফ্লেক্সবক্স এবং গ্রিড ব্যবহার করা
ফ্লেক্সবক্স এবং গ্রিড লেআউট আরও পরিশীলিত মোডাল পজিশনিং তৈরি করতে ব্যবহার করা যেতে পারে। উদাহরণস্বরূপ, আপনি ফ্লেক্সবক্স ব্যবহার করে সহজেই মোডালটিকে অনুভূমিক এবং উল্লম্বভাবে উভয় দিকেই কেন্দ্রে রাখতে পারেন।
[popover] {
display: flex;
justify-content: center;
align-items: center;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* Optional backdrop */
}
[popover]::backdrop {
background-color: rgba(0, 0, 0, 0.5); /* For wider browser support */
}
[popover] > div {
/* Style the actual modal content */
background-color: white;
padding: 20px;
border-radius: 5px;
}
এই উদাহরণে, [popover]
এলিমেন্টটি একটি কন্টেইনার হিসেবে কাজ করে, যা তার চাইল্ড (মোডাল কন্টেন্ট) কে কেন্দ্রে রাখার জন্য ফ্লেক্সবক্স ব্যবহার করে। ::backdrop
সিউডো-এলিমেন্টটি মোডালের পিছনে একটি আধা-স্বচ্ছ ব্যাকগ্রাউন্ড যোগ করে।
জাভাস্ক্রিপ্ট দিয়ে ডাইনামিক পজিশনিং (এবং বিবেচ্য বিষয়)
যদিও পপওভার এপিআই জাভাস্ক্রিপ্টের উপর নির্ভরতা কমানোর লক্ষ্য রাখে, তবুও ব্যবহারকারীর ইন্টারঅ্যাকশন বা স্ক্রিনের আকারের উপর ভিত্তি করে ডাইনামিক পজিশনিংয়ের জন্য আপনার জাভাস্ক্রিপ্টের প্রয়োজন হতে পারে। উদাহরণস্বরূপ, আপনি ট্রিগার করা এলিমেন্টের সাপেক্ষে একটি মোডাল পজিশন করতে চাইতে পারেন।
তবে, মনে রাখবেন যে পজিশনিংয়ের জন্য জাভাস্ক্রিপ্টের উপর খুব বেশি নির্ভর করলে পপওভার এপিআই-এর নেটিভ অ্যাক্সেসিবিলিটি এবং আচরণের সুবিধাগুলো কমে যেতে পারে। যথাসম্ভব সিএসএস-ভিত্তিক পজিশনিং ব্যবহার করার চেষ্টা করুন।
পপওভার অ্যাট্রিবিউট এবং স্টেট
পপওভার এপিআই বেশ কিছু নতুন অ্যাট্রিবিউট এবং স্টেট চালু করেছে যা মোডাল আচরণ নিয়ন্ত্রণের জন্য অপরিহার্য:
popover
: এই অ্যাট্রিবিউটটি একটি এলিমেন্টকে পপওভার বানায়। এর মানauto
(ডিফল্ট পপওভার আচরণ) বাmanual
(দেখানো/লুকানোর জন্য জাভাস্ক্রিপ্ট প্রয়োজন) হতে পারে। মোডালের জন্য,popover=auto
সাধারণত উপযুক্ত।popovertarget
: একটি বাটন বা অন্য কোনো ইন্টারেক্টিভ এলিমেন্টের উপর এই অ্যাট্রিবিউটটি নির্দিষ্ট করে যে এটি কোন পপওভার নিয়ন্ত্রণ করবে।popovertoggletarget
: নির্দিষ্ট করে যে বাটনটি লক্ষ্যযুক্ত পপওভারটি দেখাবে এবং লুকাবে উভয়ই।popovershowtarget
: স্পষ্টভাবে লক্ষ্যযুক্ত পপওভারটি দেখায়।popoverhidetarget
: স্পষ্টভাবে লক্ষ্যযুক্ত পপওভারটি লুকায়।:popover-open
: একটি সিএসএস সিউডো-ক্লাস যা পপওভার দৃশ্যমান থাকাকালীন প্রয়োগ হয়।
বাস্তবায়নের উদাহরণ: একটি সাধারণ মোডাল
চলুন পপওভার এপিআই ব্যবহার করে একটি সাধারণ মোডাল তৈরি করি:
Modal Title
This is the content of the modal.
[popover] {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
border: 1px solid #ccc;
min-width: 300px;
}
[popover]:not(:popover-open) {
display: none;
}
[popover]::backdrop {
background-color: rgba(0, 0, 0, 0.5);
}
এই কোডটি একটি বাটন তৈরি করে যা ক্লিক করা হলে একটি মোডাল খোলে। মোডালটি সিএসএস ব্যবহার করে ভিউপোর্টের কেন্দ্রে পজিশন করা হয়েছে। :not(:popover-open)
সিলেক্টরটি নিশ্চিত করে যে মোডালটি প্রাথমিকভাবে লুকানো থাকে।
উন্নত মোডাল উদাহরণ এবং বিবেচ্য বিষয়
ডাইনামিক কন্টেন্টসহ মোডাল
আপনার হয়তো একটি এপিআই থেকে আনা বা ব্যবহারকারীর ইনপুটের উপর ভিত্তি করে তৈরি করা ডাইনামিক কন্টেন্ট দিয়ে মোডাল পূরণ করার প্রয়োজন হতে পারে। এমন ক্ষেত্রে, মোডাল দেখানোর আগে এর কন্টেন্ট আপডেট করার জন্য আপনাকে জাভাস্ক্রিপ্ট ব্যবহার করতে হবে।
Data Modal
Loading...
document.getElementById('load-data-button').addEventListener('click', async () => {
const dataContainer = document.getElementById('data-container');
try {
const response = await fetch('https://api.example.com/data'); // Replace with your API endpoint
const data = await response.json();
dataContainer.innerHTML = JSON.stringify(data, null, 2); // Display formatted JSON
// Manually show the popover, as the popovertarget will only show it on the *first* click in some browsers.
const modal = document.getElementById('data-modal');
if (!modal.matches(':popover-open')) {
modal.showPopover();
}
} catch (error) {
dataContainer.innerHTML = 'Error loading data.';
console.error(error);
}
});
এই উদাহরণটি একটি এপিআই থেকে ডেটা নিয়ে আসে এবং এটি মোডালে প্রদর্শন করে। মনে রাখবেন 'https://api.example.com/data'
এর পরিবর্তে আপনার আসল এপিআই এন্ডপয়েন্ট ব্যবহার করতে হবে।
ফোকাস এবং অ্যাক্সেসিবিলিটি পরিচালনা
পপওভার এপিআই মোডালের মধ্যে স্বয়ংক্রিয়ভাবে ফোকাস ট্র্যাপিং পরিচালনা করে, যা অ্যাক্সেসিবিলিটির জন্য অত্যন্ত গুরুত্বপূর্ণ। তবে, আপনার এখনও নিশ্চিত করা উচিত যে আপনার মোডাল কন্টেন্ট যৌক্তিকভাবে গঠন করা হয়েছে এবং কীবোর্ড নেভিগেশন নির্বিঘ্ন।
মূল বিবেচ্য বিষয়গুলোর মধ্যে রয়েছে:
- হেডিং হায়ারার্কি: আপনার কন্টেন্ট গঠন করতে সঠিক হেডিং লেভেল (
<h1>
,<h2>
, ইত্যাদি) ব্যবহার করুন। - কীবোর্ড নেভিগেশন: নিশ্চিত করুন যে মোডালের মধ্যে সমস্ত ইন্টারেক্টিভ এলিমেন্ট ফোকাসযোগ্য এবং কীবোর্ড ব্যবহার করে নেভিগেট করা যায়।
- ARIA অ্যাট্রিবিউট: প্রয়োজনে স্ক্রিন রিডারদের অতিরিক্ত তথ্য সরবরাহ করতে ARIA অ্যাট্রিবিউট ব্যবহার করুন। যদিও পপওভার এপিআই মৌলিক অ্যাক্সেসিবিলিটি পরিচালনা করে, ARIA অ্যাট্রিবিউট সহায়ক প্রযুক্তি ব্যবহারকারীদের জন্য ব্যবহারকারীর অভিজ্ঞতা আরও উন্নত করতে পারে। তবে, অপ্রয়োজনীয় ARIA অ্যাট্রিবিউট এড়িয়ে চলুন।
- ল্যাঙ্গুয়েজ অ্যাট্রিবিউট: পেজের ভাষা নির্দিষ্ট করতে
<html>
ট্যাগেlang
অ্যাট্রিবিউট ব্যবহার করুন, এবং পপওভারের মধ্যে যদি এটি ভিন্ন ভাষায় হয় তবে সেখানেও এটি ব্যবহার করুন।
পুরানো ব্রাউজারগুলির সাথে মোকাবিলা
পপওভার এপিআই তুলনামূলকভাবে নতুন, তাই ব্রাউজার সামঞ্জস্যতা বিবেচনা করা অপরিহার্য। পুরানো ব্রাউজারগুলো হয়তো নেটিভভাবে এপিআই সমর্থন করে না। আপনি এই ব্রাউজারগুলোর জন্য সমর্থন প্রদান করতে একটি পলিফিল ব্যবহার করতে পারেন। পপওভার পলিফিল একটি ভাল বিকল্প।
<script src="https://cdn.jsdelivr.net/npm/popover-polyfill@latest/dist/index.min.js"></script>
বিভিন্ন ব্রাউজারে পপওভার এপিআই-এর সামঞ্জস্যপূর্ণ কাজ নিশ্চিত করতে আপনার এইচটিএমএল-এ পলিফিল স্ক্রিপ্টটি অন্তর্ভুক্ত করুন।
সিএসএস পপওভার এপিআই ব্যবহারের সেরা অনুশীলন
- সিএসএস-ভিত্তিক পজিশনিংকে অগ্রাধিকার দিন: এপিআই-এর নেটিভ অ্যাক্সেসিবিলিটি বৈশিষ্ট্যগুলো কাজে লাগাতে যথাসম্ভব মোডাল পজিশনিংয়ের জন্য সিএসএস ব্যবহার করুন।
- জাভাস্ক্রিপ্ট ন্যূনতম রাখুন: পপওভার আচরণ পরিচালনার জন্য অতিরিক্ত জাভাস্ক্রিপ্ট এড়িয়ে চলুন। শুধুমাত্র ডাইনামিক কন্টেন্ট বা জটিল ইন্টারঅ্যাকশনের জন্য প্রয়োজনে জাভাস্ক্রিপ্ট ব্যবহার করুন।
- পুঙ্খানুপুঙ্খভাবে পরীক্ষা করুন: সামঞ্জস্যপূর্ণ আচরণ এবং অ্যাক্সেসিবিলিটি নিশ্চিত করতে আপনার মোডালগুলো বিভিন্ন ব্রাউজার এবং ডিভাইসে পরীক্ষা করুন।
- আন্তর্জাতিকীকরণ (i18n) বিবেচনা করুন: মোডাল ডিজাইন এবং পজিশনিং করার সময় টেক্সট ডিরেকশন (LTR/RTL) এবং সাংস্কৃতিক পার্থক্যের প্রতি মনোযোগী হন। উদাহরণস্বরূপ, কিছু RTL ভাষায়, "close" বাটনটি ডানের পরিবর্তে বাম দিকে থাকতে পারে।
- সিমান্টিক এইচটিএমএল ব্যবহার করুন: অ্যাক্সেসিবিলিটি এবং রক্ষণাবেক্ষণযোগ্যতা উন্নত করতে সিমান্টিক এইচটিএমএল এলিমেন্ট (যেমন,
<dialog>
যা সাধারণ পপওভারের পরিবর্তে ডায়ালগ হিসেবে বিবেচিত হওয়া উচিত) ব্যবহার করুন। - পারফরম্যান্সের জন্য অপটিমাইজ করুন: জটিল সিএসএস ক্যালকুলেশন বা অ্যানিমেশন এড়িয়ে চলুন যা পারফরম্যান্সের উপর নেতিবাচক প্রভাব ফেলতে পারে।
- এজ কেসগুলো পরিচালনা করুন: খুব দীর্ঘ কন্টেন্ট যা মোডাল থেকে ওভারফ্লো হতে পারে, বা ছোট স্ক্রিন যেখানে মোডালটি সঠিকভাবে ফিট নাও হতে পারে, এমন এজ কেসগুলো বিবেচনা করুন।
পপওভার এপিআই ব্যবহারের সুবিধা
সিএসএস পপওভার এপিআই গ্রহণ করলে বেশ কিছু সুবিধা পাওয়া যায়:
- উন্নত অ্যাক্সেসিবিলিটি: নেটিভ অ্যাক্সেসিবিলিটি সমর্থন নিশ্চিত করে যে মোডালগুলো প্রতিবন্ধী ব্যবহারকারীসহ সকলের জন্য ব্যবহারযোগ্য।
- সরলীকৃত ডেভেলপমেন্ট: এপিআই পপওভার তৈরি এবং পরিচালনা করার জন্য প্রয়োজনীয় জাভাস্ক্রিপ্ট কোডের পরিমাণ কমিয়ে দেয়।
- উন্নত পারফরম্যান্স: জাভাস্ক্রিপ্ট-ভিত্তিক সমাধানের তুলনায় নেটিভ ব্রাউজার সমর্থন উন্নত পারফরম্যান্সের দিকে নিয়ে যেতে পারে।
- মানসম্মত আচরণ: এপিআই পপওভার তৈরির একটি মানসম্মত উপায় প্রদান করে, যা বিভিন্ন ব্রাউজার এবং প্ল্যাটফর্মে সামঞ্জস্যপূর্ণ আচরণ নিশ্চিত করে।
সাধারণ ভুল যা এড়িয়ে চলতে হবে
- জাভাস্ক্রিপ্টের উপর অতিরিক্ত নির্ভরতা: পজিশনিং এবং পপওভার আচরণ পরিচালনার জন্য খুব বেশি জাভাস্ক্রিপ্ট ব্যবহার করলে এপিআই-এর সুবিধাগুলো নষ্ট হয়ে যেতে পারে।
- অ্যাক্সেসিবিলিটি উপেক্ষা করা: মোডাল কন্টেন্ট সঠিকভাবে গঠন করতে এবং ফোকাস ব্যবস্থাপনা পরিচালনা করতে ব্যর্থ হলে অ্যাক্সেসিবিলিটি সমস্যা তৈরি হতে পারে।
- ব্রাউজার সামঞ্জস্যতা উপেক্ষা করা: পুরানো ব্রাউজারগুলো বিবেচনা না করা এবং পলিফিল ব্যবহার করতে ব্যর্থ হলে অসামঞ্জস্যপূর্ণ আচরণ হতে পারে।
- দুর্বল পজিশনিং পছন্দ: এমনভাবে মোডাল পজিশন করা যা গুরুত্বপূর্ণ কন্টেন্ট ঢেকে দেয় বা যার সাথে ইন্টারঅ্যাক্ট করা কঠিন, তা ব্যবহারকারীর অভিজ্ঞতা নষ্ট করতে পারে।
- ফোকাস ট্র্যাপিং সঠিকভাবে পরিচালনা না করা: যদিও এপিআই ফোকাস ট্র্যাপিংয়ে সাহায্য করে, তবে এটি নিশ্চিত করা গুরুত্বপূর্ণ যে মোডালের মধ্যে সমস্ত ফোকাসযোগ্য উপাদান কীবোর্ডের মাধ্যমে পৌঁছানো যায়, এবং মোডাল বন্ধ হয়ে গেলে ফোকাস ট্রিগার এলিমেন্টে ফিরে আসে।
পপওভার এপিআই-এর বিকল্প
যদিও পপওভার এপিআই একটি স্বাগত সংযোজন, এর বিকল্পও বিদ্যমান, যার প্রত্যেকটির নিজস্ব সুবিধা-অসুবিধা রয়েছে। কিছু সাধারণ বিকল্পের মধ্যে রয়েছে:
- জাভাস্ক্রিপ্ট লাইব্রেরি: jQuery UI, Bootstrap, এবং কাস্টম জাভাস্ক্রিপ্ট সমাধানের মতো লাইব্রেরিগুলো ঐতিহ্যগতভাবে মোডাল তৈরি করতে ব্যবহৃত হয়ে আসছে। এই সমাধানগুলো নমনীয়তা প্রদান করে তবে প্রায়শই বেশি কোডের প্রয়োজন হয় এবং নেটিভ সমাধানের চেয়ে কম অ্যাক্সেসিবল হতে পারে।
- <dialog> এলিমেন্ট:
<dialog>
এলিমেন্টটি একটি ডায়ালগ বক্স বা মোডাল উইন্ডো উপস্থাপন করার একটি সিমান্টিক উপায় প্রদান করে। এটি কিছু বিল্ট-ইন অ্যাক্সেসিবিলিটি বৈশিষ্ট্য সরবরাহ করে, তবে এটি স্টাইলিং এবং পজিশনিংয়ের ক্ষেত্রে পপওভার এপিআই-এর মতো নমনীয় নাও হতে পারে। তবে, সিমান্টিক কাঠামো প্রদান করতে পপওভার এপিআই-এর সাথে একত্রে ব্যবহার করুন।
উপসংহার
সিএসএস পপওভার এপিআই মোডালসহ অ্যাক্সেসিবল এবং পারফরম্যান্ট পপওভার তৈরির একটি শক্তিশালী এবং মানসম্মত উপায় সরবরাহ করে। এপিআই-এর বৈশিষ্ট্যগুলো ব্যবহার করে এবং সেরা অনুশীলনগুলো অনুসরণ করে, আপনি আপনার ফ্রন্ট-এন্ড ডেভেলপমেন্ট ওয়ার্কফ্লো সহজ করতে এবং উন্নত ব্যবহারকারীর অভিজ্ঞতা তৈরি করতে পারেন। যদিও কিছু উন্নত পরিস্থিতিতে জাভাস্ক্রিপ্টের প্রয়োজন হতে পারে, পপওভার এপিআই মোডাল ডেভেলপমেন্টের জন্য একটি আরও বেশি সিএসএস-কেন্দ্রিক পদ্ধতিকে উৎসাহিত করে। যেহেতু পপওভার এপিআই-এর জন্য ব্রাউজার সমর্থন উন্নত হতে চলেছে, এটি সম্ভবত ওয়েবে পপওভার এবং মোডাল তৈরির পছন্দের পদ্ধতি হয়ে উঠবে।
পপওভার এপিআই গ্রহণ করুন এবং নেটিভ মোডাল পজিশনিংয়ের সম্ভাবনা উন্মোচন করুন!