मोडल और निकास पैनल

1) कब क्या उपयोग करना है

मोडल (पृष्ठभूमि के साथ संवाद) - महत्वपूर्ण समाधानों और छोटे कार्यों के लिए जिन पर पूर्ण ध्यान देने की आवश्यकता होती है: कार्रवाई की पुष्टि, कानूनी सहमति, खतरनाक संचालन, छोटे रूप ≤ 1-2 क्षेत्र। पृष्ठभूमि को ताला लगाता है।

दराज/शीट (पुल-आउट पैनल) - इन-प्लेस एक्सटेंशन के लिए: ऑब्जेक्ट विवरण, विशेषता संपादन, सूची से चयन, सहायक नेविगेशन। पृष्ठभूमि दृश्यमान है - संदर्भ संरक्षित है।

• यदि कार्रवाई को एकाग्रता और पुष्टि की आवश्यकता है → मोडल।
• संदर्भ को कब सहेजना है और → दराज का "समानांतर" अवलोकन देना है।

2) संरचना और आयाम

मोडल

शीर्षक (आवश्यक) → बॉडी → सीटीए (प्राथमिक/माध्यमिक/विनाशकारी)।

आयाम: S (480-560 px), M (640-720 px), L (≤ 840 px)। मोबाइल पर - फुल-स्क्रीन शीट।

दराज/शीट

दिशा: दाहिना किनारा (डेस्कटॉप, संपादन), तल (मोबाइल, क्रिया), कभी-कभी बाएं (नेविगेशन)।

चौड़ाई: 360-480 (एस), 480-640 (एम), 640-800 (एल) मोबाइल पर: 90-100% चौड़ाई/ऊंचाई।

सामग्री की ऊंचाई हमेशा सीमित होती है, अंदर स्क्रॉल करती है; हेडर/एसटीए तय हैं।

3) कॉपीराइटिंग और सीटीए

शीर्षक = क्रिया/अर्थ: पुष्टि दर, चयन भुगतान विधि, केवाईसी आवश्यक।

लघु पाठ, 1-2 वाक्य। अस्पष्ट सूत्रों से बचें।

सीटीए: एक प्राथमिक, अगला माध्यमिक ("रद्द") और, यदि आवश्यक हो, तो विनाशकारी।

जोखिम भरे कार्यों के लिए, 1-लाइन स्पष्टीकरण जोड़ें: "कार्रवाई अपरिवर्तनीय है। आप 10 सेकंड के भीतर रद्द कर सकेंगे (यदि उपलब्ध हो) "

4) व्यवहार और राज्य

उद्घाटन: तत्काल प्रतिक्रिया ≤ 100 एमएस, फिर एनीमेशन 120-180 एमएस।

समापन: खोलने से तेज (80-140 एमएस), ट्रिगर पर ध्यान केंद्रित करें।

व्यस्त: कंटेनर पर 'आरिया-व्यस्त = "सही", रेट्री लॉक के साथ बटन।

बिना सहेजे (गंदा रूप): समापन पर - संवाद-चेतावनी ("वहाँ बिना सहेजे हुए परिवर्तन हैं")।

पृष्ठभूमि पर एस्केप/क्लिक: गैर खतरनाक संवादों के लिए स्वीकार्य; महत्वपूर्ण - केवल स्पष्ट बटन के लिए।

5) उपलब्धता (A11y)

कंटेनर: 'रोल = "डायलॉग" और' आरिया-मोडल = "ट्रू" (एक वास्तविक मोडल के लिए)।

शीर्षक 'आरिया-लेबेलबी' के माध्यम से जुड़ा हुआ है; वर्णन - 'आरिया-विवरण'।

भीतर जाल पर ध्यान केंद्रित करें; प्राथमिक फोकस हेडर या पहले इंटरैक्टिव आइटम पर है।

बंद करने के बाद मूल ट्रिगर पर फ़ोकस लौटाता है.

कोई स्क्रॉलिंग पृष्ठभूमि नहीं: 'दस्तावेज शरीर {overflow: छिपा हुआ;} 'या DOM के बाकी हिस्सों पर' निष्क्रिय '।

