ایچ ٹی ایم ایل، سی ایس ایس، اور کم سے کم جاوا اسکرپٹ کا استعمال کرتے ہوئے قابل رسائی ماڈلز اور پاپ اپ کیسے بنائیں

شرطیں

شروع کرنے سے پہلے، یہ چند بنیادی باتوں سے واقف ہونے میں مدد کرتا ہے:

• سی ایس ایس کی بنیادی باتیں: آپ کو CSS کی عام اصطلاحات اور تصورات (سلیکٹرز، پراپرٹیز، پوزیشننگ وغیرہ) سے واقف ہونا چاہیے۔

• HTML ڈھانچہ: مثالوں کی پیروی کرنا آسان ہو جائے گا اگر آپ کو کام کرنے کا علم ہے کہ DOM میں عناصر کو کس طرح منظم کیا جاتا ہے۔

• JavaScript DOM بنیادی باتیں: اگرچہ یہ گائیڈ صرف کم سے کم JavaScript کا استعمال کرتا ہے، یہ سمجھنا کہ DOM عناصر کو کس طرح استفسار کرنا ہے اور اس میں ہیرا پھیری کرنا آپ کو تجربہ کرتے وقت زیادہ اعتماد دے گا۔

بس آپ کی ضرورت ہے۔ کوئی فریم ورک نہیں، کوئی بھاری بوائلر پلیٹ نہیں۔ یہ صرف بنیادی ویب ٹیکنالوجیز کی بنیاد ہے۔

انڈیکس

پاپ اپ بنانے کا طریقہ popover

HTML، CSS اور JavaScript کا استعمال کرتے ہوئے شروع سے پاپ اپ بنانا کافی مشکل ہو سکتا ہے۔ ایک پاپ اپ ایک چھوٹا ڈائیلاگ باکس ہے جو اسکرین پر ظاہر ہوتا ہے تاکہ اضافی معلومات یا ان پٹ کی درخواست کی جا سکے۔ چونکہ انہیں عارضی طور پر ڈیزائن کیا گیا ہے، صارفین توقع کرتے ہیں کہ وہ تعامل کے بعد غائب ہو جائیں گے، جیسے کہ Esc دبانے یا باہر کلک کرنے سے۔

HTML استعمال کریں۔ popover اور popovertarget پراپرٹیز آپ کو کئی بلٹ ان ایکسیسبیلٹی اور تعامل کے رویے رکھنے کی اجازت دیتی ہیں، جیسے کہ فرار سے بند اور ہلکا پھلکا برخاست، لیکن پھر بھی آپ کو صحیح معنوی عناصر کو منتخب کرنے اور کی بورڈ اور اسکرین ریڈر کے رویے کی جانچ کرنے کی ضرورت ہے۔

HTML کے ساتھ ایک پاپ اپ ترتیب دینا

آئیے عملی بنیں اور کچھ عام مثالیں بنائیں اور ویب پیج پاپ اپس کے لیے کیسز استعمال کریں۔ آئیے ایک نیویگیشن عنصر بناتے ہیں جو ظاہر ہوتا ہے جب صارف ہیمبرگر مینو یا مینو لسٹ پر کلک کرتا ہے۔

پہلے popover پاپ اپ کنٹینر کی خصوصیات۔ یہ ایچ ٹی ایم ایل کو کہتا ہے کہ وہ موجود بلاک کو پاپ اپ سمجھے اور اسے بطور ڈیفالٹ اسکرین سے چھپائے۔

پھر popovertarget پوپ اپ کو متحرک کرنے والے عنصر پر پراپرٹی کا استعمال کرتے ہوئے چھپے ہوئے عنصر کو چھپائیں (جیسے بٹن عنصر یا کوئی دوسرا عنصر)۔ popover.

ہاں:

open

مندرجہ بالا ترتیبات کے نتیجے میں مفید بلٹ ان تعامل کے رویوں کے ساتھ ایک پاپ اپ ہوگا، بشمول فرار سے بند اور ہلکی برخاستگی۔ آپ بٹن دبا کر اسے اسکرین سے چھپا سکتے ہیں۔ ESC جب آپ اپنے کی بورڈ پر کوئی کلید دباتے ہیں یا صفحہ پر کہیں اور کلک کرتے ہیں (سوائے ایک پاپ اپ سیکشن کے)

یاد رکھیں۔ popover اکیلے اوصاف خود بخود پاپ اپ کو ناقابل رسائی بنا دیتے ہیں۔ آپ کو اب بھی مناسب الفاظ استعمال کرنے کی ضرورت ہے، جب ضروری ہو تو قابل رسائی لیبل فراہم کریں، اور کی بورڈ اور اسکرین ریڈر کے رویے کی جانچ کریں۔

پاپ اپ کو کیسے ترتیب دیا جائے۔

اب آپ پاپ اپ کو ترتیب دے سکتے ہیں اور اسے جہاں چاہیں رکھ سکتے ہیں۔ پہلے سے طے شدہ طور پر، مندرجہ ذیل میں سے ایک کا استعمال کرتے ہوئے ایک پاپ اپ (یا موڈل) بنایا گیا: popover پراپرٹی یا ڈائیلاگ ٹیگ صفحہ پر مرکوز ہے۔