कुंजीपट समर्थन: टैब/शिफ्ट + टैब चक्रीय हैं; Esc बंद हो जाता है (जब तक स्क्रिप्ट निषिद्ध नहीं है)।

'प्रीफर्स-कम-मोशन' पर विचार करें: एनिमेशन को अक्षम/सरल करना।

html
<div class="backdrop" data-open hidden></div>
<div class="dialog" role="dialog" aria-modal="true" aria-labelledby="d-title" aria-describedby="d-desc" hidden>
<h2 id =" d-title "> Confirm Bid </h2>
<p id =" d-desc "> Sum of 200 ₴ by factor 1. 85</p>
<div class="actions">
<button class =" btn btn--primary "> Confirm </button>
<button class =" btn btn--ghost "> Cancel </button>
</div>
</div>

6) प्रदर्शन और वास्तुकला

एक पोर्टल के माध्यम से प्रतिपादन (एक एप्लिकेशन के शीर्ष पर परत) → कम जेड-इंडेक्स समस्याएं।

माउंट सामग्री आलसी जब पहली बार खोला गया, एनीमेशन को बंद करने के बाद अनमाउंट (या ऑफस्क्रीन का अनुवाद)।

केवल 'परिवर्तन/अपारदर्शिता' को एनिमेट करें; महंगे धब्बा/ओवरसाइज़्ड छाया से बचें।

पृष्ठभूमि स्क्रॉल (स्क्रॉल-लॉक) को लॉक करें, वर्तमान स्थिति को रखें ताकि यह बंद होने के बाद "कूद" न करे।

दराज - उपयोग वर्चुअलाइजेशन में बड़ी सूचियों के लिए।

7) मोबाइल पैटर्न

त्वरित क्रियाओं/पुष्टि के लिए नीचे की शीट: बंद करने के लिए इशारों को स्वाइप करें (दहलीज के साथ)।

नीचे स्टिकी-सीटीए; बंद बटन - ऊपर बाईं ओर से।

सुरक्षित क्षेत्र इंडेंट (पायदान/इशारा क्षेत्र)।

ऑन-स्क्रीन कीबोर्ड को सीटीए को ओवरलैप नहीं करना चाहिए; लेआउट - "उठाने" सामग्री या कुंजीपटल के ऊपर एक निश्चित पैनल।

8) मोशन डिजाइन

इनपुट: फीका + लाइट शिफ्ट (मोडल: वाई के साथ, दराज: उपस्थिति की धुरी के साथ)। 120-180 एमएस।

आउटपुट: छोटा (80-140 ms), सहजता 'cubic-bezier (0। 2,0,0. 2,1)`.

पृष्ठभूमि-अपारदर्शिता 0 → 0 है। 4–0. 6. स्पंदन और अंतहीन चकाचौंध के बिना।

'पसंद-कम-गति' के लिए: कोई बदलाव नहीं, केवल फीका।

9) समापन प्रबंधन

केवल सुरक्षित संचालन के लिए तत्काल बंद करें।

यदि कोई त्रुटि है, तो हम संवाद में बने रहते हैं, कारण दिखाते हैं और रिट्री करते हैं।

पृष्ठभूमि निष्पादन में - संवाद बंद करें और टोस्ट दिखाएँ "हम पृष्ठभूमि में निष्पादित करते हैं"..., साथ ही "इतिहास" अनुभाग।

10) विशिष्ट iGaming परिदृश्य

10. 1 बोली पुष्टि (मोडल)

सामग्री: घटना, गुणांक, राशि, संभावित लाभ, गुणांक वैधता अवधि।

बटन: "पुष्टि करें" (प्राथमिक), "रद्द करें।"

विलंब पैटर्न> 3 s: पाठ "पुष्टि के लिए इंतजार"...; यदि गुणांक बदलता है, तो एक ईमानदार अद्यतन।

10. 2 कैशआउट (मोडल/शीट)