اس کی وجہ یہ ہے کہ بنیادی عناصر ہیں: popover کی حیثیت رکھتا ہے۔ fixed اور inset 0، پاپ اپ باکس کو بیچ میں رکھیں اور مارجن کو سیٹ کریں۔ auto.

میمو: inset صفحہ پر کسی عنصر کی پوزیشن کے اوپر، نیچے، بائیں اور دائیں کے لیے مخففات۔ ایک عنصر کے تمام اطراف میں ایک ہی سائز کا اطلاق کرنے کے لیے انسیٹ کا استعمال کریں۔

اگر آپ نہیں چاہتے ہیں کہ پاپ اپ کو مرکز میں رکھا جائے، تو آپ عنصر کو اس طرح ترتیب دے کر شروع کر سکتے ہیں: popover صفحہ کے بہاؤ سے الگ کرنے کے لیے پوزیشن کو مطلق پر سیٹ کریں۔

#navbar-menu {
  position: absolute;
}

اس کے بعد آپ مارجن کو 0 پر غیر فعال کر سکتے ہیں اور پوزیشن (انسریشن) کو غیر فعال کر سکتے ہیں۔ unset:

#navbar-menu {
  position: absolute;
  margin: 0;
  inset: unset;
}

اس کے بعد آپ پاپ اوور عنصر کو صفحہ کے کسی بھی طرف اپنی مرضی کے مطابق رکھ سکتے ہیں۔

استعمال کرنے کا طریقہ position-anchor جائیداد

میمو: سی ایس ایس اینکر پوزیشننگ ایک نئی خصوصیت ہے۔ براہ کرم پروڈکشن میں استعمال کرنے سے پہلے براؤزر سپورٹ چیک کریں اور ان براؤزرز کے لیے فال بیک فراہم کریں جو ابھی تک اس کی حمایت نہیں کرتے ہیں۔

اگلا مرحلہ عنصر کو اس عنصر کے قریب رکھنا ہے جو اسے متحرک کرتا ہے۔ اس کے لیے ہم position-anchor سی ایس ایس کی خصوصیات۔

کہ position-anchor سی ایس ایس میں پراپرٹیز پہلے سے طے شدہ اینکر عنصر کی وضاحت کرتی ہیں جس میں بالکل یا فکسڈ پوزیشن والے عناصر کو "ٹیچر” یا اسنیپ کیا جاتا ہے۔ صرف CSS کا استعمال کرتے ہوئے، آپ صفحہ پر ایک اور عنصر کے ساتھ تیرتا ہوا ہدف (جیسے یہاں پاپ اپ) منسلک کر سکتے ہیں۔

اس مثال میں مینو لسٹ آئیکن یا ہیمبرگر مینو ہے جو نیویگیشن عنصر کو پاپ اپ اور بند کر دیتا ہے۔ ہم نیویگیشن بار مینو کو مینو لسٹ کے ساتھ/قریب منسلک کرنا چاہتے ہیں جو مینو لسٹ کھولتی ہے۔

تو آپ شامل کر سکتے ہیں: anchor-name مینو آئیکن میں خصوصیات شامل کریں۔ نام سے پہلے ڈبل ڈیش ہونا ضروری ہے (آپ اسے جو چاہیں نام دے سکتے ہیں)۔

#nav-btn {
  anchor-name: --nav;
}

کہ position-anchor اوصاف آپ کو کسی عنصر کو اس کے اینکر کے نام سے شناخت کرنے والے دوسرے عنصر سے جوڑنے کی اجازت دیتے ہیں۔ ایک بار طے ہونے کے بعد، آپ استعمال کر سکتے ہیں: anchor() لنگر سے متعلق عناصر کو پوزیشن میں رکھنے کی صلاحیت، جیسے لنگر کے اوپر، نیچے یا مرکز میں سیدھ میں لانا۔

#navbar-menu {
  position: absolute;
  margin: 0;
  inset: auto;
  position-anchor: --nav;
  top: anchor(bottom);
  right: anchor(right);
}

آپ کے فراہم کردہ اینکر کے نام کو قدر کے طور پر پاس کرتا ہے۔ position-anchor نیویگیشن عناصر کو سیدھ میں لانے کے لیے (#navbar-menu اس مثال میں) anchor-name کی nav یہ ہے #nav-btn ہماری مثال میں۔

پھر anchor()نیویگیشن عنصر کے اوپری حصے کو نیچے اور دائیں جانب مینو کے دائیں جانب رکھیں۔

کا استعمال کرتے ہوئے ایک موڈل بنانے کا طریقہ dialog ٹیگ

استعمال کرتے ہوئے command اور commandfor آپ بٹن کی خصوصیات کو اعلانیہ طور پر کنٹرول کر سکتے ہیں۔

    open modal


 

    
      close modal
    
    

const btn = document.querySelector("button");
const dialog = document.querySelector("dialog");

btn.addEventListener("click", () => {
  dialog.showModal();
});

const btn = document.querySelector("button");
const dialog = document.querySelector("dialog");

btn.addEventListener("click", () => {
  dialog.show();
});

#navbar-menu {
  display: grid;
/* other styles definition*/
}

/* element with a popover*/
#navbar-menu:popover-open {
  display: grid;
  gap: 2rem;
}

/* using a dialog element*/
dialog[open] {
  display: grid;
  gap: 2rem;
}

html:has(dialog[open]) {
  overflow: hidden;
}

dialog::backdrop {
  background: rgba(43, 50, 200, 0.4);
}