मौजूदा कैशआउट राशि और विंडो टाइमर प्रदर्शित करता है।

पुष्टिकरण + संभव पूर्ववत (यदि विनियमन अनुमति देता है)।

10. 3 भुगतान विधि चुनना (दराज)

कमीशन/ईटीए के साथ विधियों की सूची; मिनी फॉर्म के → का चयन करता है।

डिफ़ॉल्ट विधि सहेज रहा है; इनपुट के नुकसान के बिना वापसी

10. 4 केवाईसी (दराज → मोडल)

दस्तावेज ़/प्रांप्ट लोड करने के लिए दराज़।

मोडल जब अपूर्ण भार के साथ बंद करने की कोशिश कर रहा है: बिना सहेजे के बारे में चेतावनी।

10. 5 जिम्मेदार प्ले लिमिट (मोडल)

रेडियो "दिन/सप्ताह/माह", राशि क्षेत्र, पंक्ति "में प्रभावी होगा"...।

11) एंटी-पैटर्न

नेस्टेड मोडल (मोडल पर मोडल)। एकल संवाद या चरण अनुक्रम का उपयोग करें।

सामग्री के नियमित देखने के लिए मोडाल्का (बेहतर दराज/पृष्ठ)।

छिपा हुआ क्रॉस या केवल "माइक्रोजोन" द्वारा बंद।

जोखिम भरी कार्रवाई - "पृष्ठभूमि से" बंद करने की अनुमति।

एक मोडल में लंबा आकार (→ को एक अलग स्क्रीन/पैनल में ले जाएँ)।

ट्रिगर करने के लिए कोई फोकस वापसी नहीं।

12) डिजाइन प्रणाली टोकन (उदाहरण)

json
{
"dialog": {
"radius": 12,
"shadow": "var(--elev-4)",
"sizes": { "s": 520, "m": 680, "l": 840 },
"backdropOpacity": 0. 5,
"padding": "20 24",
"gap": 16
},
"drawer": {
"width": { "s": 360, "m": 480, "l": 640 },
"edge": "right",
"radius": 12,
"shadow": "var(--elev-4)"
},
"motion": {
"inMs": 160,
"outMs": 120,
"ease": "cubic-bezier(0. 2,0,0. 2,1)",
"reduce": true
},
"a11y": {
"useAriaModal": true,
"focusTrap": true,
"returnFocus": true
}
}

css
.backdrop[data-open]{position:fixed; inset:0; background:rgba(0,0,0,.5); backdrop-filter:saturate(80%); opacity:1; transition:opacity. 16s}
.dialog,[data-drawer]{position:fixed; background:var(--bg-elevated); border-radius:12px; box-shadow:var(--elev-4);}
.dialog{inset:auto; left:50%;top:50%;transform:translate(-50%,-50%); max-width:840px; width:min(100% - 32px, var(--dialog-w,680px));}
[data-drawer="right"]{top:0; right:0; height:100%;width:var(--drawer-w,480px); transform:translateX(0)}
.dialog[hidden],.backdrop[hidden]{display:none}

13) व्यवहार के स्निपेट

js const openBtn = document. getElementById('open');
const dlg = document. querySelector('.dialog');
let prevFocus;

function openDialog() {
prevFocus = document. activeElement;
dlg. hidden = false; document. body. style. overflow = 'hidden';
const focusable = dlg. querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
(focusable[0]        dlg). focus();
function onKey(e){
if(e. key==='Escape') return closeDialog();
if(e. key!=='Tab') return;
const first = focusable[0], last = focusable[focusable. length-1];
if(e. shiftKey && document. activeElement===first){ e. preventDefault(); last. focus(); }
else if(!e.shiftKey && document. activeElement===last){ e. preventDefault(); first. focus(); }
}
dlg. addEventListener('keydown', onKey);
dlg. dataset. off = ()=> dlg. removeEventListener('keydown', onKey);
}
function closeDialog() {
dlg. dataset. off && dlg. dataset. off();
dlg. hidden = true; document. body. style. overflow = '';
prevFocus && prevFocus. focus();
}

js let startY=0, delta=0;
const sheet = document. querySelector('.sheet');
sheet. addEventListener('touchstart', e => startY = e. touches[0].clientY);
sheet. addEventListener('touchmove', e => {
delta = Math. max(0, e. touches[0].clientY - startY);
sheet. style. transform = `translateY(${delta}px)`;
});
sheet. addEventListener('touchend', () => {
if (delta > 120) sheet. classList. remove('open'); else sheet. style. transform = '';
delta = 0;
});

14) मेट्रिक्स और प्रयोग

मोडल द्वारा खुली दर/पूर्णता दर: कितने खोले और क्रिया पूरी की।

समय-से-निर्णय: खोलने से लेकर प्राथमिक पर क्लिक करने तक।

डिस्मिस रेट और कारण (Esc/पृष्ठभूमि बनाम "रद्द")।

व्यस्त स्क्रिप्ट में त्रुटि/पुनः प्रयास दर।

A/B: मोडल बनाम दराज, CTA टेक्स्ट, फील्ड ऑर्डर, "पुष्टि" बनाम "पूर्ववत"।

15) क्यूए चेकलिस्ट

उपलब्धता

• 'भूमिका = "संवाद",' आरिया-मोडल = "ट्रू", सही 'आरिया-लेबेलडबी/-describedby'।
• फोकस ट्रैप काम करता है; फोकस ट्रिगर पर लौटता है।
• Esc बंद हो जाता है (यदि अनुमति दी जाए); टैब चक्रीय है।
• कंट्रास्ट ≥ एए; यह सिर्फ रंग नहीं है जो अर्थ बताता है।

व्यवहार

• TTFF ≤ 100 ms; 120-180 ms/आउट 80-140 ms में एनीमेशन।
• पृष्ठ को "कूदने" के बिना पृष्ठभूमि को स्क्रॉल-लॉक करें।
• गंदे रूप में अनसवेड-गार्ड।
• व्यस्त अवस्था, पुनरावृत्ति/त्रुटियों को सही करें।

अंतरफलक

• क्लियर हेडर और एक प्राथमिक-सीटीए।
• एक क्रॉस/बंद बटन उपलब्ध है।
• आयाम अनुकूली हैं; इशारे के साथ मोबाइल - शीट पर।

निष्पादन

• पोर्टल्स/जेड-इंडेक्स सही हैं; "ट्रांसमिशन" के बिना।
• आलसी प्रारंभिक; केवल परिवर्तन/अपारदर्शिता एनिमेटेड हैं।

16) डिजाइन प्रणाली में प्रलेखन

घटक: 'मोडल', 'दराज/शीट', 'पुष्टिकरण डायलॉग', 'अनसेवेडगार्ड'।

टोकन: आयाम, इंडेंट, छाया, एनिमेशन, पृष्ठभूमि, फोकस-रिंग।

गाइड: "जब मोडल बनाम दराज", कॉपीराइटिंग पैटर्न, जोखिम भरी क्रियाएं (पुष्टि/पूर्ववत), स्क्रॉल-लॉक और पोर्टल्स, कम-गति।

Do/Dont gallery: नेस्टेड मोडल्स (मत), मोडल (मत) में लंबे फॉर्म, संदर्भ के विस्तार के लिए शीट (डू)।

संक्षिप्त सारांश

मोडाल्का - पूर्ण ध्यान के तहत निर्णय के लिए, दराज - प्रवाह को तोड़ ने के बिना संदर्भ का विस्तार संरचना को सरल रखें, सीटीए अस्पष्ट, और इंटरैक्शन पूर्वानुमानित और सुलभ। प्रदर्शन का सम्मान करें, पृष्ठभूमि को लॉक करें और वापसी फोकस करें। IGaming परिदृश्यों में, यह सीधे विश्वास को प्रभावित करता है: शर्त पुष्टि, कैशआउट, भुगतान विधि चयन, और KYC निष्पक्ष, तेज और सुरक्षित होना चाहिए।