jquery മോഡൽ js ഉപയോഗിച്ച് പോപ്പ്അപ്പ് വിൻഡോ. HTML, CSS എന്നിവ ഉപയോഗിച്ച് പോപ്പ്അപ്പ് വിൻഡോ. ഉപയോക്താവിൻ്റെ ശ്രദ്ധ ആകർഷിക്കുക

പ്രധാനപ്പെട്ട സന്ദേശങ്ങൾ അല്ലെങ്കിൽ സൈറ്റിൽ വരുത്തിയ മാറ്റങ്ങൾ പ്രദർശിപ്പിക്കുന്നതിന്, നിങ്ങൾക്ക് പോപ്പ്-അപ്പ് വിൻഡോകൾ ഉപയോഗിക്കാം. രണ്ട് തരത്തിലുള്ള പോപ്പ്-അപ്പുകൾ ഉണ്ട്: പതിവ്, മോഡൽ.

ശ്രദ്ധിക്കുക: മോഡൽ വിൻഡോകൾ സാധാരണ വിൻഡോകളിൽ നിന്ന് വ്യത്യസ്തമാണ്, മോഡൽ വിൻഡോ തുറന്നിരിക്കുമ്പോൾ, മോഡൽ വിൻഡോ അടയ്‌ക്കുന്നതുവരെ ഉപയോക്താവിന് സൈറ്റിൻ്റെ മറ്റ് ഘടകങ്ങളുമായി സംവദിക്കാൻ കഴിയില്ല.

ജാവാസ്ക്രിപ്റ്റ് ഉപയോഗിക്കുന്ന ഒരു മോഡൽ വിൻഡോയുടെ ഉദാഹരണം നിങ്ങൾക്ക് അലേർട്ട്() രീതി ഉപയോഗിച്ച് കാണാൻ കഴിയും.

പോപ്പ്-അപ്പ് വിൻഡോ

ഒരു പോപ്പ്അപ്പ് സൃഷ്‌ടിക്കുന്നതിനുള്ള ആദ്യ പടി ഒരു ഘടകം (അല്ലെങ്കിൽ മറ്റേതെങ്കിലും ഘടകം) സൃഷ്‌ടിച്ച് അതിനെ സ്‌റ്റൈൽ ചെയ്യുക എന്നതാണ്:

പ്രമാണ ശീർഷകം .okno (വീതി: 300px; ഉയരം: 50px; ടെക്സ്റ്റ്-അലൈൻ: മധ്യഭാഗം; പാഡിംഗ്: 15px; ബോർഡർ: 3px സോളിഡ് #0000cc; ബോർഡർ-റേഡിയസ്: 10px; നിറം: #0000cc; ) പോപ്പ്-അപ്പ് വിൻഡോ! ശ്രമിക്കുക »

ഇത് ഒരു പോപ്പ്-അപ്പ് വിൻഡോ ആയി ഉപയോഗിക്കും. ഇപ്പോൾ നമ്മൾ അത് ഡിസ്പ്ലേ പ്രോപ്പർട്ടി മൂല്യം none ഉപയോഗിച്ച് മറയ്ക്കുകയും ക്ലിക്ക് ചെയ്യുമ്പോൾ, ഒരു പോപ്പ്-അപ്പ് വിൻഡോ ദൃശ്യമാകാൻ ഇടയാക്കുന്ന ഒരു ലിങ്ക് ചേർക്കുകയും ചെയ്യുന്നു:

pseudo-class:target ഉപയോഗിച്ച് ഞങ്ങൾ നാവിഗേറ്റ് ചെയ്ത ഘടകത്തിലേക്ക് ശൈലികൾ തിരഞ്ഞെടുത്ത് പ്രയോഗിക്കുന്നു. അതിനാൽ, ലിങ്കിൽ ക്ലിക്കുചെയ്‌ത ശേഷം, എലമെൻ്റിൻ്റെ ഡിസ്‌പ്ലേ പ്രോപ്പർട്ടി മൂല്യം none എന്നതിൽ നിന്ന് ബ്ലോക്ക് ആയി മാറും.

ഇപ്പോൾ നമ്മൾ അത് പേജിൻ്റെ മധ്യത്തിൽ സ്ഥാപിക്കേണ്ടതുണ്ട്, അങ്ങനെ അത് ഒരു പോപ്പ്-അപ്പ് വിൻഡോ പോലെ കാണപ്പെടുന്നു. ഇത് പൂർണ്ണമായും സ്ഥാനമാക്കി ലംബമായും തിരശ്ചീനമായും മധ്യത്തിലാക്കുക:

#okno (വീതി: 300px; ഉയരം: 50px; ടെക്സ്റ്റ്-അലൈൻ: മധ്യഭാഗം; പാഡിംഗ്: 15px; ബോർഡർ: 3px സോളിഡ് #0000cc; ബോർഡർ-റേഡിയസ്: 10px; നിറം: #0000cc; ഡിസ്പ്ലേ: ഒന്നുമില്ല; /*സ്ഥാനവും മധ്യവും*/ സ്ഥാനം: കേവലം; മുകളിൽ: 0; വലത്: 0; താഴെ: 0; ഇടത്: 0; മാർജിൻ: ഓട്ടോ; )

പേജിലെ അല്ലെങ്കിൽ വിൻഡോയിൽ തന്നെ ഏതെങ്കിലും സ്ഥലത്ത് നിങ്ങൾ ക്ലിക്ക് ചെയ്യുമ്പോൾ വിൻഡോ മറയ്ക്കുക എന്നതാണ് അടുത്ത ഘട്ടം. ഇത് ചെയ്യുന്നതിന്, മൂലകത്തിനുള്ളിൽ മൂലകം സ്ഥാപിക്കേണ്ടതുണ്ട്:

പോപ്പ്-അപ്പ് വിൻഡോ!

തുടർന്ന് ഞങ്ങൾ മൂലകം സ്ഥാപിക്കുന്നു വിൻഡോയുടെ മുഴുവൻ വീതിയിലും ഉയരത്തിലും അത് നീട്ടുക. ഞങ്ങൾ അത് ഡിസ്പ്ലേ സജ്ജമാക്കി: ഒന്നുമില്ല; അതിലേക്ക് ഞങ്ങളുടെ ലിങ്ക് റീഡയറക്ട് ചെയ്യുക:

പ്രമാണ ശീർഷകം #പ്രധാന (പ്രദർശനം: ഒന്നുമില്ല; സ്ഥാനം: കേവലം; മുകളിൽ: 0; ഇടത്: 0; വീതി: 100%; ഉയരം: 100%; ) #okno (വീതി: 300px; ഉയരം: 50px; ടെക്സ്റ്റ്-അലൈൻ: മധ്യഭാഗം; പാഡിംഗ് : 15px; ബോർഡർ: 3px സോളിഡ് #0000cc; ബോർഡർ-റേഡിയസ്: 10px; നിറം: #0000cc; സ്ഥാനം: കേവലം; മുകളിൽ: 0; വലത്: 0; താഴെ: 0; ഇടത്: 0; മാർജിൻ: ഓട്ടോ; ) #പ്രധാന:ലക്ഷ്യം (ഡിസ്പ്ലേ: ബ്ലോക്ക്;) പോപ്പ്-അപ്പ് വിൻഡോ! കോൾ പോപ്പ്അപ്പ് ശ്രമിക്കുക »

ഡിസ്പ്ലേ നീക്കം ചെയ്യുക: ഘടകത്തിൽ നിന്ന് ഒന്നുമില്ല. (ഇനി അത് ആവശ്യമില്ല, കാരണം ഞങ്ങൾ ഇപ്പോൾ ഒളിച്ചിരിക്കുന്നു ). തൽഫലമായി, മാതാപിതാക്കൾ ഇപ്പോൾ തിരഞ്ഞെടുത്തത് പേജിലേക്ക് റീഡയറക്‌ട് ചെയ്‌ത് പോപ്പ്അപ്പ് മറയ്‌ക്കുന്നു.

ഇത് ഒരു ലളിതമായ പോപ്പ്-അപ്പ് വിൻഡോയുടെ സൃഷ്ടി പൂർത്തിയാക്കുന്നു.

മോഡൽ വിൻഡോ

ഒരു പോപ്പ്-അപ്പ് മോഡൽ വിൻഡോ സൃഷ്‌ടിക്കുന്നതിന്, ഘടകം എടുത്ത് രൂപകൽപ്പന ചെയ്‌ത് ഒരു ലിങ്ക് ചേർക്കുക, അതിൽ ക്ലിക്കുചെയ്യുമ്പോൾ ദൃശ്യമാകും:

ഒരു സമ്പൂർണ്ണ മോഡൽ വിൻഡോ സൃഷ്ടിക്കുന്നതിനുള്ള അടുത്ത ഘട്ടം ഞങ്ങളുടെ വിൻഡോ മറയ്ക്കുന്ന ഒരു ബട്ടൺ ചേർക്കുക എന്നതാണ്. ഞങ്ങൾ ഒരു സാധാരണ ലിങ്കിൽ നിന്ന് ഒരു ബട്ടൺ ഉണ്ടാക്കും, അത് ഞങ്ങളുടേതിലേക്ക് ചേർത്ത് അത് രൂപകൽപ്പന ചെയ്യും:

പ്രമാണ ശീർഷകം #okno (വീതി: 300px; ഉയരം: 50px; ടെക്സ്റ്റ്-അലൈൻ: മധ്യഭാഗം; പാഡിംഗ്: 15px; ബോർഡർ: 3px സോളിഡ് #0000cc; ബോർഡർ-റേഡിയസ്: 10px; നിറം: #0000cc; ഡിസ്പ്ലേ: ഒന്നുമില്ല; സ്ഥാനം: കേവലം; മുകളിൽ : 0; വലത്: 0; താഴെ: 0; ഇടത്: 0; മാർജിൻ: ഓട്ടോ; ) #okno:ലക്ഷ്യം (ഡിസ്‌പ്ലേ: ബ്ലോക്ക്;).ക്ലോസ് (ഡിസ്‌പ്ലേ: ഇൻലൈൻ-ബ്ലോക്ക്; ബോർഡർ: 1px സോളിഡ് #0000cc; നിറം: #0000cc ; പാഡിംഗ്: 0 12px; മാർജിൻ: 10px; ടെക്സ്റ്റ്-ഡെക്കറേഷൻ: ഒന്നുമില്ല; പശ്ചാത്തലം: #f2f2f2; ഫോണ്ട്-സൈസ്: 14pt; കഴ്സർ: പോയിൻ്റർ; .ക്ലോസ്: ഹോവർ (പശ്ചാത്തലം: #e6e6ff;) പോപ്പ്-അപ്പ് വിൻഡോ!
വിൻഡോ അടയ്ക്കുക കോൾ പോപ്പ്-അപ്പ് വിൻഡോ ശ്രമിക്കുക »

ഒരു മോഡൽ വിൻഡോ പ്രദർശിപ്പിക്കുമ്പോൾ പേജ് മങ്ങിക്കുന്നതിൻ്റെ ഫലത്തിനായി, നിലവിലുള്ള എല്ലാ വിൻഡോ കോഡും നിങ്ങൾ അധികമായി സ്ഥാപിക്കേണ്ടതുണ്ട്:

പോപ്പ്-അപ്പ് വിൻഡോ!
ഒരു വിൻഡോ അടയ്ക്കുക

പാരൻ്റ് ഒരെണ്ണം സ്ഥാപിച്ച് വിൻഡോയുടെ മുഴുവൻ വീതിയിലും ഉയരത്തിലും നീട്ടുക. ഞങ്ങൾ അത് ഡിസ്പ്ലേ സജ്ജമാക്കി: ഒന്നുമില്ല; അതിലേക്ക് വിൻഡോ കോൾ ലിങ്ക് റീഡയറക്‌ട് ചെയ്യുക.

കുട്ടിക്ക്, ഡിസ്പ്ലേ നീക്കം ചെയ്യുക: ഒന്നുമില്ല; (രക്ഷിതാവ് അതിനുള്ളിൽ എല്ലാം മറയ്ക്കുമെന്നതിനാൽ ഇത് ഇനി ആവശ്യമില്ല). തൽഫലമായി, മോഡൽ വിൻഡോ പ്രദർശിപ്പിക്കുന്നതിനും പേജ് പശ്ചാത്തലം മങ്ങിക്കുന്നതിനും ഇപ്പോൾ രക്ഷിതാവിന് ഉത്തരവാദിത്തമുണ്ട്, കൂടാതെ വിൻഡോ അലങ്കരിക്കാനുള്ള ഉത്തരവാദിത്തം കുട്ടിക്ക് മാത്രമായിരിക്കും:

പ്രമാണ ശീർഷകം #zatemnenie (പശ്ചാത്തലം: rgba(102, 102, 102, 0.5); വീതി: 100%; ഉയരം: 100%; സ്ഥാനം: കേവലം; മുകളിൽ: 0; ഇടത്: 0; ഡിസ്പ്ലേ: ഒന്നുമില്ല; ) #okno ( വീതി: 300px; ഉയരം: 50px; ടെക്സ്റ്റ്-അലൈൻ: മധ്യഭാഗം; പാഡിംഗ്: 15px; ബോർഡർ: 3px സോളിഡ് #0000cc; ബോർഡർ-റേഡിയസ്: 10px; നിറം: #0000cc; സ്ഥാനം: കേവലം; മുകളിൽ: 0; വലത്: 0; താഴെ: 0; ഇടത്: 0; മാർജിൻ: ഓട്ടോ; പശ്ചാത്തലം: #fff; ) #zatemnenie:ലക്ഷ്യം (ഡിസ്‌പ്ലേ: ബ്ലോക്ക്;).ക്ലോസ് (ഡിസ്‌പ്ലേ: ഇൻലൈൻ-ബ്ലോക്ക്; ബോർഡർ: 1px സോളിഡ് #0000cc; നിറം: #0000cc; പാഡിംഗ്: 0 12px; മാർജിൻ: 10px; ടെക്‌സ്‌റ്റ്-ഡെക്കറേഷൻ: ഒന്നുമില്ല; പശ്ചാത്തലം: #f2f2f2; ഫോണ്ട്-സൈസ്: 14pt; കഴ്‌സർ: പോയിൻ്റർ; ) .ക്ലോസ്:ഹോവർ (പശ്ചാത്തലം: #e6e6ff;) പോപ്പ്-അപ്പ് വിൻഡോ!
വിൻഡോ അടയ്ക്കുക കോൾ പോപ്പ്-അപ്പ് വിൻഡോ ശ്രമിക്കുക »

ശ്രദ്ധിക്കുക: പേജിൽ പ്രവേശിക്കുമ്പോൾ ഉപയോക്താവിന് ഉടൻ ഒരു പോപ്പ്-അപ്പ് വിൻഡോ കാണണമെങ്കിൽ (അതിനെ ഒരു ലിങ്ക് വഴി വിളിക്കരുത്), തുടർന്ന് പേജ് വിലാസം വിൻഡോ ഐഡിയ്‌ക്കൊപ്പം നൽകേണ്ടതുണ്ട് (ഉദാഹരണത്തിന്, വിലാസം ഇതുപോലെ നോക്കുക: site.ru/papka/documet. html#window).

മോഡലുകൾ, ഓവർലേകൾ, ഡയലോഗുകൾ, നിങ്ങൾ അവയെ എന്ത് വിളിച്ചാലും, ഈ UI പാറ്റേൺ പുനർവിചിന്തനം ചെയ്യേണ്ട സമയമാണിത്. അവർ ആദ്യമായി രംഗത്ത് വന്നപ്പോൾ, ഒരു ഉപയോക്തൃ ഇൻ്റർഫേസ് പ്രശ്‌നത്തിനുള്ള ഗംഭീരമായ പരിഹാരമായിരുന്നു മോഡലുകൾ. ആദ്യം, അവർ ഉപയോക്തൃ ഇൻ്റർഫേസ് ലളിതമാക്കുന്നു. രണ്ടാമതായി, സ്ക്രീൻ സ്ഥലം ലാഭിക്കുന്നു. അതിനുശേഷം, ഡിസൈനർമാർ മോഡലുകൾ എളുപ്പത്തിൽ സ്വീകരിച്ചു, ചിലർ അവയെ അങ്ങേയറ്റം കൈവരിച്ചു. ഭയാനകമായ പോപ്പ്-അപ്പ് വിൻഡോയുടെ ഇന്നത്തെ പതിപ്പായി മോഡലുകൾ മാറിയിരിക്കുന്നു. ഉപയോക്താക്കൾ മോഡൽ വിൻഡോകൾ അരോചകമായി കാണുകയും അവ സഹജമായും സ്വയമേവ അടയ്ക്കാൻ പഠിക്കുകയും ചെയ്യുന്നു.

നിർവ്വചനം:

പ്രധാന ആപ്ലിക്കേഷൻ വിൻഡോയുടെ മുകളിൽ ഇരിക്കുന്ന ഒരു ഘടകമാണ് മോഡൽ വിൻഡോ. ഇത് പ്രധാന വിൻഡോയെ തടയുന്നു, പക്ഷേ ചൈൽഡ് മോഡൽ വിൻഡോയ്ക്ക് പിന്നിൽ അത് ദൃശ്യമാക്കുന്നു. പാരൻ്റ് ആപ്ലിക്കേഷനിലേക്ക് മടങ്ങുന്നതിന് മുമ്പ് ഉപയോക്താക്കൾ മോഡൽ വിൻഡോയുമായി സംവദിക്കണം. — വിക്കിപീഡിയ

ഉപയോഗം

നിങ്ങൾക്ക് ആവശ്യമുള്ളപ്പോഴെല്ലാം നിങ്ങൾക്ക് ഒരു മോഡൽ വിൻഡോ ഉപയോഗിക്കാം:

ഉപയോക്താവിൻ്റെ ശ്രദ്ധ ആകർഷിക്കുക

കൂടുതൽ പ്രധാനപ്പെട്ട ഒന്നിലേക്ക് അവരുടെ ശ്രദ്ധ ആകർഷിക്കാൻ ഉപയോക്താവിൻ്റെ നിലവിലെ ചുമതല തടസ്സപ്പെടുത്താൻ നിങ്ങൾ ആഗ്രഹിക്കുമ്പോൾ ഉപയോഗിക്കുക.

ഉപയോക്തൃ ഇൻപുട്ട് ആവശ്യമാണ്

ഉപയോക്താവിൽ നിന്ന് വിവരങ്ങൾ ലഭിക്കാൻ താൽപ്പര്യപ്പെടുമ്പോൾ ഉപയോഗിക്കുക. ഉദാഹരണത്തിന്, ഒരു രജിസ്ട്രേഷനും അംഗീകാര ഫോമും.

സന്ദർഭത്തിൽ അധിക വിവരങ്ങൾ കാണിക്കുക

പാരൻ്റ് പേജിൻ്റെ സന്ദർഭം നഷ്‌ടപ്പെടാതെ കൂടുതൽ വിവരങ്ങൾ കാണിക്കണമെങ്കിൽ ഉപയോഗിക്കുക. ഉദാഹരണത്തിന്, വലിയ ചിത്രങ്ങളോ വീഡിയോകളോ കാണിക്കുന്നു.

കൂടുതൽ വിവരങ്ങൾ കാണിക്കുക (സന്ദർഭത്തിന് പുറത്ത്)

പാരൻ്റ് പേജുമായോ മറ്റ് പേജുകളുടെ "സ്വതന്ത്രമായ" മറ്റ് പാരാമീറ്ററുകളുമായോ നേരിട്ട് ബന്ധമില്ലാത്ത വിവരങ്ങൾ കാണിക്കാൻ നിങ്ങൾ താൽപ്പര്യപ്പെടുമ്പോൾ ഉപയോഗിക്കുക. ഉദാഹരണത്തിന്, അറിയിപ്പുകൾ.

ശ്രദ്ധിക്കുക: പിശക് സന്ദേശങ്ങൾ, ടാസ്‌ക് വിജയ സന്ദേശങ്ങൾ അല്ലെങ്കിൽ മുന്നറിയിപ്പ് സന്ദേശങ്ങൾ പ്രദർശിപ്പിക്കുന്നതിന് മോഡലുകൾ ഉപയോഗിക്കരുത്. അവ പേജിൽ വിടുക.

ഒരു മോഡൽ വിൻഡോയുടെ അനാട്ടമി

മോശമായി നടപ്പിലാക്കിയ ഓവർലേകൾ ടാസ്ക് പൂർത്തീകരണത്തെ തടസ്സപ്പെടുത്തും. നിങ്ങളുടെ മോഡൽ വിൻഡോ ഉപയോക്താക്കളെ ശല്യപ്പെടുത്തുന്നില്ലെന്ന് ഉറപ്പാക്കാൻ, ഇനിപ്പറയുന്നവ പരിഗണിക്കുക:

1.എസ്കേപ്പ് ഹാച്ച്

മോഡൽ വിൻഡോ അടയ്‌ക്കാനുള്ള മാർഗം നൽകി ഉപയോക്താക്കൾക്ക് രക്ഷപ്പെടാനുള്ള വഴി നൽകുക. ഇനിപ്പറയുന്ന രീതികളിൽ ഇത് നേടാനാകും:

റദ്ദാക്കുക ബട്ടൺ
ബട്ടൺ അടയ്ക്കുക
എസ്കേപ്പ് കീ
വിൻഡോയ്ക്ക് പുറത്ത് ക്ലിക്ക് ചെയ്യുക

പ്രവേശനക്ഷമത നുറുങ്ങ്: വിൻഡോ അടയ്ക്കുന്നതിന് എല്ലാ മോഡൽ വിൻഡോയ്ക്കും ആക്സസ് ചെയ്യാവുന്ന കീബോർഡ് നിയന്ത്രണം ഉണ്ടായിരിക്കണം. ഉദാഹരണത്തിന്, എസ്കേപ്പ് കീ വിൻഡോ അടയ്ക്കണം.

2. തലക്കെട്ട്

ഒരു മോഡൽ തലക്കെട്ട് ഉപയോഗിച്ച് ഉപയോക്താവിന് സന്ദർഭം നൽകുക. യഥാർത്ഥ പേജ് വിട്ടിട്ടില്ലാത്തതിനാൽ അവൻ/അവൾ എവിടെയാണെന്ന് അറിയാൻ ഇത് ഉപയോക്താക്കളെ അനുവദിക്കുന്നു.

ട്വീറ്റ് ബട്ടൺ ക്ലിക്ക് ചെയ്ത ശേഷം — മോഡൽ ഹെഡർ: ഒരു പുതിയ ട്വീറ്റ് സൃഷ്‌ടിക്കുക. സന്ദർഭം നൽകുന്നു.

നുറുങ്ങ്: ബട്ടൺ ലേബലും (മോഡൽ വിൻഡോ സമാരംഭിക്കുന്നു) മോഡൽ ശീർഷകവും പൊരുത്തപ്പെടണം

3. ബട്ടൺ

ബട്ടൺ ലേബലുകളിൽ വ്യക്തമായ പേരുകൾ ഉണ്ടായിരിക്കണം. ഏത് ബട്ടണിനും ഇത് ബാധകമാണ്. മോഡൽ വിൻഡോകൾക്കായി, 'ക്ലോസ്' ബട്ടൺ ഒരു 'ക്ലോസ്' ബട്ടൺ ഐക്കൺ അല്ലെങ്കിൽ ഒരു 'x' ആയി പ്രതിനിധീകരിക്കണം.

ഇൻവിഷനിൽ വ്യക്തമായ ബട്ടൺ ഐക്കണുകൾ ഉണ്ട്

ശ്രദ്ധിക്കുക: ബട്ടൺ ഐക്കൺ ആശയക്കുഴപ്പത്തിലാക്കരുത്. ഉപയോക്താവ് ഒരു പ്രവർത്തനം റദ്ദാക്കാൻ ശ്രമിക്കുകയും മോഡൽ വിൻഡോ മറ്റൊരു റദ്ദാക്കൽ ബട്ടൺ ഉപയോഗിച്ച് പോപ്പ് അപ്പ് ചെയ്യുകയും ചെയ്താൽ, ആശയക്കുഴപ്പം ഉടലെടുക്കുന്നു. “ഞാൻ റദ്ദാക്കൽ റദ്ദാക്കുകയാണോ? അതോ ഞാൻ അത് തുടരണോ?"

4. വലിപ്പവും സ്ഥലവും നിർണ്ണയിക്കൽ

ഒരു മോഡൽ വിൻഡോ വളരെ വലുതോ ചെറുതോ ആയിരിക്കരുത്, അത് ശരിയായ വലുപ്പത്തിൽ ആയിരിക്കണമെന്ന് നിങ്ങൾ ആഗ്രഹിക്കുന്നു. സന്ദർഭം സംരക്ഷിക്കുക എന്നതാണ് ലക്ഷ്യം, അതിനാൽ മോഡൽ വിൻഡോ മുഴുവൻ സ്ക്രീനും എടുക്കരുത്. ഉള്ളടക്കം മോഡൽ വിൻഡോയുമായി പൊരുത്തപ്പെടണം. ഒരു സ്ക്രോൾബാർ ആവശ്യമെങ്കിൽ, നിങ്ങൾക്ക് ഒരു പുതിയ പേജ് സൃഷ്ടിക്കാൻ കഴിയും.

സ്‌ക്രീനിൻ്റെ മുകളിലാണ് ലൊക്കേഷൻ, കാരണം മൊബൈൽ കാഴ്‌ചയിൽ മോഡൽ വിൻഡോ താഴെ വെച്ചാൽ അത് നഷ്‌ടപ്പെട്ടേക്കാം.
വലിപ്പം — മോഡൽ വിൻഡോ സ്ക്രീനിൻ്റെ 50% ൽ കൂടുതൽ ഉപയോഗിക്കരുത്.

5. ഫോക്കസ്

നിങ്ങൾ ഒരു മോഡൽ വിൻഡോ തുറക്കുമ്പോൾ, ലൈറ്റ്ബോക്സ് ഇഫക്റ്റ് ഉപയോഗിക്കുക (പശ്ചാത്തലം ഇരുണ്ടതാക്കുക). ഇത് മോഡൽ വിൻഡോയിലേക്ക് ശ്രദ്ധ ആകർഷിക്കുകയും ഉപയോക്താവിന് പാരൻ്റ് പേജുമായി സംവദിക്കാൻ കഴിയില്ലെന്ന് സൂചിപ്പിക്കുന്നു.

പ്രവേശനക്ഷമത ടിപ്പ്: മോഡൽ വിൻഡോയിലേക്ക് കീബോർഡ് ഫോക്കസ് സജ്ജീകരിക്കുക.

6. ഉപയോക്താവ് ഒരു മോഡൽ വിൻഡോ സമാരംഭിക്കുന്നു

ഒരു പോപ്പ്-അപ്പ് മോഡൽ വിൻഡോ ഉപയോഗിച്ച് ഉപയോക്താക്കളെ അത്ഭുതപ്പെടുത്തരുത്. ഒരു ബട്ടണിൽ ക്ലിക്ക് ചെയ്യുക, ഒരു ലിങ്ക് പിന്തുടരുക, അല്ലെങ്കിൽ ഒരു ഓപ്‌ഷൻ തിരഞ്ഞെടുക്കൽ എന്നിവ പോലുള്ള ഒരു ഉപയോക്തൃ പ്രവർത്തനത്തെ ഒരു മോഡൽ വിൻഡോ ട്രിഗർ ചെയ്യാൻ അനുവദിക്കുക. സ്വന്തമായി തുറക്കുന്ന മോഡൽ വിൻഡോകൾ ഉപയോക്താവിനെ അത്ഭുതപ്പെടുത്തുകയും വേഗത്തിൽ അടയ്ക്കുകയും ചെയ്യും.

ലോഗിൻ ബട്ടൺ അമർത്തിയാൽ ഉണ്ടാകുന്ന മോഡൽ വിൻഡോ മൊബൈൽ ഉപകരണങ്ങളിൽ മോഡൽ വിൻഡോകൾ

മോഡലുകളും മൊബൈൽ ഉപകരണങ്ങളും സാധാരണയായി ഒരുമിച്ച് പ്രവർത്തിക്കുന്നില്ല. മോഡലുകൾ വളരെ വലുതായതിനാലോ സ്‌ക്രീൻ റിയൽ എസ്റ്റേറ്റ് കൂടുതലായതിനാലോ വളരെ ചെറുതായതിനാലോ ഉള്ളടക്കം കാണുന്നത് ബുദ്ധിമുട്ടാണ്. ഉപകരണ കീബോർഡും നെസ്റ്റഡ് സ്ക്രോൾബാറുകളും പോലുള്ള ഘടകങ്ങൾ ചേർക്കുക. ഉപയോക്താക്കൾക്ക് അവരുടെ വിരലുകൾ നീക്കാനും സൂം ചെയ്യാനും മാത്രമേ കഴിയൂ, മോഡൽ വിൻഡോ ഫീൽഡ് പിടിക്കാൻ ശ്രമിക്കുന്നു. മോഡൽ വിൻഡോകൾക്ക് മികച്ച ഇതരമാർഗങ്ങളുണ്ട്, അതിനാൽ അവ മൊബൈൽ ഉപകരണങ്ങളിൽ ഉപയോഗിക്കാൻ പാടില്ല.

നന്നായി നിർമ്മിച്ച മോഡൽ വിൻഡോ - ഫേസ്ബുക്ക് പ്രവേശനക്ഷമത

കീബോർഡ്

മോഡൽ വിൻഡോകൾ സൃഷ്ടിക്കുമ്പോൾ, ആക്സസ് ചെയ്യാവുന്ന കീബോർഡ് നിയന്ത്രണങ്ങൾ ചേർക്കാൻ മറക്കരുത്. ഇനിപ്പറയുന്നവ പരിഗണിക്കുക:

ഒരു മോഡൽ വിൻഡോ തുറക്കുന്നു — ഡയലോഗ് ബോക്സിലേക്ക് വിളിക്കുന്ന ഘടകം കീബോർഡിൽ നിന്ന് ആക്സസ് ചെയ്യാവുന്നതായിരിക്കണം.

ഒരു ഡയലോഗ് വിൻഡോയിലേക്ക് ഫോക്കസ് നീക്കുന്നു — ഒരു മോഡൽ വിൻഡോ തുറക്കുമ്പോൾ, കീബോർഡ് ഫോക്കസ് തുടക്കത്തിലേക്ക് മാറ്റണം.

കീബോർഡ് ഫോക്കസ് നിയന്ത്രിക്കുന്നു — ഒരു ഡയലോഗ് ബോക്സിലേക്ക് ഫോക്കസ് നീക്കുമ്പോൾ, ഡയലോഗ് ബോക്സ് അടയ്ക്കുന്നത് വരെ അതിനുള്ളിൽ "ലോക്ക്" ചെയ്തിരിക്കണം.

ഒരു ഡയലോഗ് ക്ലോസ് ചെയ്യുന്നു — ഓരോ മോഡൽ വിൻഡോയ്ക്കും ആ വിൻഡോ അടയ്ക്കുന്നതിന് ആക്സസ് ചെയ്യാവുന്ന കീബോർഡ് നിയന്ത്രണം ഉണ്ടായിരിക്കണം.

ARIA

ആക്‌സസ് ചെയ്യാവുന്ന റിച്ച് ഇൻ്റർനെറ്റ് ആപ്ലിക്കേഷനുകൾ (ARIA) സ്റ്റാൻഡേർഡ് വെബ് ഉള്ളടക്കത്തിൻ്റെയും വെബ് ആപ്ലിക്കേഷനുകളുടെയും പ്രവേശനക്ഷമത മെച്ചപ്പെടുത്തുന്നതിനുള്ള വഴികൾ നിർവ്വചിക്കുന്നു.

ആക്സസ് ചെയ്യാവുന്ന മോഡൽ വിൻഡോ സൃഷ്ടിക്കുമ്പോൾ ഇനിപ്പറയുന്ന ARIA ടാഗുകൾ ഉപയോഗപ്രദമാകും: റോൾ = "ഡയലോഗ്", ഏരിയ - മറച്ചത്, ഏരിയ - ലേബൽ

കൂടാതെ, കാഴ്ച കുറവുള്ള ഉപയോക്താക്കളെ കുറിച്ച് അറിഞ്ഞിരിക്കുക. സ്‌ക്രീനിലെ ഉള്ളടക്കങ്ങൾ വലുതാക്കാൻ അവർക്ക് മോണിറ്ററുകളിൽ സ്‌ക്രീൻ മാഗ്നിഫയറുകൾ ഉപയോഗിക്കാം. ഒരിക്കൽ വലുതാക്കിയാൽ, ഉപയോക്താവിന് സ്ക്രീനിൻ്റെ ഒരു ഭാഗം മാത്രമേ കാണാനാകൂ. ഈ സാഹചര്യത്തിൽ, മൊബൈൽ ഉപകരണങ്ങളിലെ അതേ രീതിയിൽ മോഡൽ വിൻഡോകൾ പ്രദർശിപ്പിക്കും.

ഉപസംഹാരം

മോഡൽ വിൻഡോകൾ സ്വയമേവ അടയ്ക്കാൻ ആളുകൾ പഠിച്ചിട്ടുണ്ടെങ്കിൽ, നിങ്ങൾ എന്തിനാണ് അവ ഉപയോഗിക്കാൻ ആഗ്രഹിക്കുന്നത്?

ഉപയോക്താവിൻ്റെ ശ്രദ്ധ ആകർഷിക്കുക, സന്ദർഭം നിലനിർത്തുക, ഉപയോക്തൃ ഇൻ്റർഫേസ് ലളിതമാക്കുക എന്നിവയാണ് മോഡൽ വിൻഡോകളുടെ വലിയ നേട്ടങ്ങൾ. എന്നിരുന്നാലും, ഉപയോക്തൃ അനുഭവത്തെ തടസ്സപ്പെടുത്തുകയും ഒരു മോഡൽ വിൻഡോയ്ക്ക് പിന്നിൽ ഉള്ളടക്കം മറച്ച് പാരൻ്റ് പേജുമായി സംവദിക്കുന്നത് അസാധ്യമാക്കുകയും ചെയ്യുന്നതിനാൽ അവയ്ക്ക് ദോഷങ്ങളുമുണ്ട്. ഒരു മോഡൽ വിൻഡോ എല്ലായ്പ്പോഴും ഉത്തരമായിരിക്കില്ല. തിരഞ്ഞെടുക്കുമ്പോൾ, ഇനിപ്പറയുന്നവ പരിഗണിക്കുക:

ചെക്ക്‌ലിസ്റ്റ്

എപ്പോഴാണ് നമ്മൾ മോഡൽ വിൻഡോകൾ കാണിക്കുക?
ഞങ്ങൾ എങ്ങനെയാണ് മോഡൽ വിൻഡോകൾ പ്രദർശിപ്പിക്കുന്നത്?
മോഡൽ വിൻഡോകൾ എങ്ങനെയിരിക്കും?
എന്ത് വിവരങ്ങളാണ് ഞങ്ങൾ നൽകുകയും ശേഖരിക്കുകയും ചെയ്യുന്നത്?

മോഡൽ വിൻഡോകൾക്കായി ഒരു ഇതര UI ഘടകമുണ്ട്: നോൺ-മോഡൽ അല്ലെങ്കിൽ ടോസ്റ്റ് എന്നറിയപ്പെടുന്നത് (മെറ്റീരിയൽ ഡിസൈനിൽ മൈക്രോസോഫ്റ്റും ഗൂഗിളും ഉപയോഗിക്കുന്ന പദം). കൂടുതൽ അറിയാൻ എൻ്റെ അടുത്ത പോസ്റ്റ് വായിക്കുക.

ഒരിക്കൽ കൂടി ഞാൻ മോഡൽ (പോപ്പ്-അപ്പ്) വിൻഡോകൾ സൃഷ്ടിക്കുന്ന വിഷയത്തിലേക്ക് തിരിയുന്നു. ഈയിടെയായി, ജാവാസ്ക്രിപ്റ്റ്, jQuery പ്ലഗിനുകൾ മുതലായവ ഉപയോഗിക്കാതെ, പോപ്പ്-അപ്പ് വിൻഡോകൾ എക്സിക്യൂട്ട് ചെയ്യുന്നതിനുള്ള വിവിധ സാങ്കേതിക വിദ്യകളിൽ എനിക്ക് കൂടുതൽ താൽപ്പര്യമുണ്ട്. ശുദ്ധമായ ശൈലികൾ ഉപയോഗിക്കുന്നതിനുള്ള സാധ്യതയും പുതിയ പ്രവർത്തനങ്ങളുടെ ഒഴിച്ചുകൂടാനാവാത്ത സാധ്യതയുമാണ് കൂടുതൽ താൽപ്പര്യമുള്ളത്.
ബഹുമാനപ്പെട്ട ചില ബൂർഷ്വാകളുടെ സംഭവവികാസങ്ങളെ അടിസ്ഥാനമാക്കി, അവർ ഇക്കാര്യത്തിൽ തന്ത്രശാലികളാണ്, CSS3 ഉപയോഗിച്ച് മോഡൽ വിൻഡോകൾ സൃഷ്ടിക്കുന്നതിൽ അവർക്ക് നല്ല ഫലങ്ങൾ ലഭിക്കും. ഒന്നാമതായി, അന്തിമ ഫലത്തിൻ്റെ കൂടുതലോ കുറവോ സ്ഥിരതയുള്ള ക്രോസ്-ബ്രൗസർ അനുയോജ്യത കൈവരിക്കുക എന്നതാണ് ചുമതല, തീർച്ചയായും, ഏറ്റവും കുറഞ്ഞ നഷ്ടങ്ങളോടെ, HTML, CSS എന്നിവയിലെ മൊത്തം കോഡിൻ്റെ അളവ് കുറയ്ക്കുക. വെബ്‌സൈറ്റ് നിർമ്മാണത്തിലെ ദീർഘകാല തൊഴിലാളികൾക്ക് ജീവിതം എളുപ്പമാക്കുക.
അവസാനം എന്താണ് സംഭവിക്കുന്നത്, ഇന്ന് ഇക്കാര്യത്തിൽ എനിക്കുണ്ട്, ഞങ്ങൾ കാണും, അതേ സമയം, CSS3 ൻ്റെ "മാജിക്" ഉപയോഗിച്ച് എങ്ങനെ പോപ്പ്-അപ്പ് മോഡൽ വിൻഡോകൾ നിർമ്മിക്കാമെന്ന് ഞങ്ങൾ പഠിക്കും.

അപ്ഡേറ്റ് ചെയ്തത്: 10/27/2017

ആരംഭിക്കുന്നതിന്, ഈ വിഷയത്തിൽ താൽപ്പര്യമുള്ള എല്ലാവർക്കും, മോഡൽ വിൻഡോകൾ വിവിധ പതിപ്പുകളിൽ എങ്ങനെ പ്രവർത്തിക്കുന്നു എന്നതിൻ്റെ ഒരു ഉദാഹരണം നോക്കാനും ഉറവിടങ്ങൾ ഡൗൺലോഡ് ചെയ്യാനും കഴിയും:

ഈ ഘട്ടത്തിൽ ആധുനിക ബ്രൗസറുകൾക്ക് (IE 9+, Firefox, Safari, Opera, Chrome) മാത്രമേ വിശ്വസനീയമായ പിന്തുണ നേടാനാകൂ എന്നതിനാൽ, ഈ പാഠം പ്രവർത്തനത്തിനുള്ള വഴികാട്ടിയായി എടുക്കരുത്. ഐഇ ബ്രൗസറിൻ്റെ പുരാതന പതിപ്പുകൾ ഇപ്പോഴും ഉപയോക്താക്കൾക്കിടയിൽ വളരെ പ്രചാരത്തിലാണെന്നത് കണക്കിലെടുക്കുമ്പോൾ, ഈ ലേഖനം ഒരുതരം പരീക്ഷണമായി കാണാൻ ഞാൻ ശുപാർശ ചെയ്യുന്നു, ഇത് CSS3 ൻ്റെ കഴിവുകളുടെ പ്രകടനമാണ്.

ശരി, ഇപ്പോൾ നമുക്ക് css3 ഉപയോഗിച്ച് html കോഡിൻ്റെ യഥാർത്ഥ ലേഔട്ടിലേക്കും മോഡൽ വിൻഡോയുടെ സ്റ്റൈലിംഗിലേക്കും നേരിട്ട് പോകാം)))

ഘട്ടം 1. HTML

ആദ്യം, നമുക്ക് ചില അടിസ്ഥാന HTML മാർക്ക്അപ്പ് ഉണ്ടാക്കാം. നിങ്ങൾക്ക് കാണാനാകുന്നതുപോലെ, മോഡൽ വിൻഡോകളുടെയും ബട്ടണുകളുടെയും (ലിങ്കുകൾ) html മാർക്ക്അപ്പ് സജീവമാക്കുന്നതിന് ഞങ്ങൾ പരിഗണിക്കുകയാണെങ്കിൽ അടിസ്ഥാന രൂപകൽപ്പന വളരെ ലളിതമാണ്. ഓരോ മോഡൽ വിൻഡോയും ഒരു സ്റ്റാൻഡേർഡ് കണ്ടെയ്‌നർ മാത്രമല്ല, ഉള്ളിൽ ചില ഉള്ളടക്കങ്ങളും ഒരു "അടയ്‌ക്കുക" ബട്ടണും ഉള്ളത്, CSS ഉപയോഗിച്ച് മാത്രമായി രൂപീകരിച്ചതാണ്.

< a href= "#win1" class = "button button-green" >വിൻഡോ 1 തുറക്കുക< a href= "#win2" class = "button button-red" >വിൻഡോ 2 തുറക്കുക< a href= "#win3" class = "button button-blue" >വിൻഡോ 3-ൽ വീഡിയോ< a href= "#win4" class = "button button-orange" >വിൻഡോ 4 ലെ ഫോട്ടോ< a href= "#win5" >< img title= "" src= "img/realism_lrg.jpg" width= "150" height= "150" alt= "" /> < a href= "#x" class = "overlay" id= "win1" > < div class = "popup" > < a class = "close" title= "അടയ്ക്കുക" href= "#close" > < a href= "#x" class = "overlay" id= "win2" > < div class = "popup" >ഇവിടെ നിങ്ങൾക്ക് ചിത്രങ്ങളോ വീഡിയോകളോ ഉള്ള ഏത് ഉള്ളടക്കവും വാചകവും സ്ഥാപിക്കാം!< a class = "close" title= "അടയ്ക്കുക" href= "#close" > < a href= "#x" class = "overlay" id= "win3" > < div class = "popup" > < h2>ശീർഷകം ഇവിടെ നിങ്ങൾ നിങ്ങളുടെ വീഡിയോ അല്ലെങ്കിൽ ഏതെങ്കിലും മൂന്നാം കക്ഷി റിസോഴ്‌സ്, YouTube, Vimeo മുതലായവയിൽ നിന്ന് തിരുകുക (iframe, embed) ...< a class = "close" title= "അടയ്ക്കുക" href= "page.html" onclick= "return false" > < a href= "#x" class = "overlay" id= "win4" > < div class = "popup" > < img class = "is-image" src= "ваша-картинка.jpg" alt= "" /> < a class = "close" title= "അടയ്ക്കുക" href= "#close" > < a href= "#x" class = "overlay" id= "win5" > < div class = "popup" > < img class = "is-image" src= "ваша-картинка.jpg" alt= "" /> < a class = "close" title= "അടയ്ക്കുക" href= "#close" >

വിൻഡോ തുറക്കുക 1 വിൻഡോ തുറക്കുക 2 വീഡിയോ വിൻഡോയിൽ വീഡിയോ 3 വിൻഡോ 4 ലെ ഫോട്ടോ ഇവിടെ നിങ്ങൾക്ക് ചിത്രങ്ങളോ വീഡിയോകളോ ഉള്ള ഏത് ഉള്ളടക്കവും വാചകവും സ്ഥാപിക്കാം! ശീർഷകം നിങ്ങളുടെ വീഡിയോ അല്ലെങ്കിൽ ഏതെങ്കിലും മൂന്നാം കക്ഷി ഉറവിടം, YouTube, Vimeo മുതലായവയിൽ നിന്ന് (iframe, embed) ഇവിടെ ചേർക്കുന്നു...

മുകളിലെ കോഡ് ഉദാഹരണത്തിൽ, വ്യക്തതയ്ക്കായി, മോഡൽ വിൻഡോകളുടെ കണ്ടെയ്‌നറുകളിൽ ഞാൻ ഹ്രസ്വ വിശദീകരണങ്ങൾ എഴുതി. സാമ്യമനുസരിച്ച്, പോപ്പ്-അപ്പ് വിൻഡോയുടെ ഡിവി കണ്ടെയ്‌നറിൽ നിങ്ങളുടെ ഏതെങ്കിലും ഉള്ളടക്കം സ്ഥാപിക്കണം, അത് ലളിതമായ ടെക്‌സ്‌റ്റുകളോ ചിത്രങ്ങളോ വീഡിയോകളോ ഏതെങ്കിലും മൂന്നാം-കക്ഷി ഉറവിടം, YouTube, Vimeo മുതലായവയിൽ നിന്നുള്ളവയോ ആകട്ടെ. മോഡൽ വിൻഡോസ് ടെക്‌സ്‌റ്റ് കോൾ ചെയ്യാൻ നിങ്ങൾക്ക് ലിങ്കുകൾ ഉണ്ടാക്കാം അല്ലെങ്കിൽ ഉദാഹരണത്തിലെന്നപോലെ ഫോമിൽ ഫോർമാറ്റ് ചെയ്യാം.

ഘട്ടം 2: CSS

അടുത്ത ഘട്ടം, ഇതാണ് ഏറ്റവും രസകരമായ കാര്യം, ഞങ്ങളുടെ മോഡൽ വിൻഡോയ്ക്ക് ആവശ്യമായ എല്ലാ ശൈലികളും തയ്യാറാക്കുകയും രൂപഭാവം രൂപകൽപ്പന ചെയ്യുകയും പ്രവർത്തനക്ഷമത ചേർക്കുകയും ചെയ്യേണ്ടത് പ്രധാനമാണ്. ആശയക്കുഴപ്പം ഉണ്ടാകാതിരിക്കാൻ ഞാൻ അടിസ്ഥാന പേജ് ശൈലികൾ ഒഴിവാക്കി, കൂടുതൽ വ്യക്തതയ്ക്കായി, അഭിപ്രായങ്ങൾക്കൊപ്പം ചില നിയമങ്ങൾ നേർപ്പിച്ചു:

/* ഫേഡ് ലെയറിനും മോഡലിനുമുള്ള അടിസ്ഥാന ശൈലികൾ */ .ഓവർലേ (മുകളിൽ: 0; വലത്: 0; താഴെ: 0; ഇടത്: 0; z-സൂചിക: 10; ഡിസ്പ്ലേ: ഒന്നുമില്ല; /* ഫേഡ് പശ്ചാത്തലം */ പശ്ചാത്തല നിറം : rgba(0, 0, 0, 0.65); സ്ഥാനം: സ്ഥിരം; /* ഫിക്സഡ് പൊസിഷനിംഗ് */ കഴ്സർ: ഡിഫോൾട്ട്; /* കഴ്സർ തരം */ ) /* ഡിമ്മിംഗ് ലെയർ സജീവമാക്കുക */ .ഓവർലേ: ടാർഗെറ്റ് ( ഡിസ്പ്ലേ: ബ്ലോക്ക്; ) / * മോഡൽ വിൻഡോ ശൈലികൾ */ .പോപ്പ്അപ്പ് (മുകളിൽ: -100%; വലത്: 0; ഇടത്: 50%; ഫോണ്ട് വലുപ്പം: 14px; z- സൂചിക: 20; മാർജിൻ: 0; വീതി: 85%; മിനിട്ട് വീതി : 320px ; പരമാവധി വീതി: 600px; /* ഫിക്സഡ് പൊസിഷനിംഗ്, സ്ക്രോൾ ചെയ്യുമ്പോൾ വിൻഡോ സ്ഥിരതയുള്ള */ സ്ഥാനം: സ്ഥിരം; പാഡിംഗ്: 15px; അതിർത്തി: 1px സോളിഡ് #383838; പശ്ചാത്തലം: #fefe; /* വൃത്താകൃതിയിലുള്ള കോണുകൾ */ -webkit-ബോർഡർ -radius : 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; ബോർഡർ-റേഡിയസ്: 4px; ഫോണ്ട്: 14px/18px "Tahoma", Arial, sans-serif; /* പുറം നിഴൽ */ -webkit -box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3); -moz-box-shadow: 0 15px 20px rgba(0 ,0 ,0,.22),0 19px 60px rgba(0,0,0,.3); -ms-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3); ബോക്സ്-ഷാഡോ: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3); -webkit-transform: translate(-50%, -500%); -ms-transform: translate(-50%, -500%); -o-transform: translate(-50%, -500%); രൂപാന്തരപ്പെടുത്തുക: വിവർത്തനം ചെയ്യുക (-50%, -500%); -webkit-transition: -webkit-transform 0.6s ഈസ്-ഔട്ട്; -moz-transition: -moz-transform 0.6s ഈസ്-ഔട്ട്; -o-transition: -o-transform 0.6s ഈസ്-ഔട്ട്; സംക്രമണം: 0.6സെ ഈസ്-ഔട്ട് രൂപാന്തരപ്പെടുത്തുക; ) /* മോഡൽ ബ്ലോക്ക് സജീവമാക്കുക */ .overlay:target+.popup ( -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); -o-transform: translate (-50%, 0); രൂപാന്തരപ്പെടുത്തുക: വിവർത്തനം ചെയ്യുക (-50%, 0); മുകളിൽ: 20%; ) /* ക്ലോസ് ബട്ടൺ രൂപപ്പെടുത്തുക */ .ക്ലോസ് ( മുകളിൽ: -10px; വലത്: -10px; വീതി: 20px; ഉയരം: 20px; സ്ഥാനം: കേവലം; പാഡിംഗ്: 0; ബോർഡർ: 2px സോളിഡ് #ccc; -webkit-ബോർഡർ-റേഡിയസ്: 15px; -moz-ബോർഡർ-റേഡിയസ്: 15px; -ms-ബോർഡർ-റേഡിയസ്: 15px; -o-ബോർഡർ -ആരം: 15px; ബോർഡർ-റേഡിയസ്: 15px; പശ്ചാത്തല-നിറം: rgba(61, 61, 61, 0.8); -webkit-box-shadow: 0px 0px 10px #000; -moz-box-shadow: 0px 0px 000; ബോക്സ്-ഷാഡോ: 0px 0px 10px #000; ടെക്സ്റ്റ്-അലൈൻ: സെൻ്റർ; ടെക്സ്റ്റ്-ഡെക്കറേഷൻ: ഒന്നുമില്ല; ഫോണ്ട്: 13px/20px "തഹോമ", ഏരിയൽ, സാൻസ്-സെരിഫ്; ഫോണ്ട്-വെയ്റ്റ്: ബോൾഡ്; -വെബ്കിറ്റ്-ട്രാൻസിഷൻ: എല്ലാ അനായാസവും .8s; -moz-സംക്രമണം: എല്ലാ എളുപ്പവും .8s; -ms-സംക്രമണം: എല്ലാ എളുപ്പവും .8s; -o-ട്രാൻസിഷൻ: എല്ലാ എളുപ്പവും .8s; സംക്രമണം: എല്ലാ എളുപ്പവും .8s; .ക്ലോസ്:മുമ്പ് (നിറം: rgba( 255, 255, 255, 0. 9); ഉള്ളടക്കം: "എക്സ്"; ടെക്സ്റ്റ് ഷാഡോ: 0 -1px rgba(0, 0, 0, 0.9); ഫോണ്ട് വലുപ്പം: 12px; ) .ക്ലോസ്:ഹോവർ (പശ്ചാത്തല-നിറം: rgba(252, 20, 0, 0.8); -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg) ; -o-transform: തിരിക്കുക(360deg); രൂപമാറ്റം: തിരിക്കുക(360deg); ) /* വിൻഡോയ്ക്കുള്ളിലെ ചിത്രങ്ങൾ */ .പോപ്പ്അപ്പ് img (വീതി: 100%; ഉയരം: ഓട്ടോ; ) /* ലഘുചിത്രങ്ങൾ ഇടത്/വലത് */ . pic-left, .pic-right (വീതി: 25%; ഉയരം: ഓട്ടോ; ) .pic-ഇടത് (ഫ്ലോട്ട്: ഇടത്; മാർജിൻ: 5px 15px 5px 0; ) .pic-വലത് (ഫ്ലോട്ട്: വലത്; മാർജിൻ: 5px 0 5px 15px ; ) /* m-മീഡിയ ഘടകങ്ങൾ, ഫ്രെയിമുകൾ */ .പോപ്പ്അപ്പ് ഉൾച്ചേർക്കൽ, .popup iframe (മുകളിൽ: 0; വലത്: 0; താഴെ: 0; ഇടത്: 0; ഡിസ്പ്ലേ:ബ്ലോക്ക്; മാർജിൻ: യാന്ത്രികം; മിനി-വീതി: 320px ; പരമാവധി വീതി: 600px; വീതി: 100%; . പോപ്പ്അപ്പ് h2 (/* തലക്കെട്ട് 2 */ മാർജിൻ: 0; നിറം: #008000; പാഡിംഗ്: 5px 0px 10px; ടെക്സ്റ്റ്-അലൈൻ: ഇടത്; ടെക്സ്റ്റ്-ഷാഡോ: 1px 1px 3px #adadad; font-weight: 500; font-size: 1.4em; font-family: "Tahoma", Arial, sans-serif; line-height: 1.3; ) /* ഖണ്ഡികകൾ */ .popup p (മാർജിൻ: 0 ; പാഡിംഗ്: 5px 0)

നിങ്ങൾക്ക് കാണാനാകുന്നതുപോലെ, പ്രിയ സുഹൃത്തുക്കളെ, എല്ലാം വളരെ ലളിതമാണ്, അനാവശ്യമായ ആശയക്കുഴപ്പം ഇല്ല. നിങ്ങൾ എല്ലാം ശരിയായി ചെയ്യുകയാണെങ്കിൽ, നിങ്ങളുടെ ആയുധപ്പുരയിൽ നിങ്ങൾക്ക് ഒരു അത്ഭുതകരമായ ഉപകരണം ലഭിക്കും, അതിൽ നിങ്ങൾക്ക് ഏത് ഉള്ളടക്കവും സ്ഥാപിക്കാൻ കഴിയും, അത് ടെക്സ്റ്റ് ഉള്ളടക്കം, ഫോട്ടോഗ്രാഫുകൾ, വിവിധ രജിസ്ട്രേഷൻ, ഫീഡ്ബാക്ക് ഫോമുകൾ അല്ലെങ്കിൽ ഏതെങ്കിലും മൂന്നാം കക്ഷി ഉറവിടത്തിൽ നിന്നുള്ള വീഡിയോകൾ. പാരാമീറ്ററുകൾ ഉപയോഗിച്ച് പരീക്ഷിക്കുക, നിങ്ങൾക്ക് ഇഷ്ടമുള്ളത് പോലെ വിൻഡോ പരിഷ്ക്കരിക്കുക. സാധ്യമെങ്കിൽ, അഭിപ്രായങ്ങളിൽ പെട്ടെന്ന് ഉണ്ടാകുന്ന നിങ്ങളുടെ അനുഭവങ്ങളോ പ്രശ്നങ്ങളോ പങ്കിടുക.

അല്ലെങ്കിൽ ഇത് നിങ്ങൾക്ക് രസകരമായിരിക്കാം: കൂട്ടിച്ചേർക്കലുകൾ:

പലപ്പോഴും, പലപ്പോഴും, ഒരു മോഡ് അടയ്ക്കുമ്പോൾ വീഡിയോ പ്ലേബാക്ക് എങ്ങനെ ശരിയായി നിർത്താം എന്ന ചോദ്യം എന്നോട് ചോദിക്കാറുണ്ട്. ജാലകം. നിങ്ങൾ മോഡൽ വിൻഡോ അടയ്ക്കുമ്പോൾ, ഡെമോയിലെ വീഡിയോ പ്ലേബാക്ക് നിർത്തുന്നു. ഡെമോയിൽ ഞാൻ വിൻഡോ ക്ലോസ് ബട്ടണിനായി onclick ഇവൻ്റ് ഉപയോഗിച്ചു, ലിങ്കിലെ ഡെമോ പേജിൻ്റെ വിലാസം സൂചിപ്പിക്കുന്നു, അതായത്. വീഡിയോ വിൻഡോ സ്ഥിതിചെയ്യുന്ന പേജ്:

നിങ്ങൾക്ക് ഒരു ശൂന്യമായ href="" ആട്രിബ്യൂട്ട് ഉള്ള ഒരു ലിങ്ക് ഉപയോഗിക്കാം, രണ്ട് സാഹചര്യങ്ങളിലും പേജ് വീണ്ടും ലോഡുചെയ്യുന്നു, അതനുസരിച്ച്, വിൻഡോ അടയ്ക്കുകയും വീഡിയോ നിർത്തുകയും ചെയ്യുന്നു, തീർച്ചയായും ഒരു ഊന്നുവടിയാണ്, പക്ഷേ കൂടുതൽ ഫലപ്രദവും സാധുതയുള്ളതുമായ മറ്റൊരു പരിഹാരമില്ല. ജാവാസ്ക്രിപ്റ്റ് ബന്ധിപ്പിക്കുന്നു, ഇപ്പോൾ ഞാൻ ഇവിടെ ഇല്ല.

< script type= "text/javascript" src= "http://www.youtube.com/player_api" >

JavaScript API ഉപയോഗിച്ച്, നിങ്ങൾക്ക് javaScript കോഡ് ഉപയോഗിച്ച് Chromeless Player, YouTube ഉൾച്ചേർത്ത പ്ലേയർ എന്നിവ നിയന്ത്രിക്കാനാകും. ഉൾച്ചേർത്ത വീഡിയോ ഉള്ള ഞങ്ങളുടെ മോഡൽ ബ്ലോക്കിന്, എക്സിക്യൂട്ടബിൾ js ഇതുപോലെയായിരിക്കും:

< script>var കളിക്കാരൻ; ഫംഗ്‌ഷൻ onYouTubePlayerAPIReady() (player = new YT. Player("player" ) ; ) $("#stop" ) . ക്ലിക്ക്(ഫംഗ്ഷൻ () (പ്ലെയർ. stopVideo() ) )

var കളിക്കാരൻ; ഫംഗ്‌ഷൻ onYouTubePlayerAPIReady() (player = പുതിയ YT.Player("player"); ) $("#stop").click(function())( player.stopVideo() ))

ഐഡി = "സ്റ്റോപ്പ്" ഉള്ള ബട്ടണിൽ നിങ്ങൾ ക്ലിക്ക് ചെയ്യുമ്പോൾ ഫംഗ്ഷൻ വിളിക്കപ്പെടും, വിൻഡോ അടയ്ക്കുകയും വീഡിയോ പ്ലേബാക്ക് നിർത്തുകയും ചെയ്യും.
എന്നിരുന്നാലും, മറ്റ് വീഡിയോ സേവനങ്ങൾക്ക്, ടാംബോറിനുകൾ ഉപയോഗിച്ച് നൃത്തം ചെയ്യുന്നത് വ്യത്യസ്തമായിരിക്കും))) എന്ന് നിങ്ങൾ മനസ്സിലാക്കണം. എപ്പോഴും ഒരു ചോയ്സ് ഉണ്ടെങ്കിലും - റെഡിമെയ്ഡ് പ്രത്യേക പ്ലഗിനുകൾ ഉപയോഗിക്കാൻ.

റഷ്യൻ സംസാരിക്കുന്ന രാജ്യങ്ങളിൽ താമസിക്കുന്ന വെബ് ഡിസൈനർമാരും സംരംഭകരും ഒരുപക്ഷേ ഇംഗ്ലീഷ് ഭാഷാ ടെംപ്ലേറ്റുകൾ മാത്രമല്ല ഉപയോഗിക്കാൻ ആഗ്രഹിക്കുന്നത്. റഷ്യൻ ഭാഷയിലുള്ള റെഡിമെയ്ഡ് സൊല്യൂഷനുകളുടെ ശേഖരങ്ങളിലേക്ക് പ്രവേശനം നേടാനും അവർ ആഗ്രഹിക്കുന്നു. അതിനാൽ, ടെംപ്ലേറ്റ്മോൺസ്റ്റർ മാർക്കറ്റിൽ ഇപ്പോൾ അവതരിപ്പിച്ചിരിക്കുന്ന ഏറ്റവും പുതിയ വിഭാഗത്തിലേക്ക് നിങ്ങളുടെ ശ്രദ്ധ ആകർഷിക്കാൻ ഞങ്ങൾ ആഗ്രഹിക്കുന്നു. ഓരോ ടെംപ്ലേറ്റുകൾക്കുമുള്ള വാചകം സ്വമേധയാ എഴുതിയതാണ് എന്നത് എടുത്തുപറയേണ്ടതാണ്. കൂടാതെ, ആകർഷകമായ ഒരു ഓൺലൈൻ പ്രോജക്‌റ്റ് സൃഷ്‌ടിക്കുന്നതിന് നിങ്ങൾക്ക് വിപുലമായ പ്രോഗ്രാമിംഗ് പരിജ്ഞാനം ആവശ്യമില്ല.

എല്ലാ ബഹുമാനത്തോടെയും ആൻഡ്രൂ

CSS ഉപയോഗിച്ച് ഒരു മോഡൽ വിൻഡോ സൃഷ്ടിക്കുന്നതിനെക്കുറിച്ചുള്ള ലേഖനത്തിൽ, ഒരു മോഡൽ വിൻഡോ എന്താണെന്നും എന്തുകൊണ്ട് അത് ആവശ്യമാണെന്നും ഞങ്ങൾ പരിശോധിച്ചു. ഞങ്ങൾ css മാത്രം ഉപയോഗിച്ച് ഒരു വിൻഡോയും സൃഷ്ടിച്ചു. ഒരു ജാവാസ്ക്രിപ്റ്റ് മോഡൽ വിൻഡോ എങ്ങനെ സൃഷ്ടിക്കാമെന്ന് ഈ ലേഖനത്തിൽ ഞാൻ വിവരിക്കും. കൂടുതൽ വ്യക്തമായി പറഞ്ഞാൽ, ഞങ്ങൾ സൃഷ്ടിക്കാൻ jquery ലൈബ്രറി ഉപയോഗിക്കും.

അതിനാൽ നമുക്ക് jquery-യിൽ ഒരു മോഡൽ വിൻഡോ ഉണ്ടാക്കാൻ തുടങ്ങാം. പ്രശ്നം സങ്കീർണ്ണമാക്കുന്നതിന്, നമുക്ക് ഇനിപ്പറയുന്ന വ്യവസ്ഥ ക്രമീകരിക്കാം. ഞങ്ങൾ ഒരു പ്രതികരണ മോഡൽ വിൻഡോ സൃഷ്ടിക്കേണ്ടതുണ്ട്. സ്‌ക്രീൻ വലുപ്പം കുറയുമ്പോൾ, വിൻഡോയും കുറയും എന്ന വസ്തുതയിൽ പൊരുത്തപ്പെടുത്തൽ അടങ്ങിയിരിക്കും. html മാർക്ക്അപ്പ് ഉപയോഗിച്ച് ഒരു അഡാപ്റ്റീവ് jquery മോഡൽ വിൻഡോ സൃഷ്ടിക്കാൻ തുടങ്ങാം.

ഇവിടെ ക്ലിക്ക് ചെയ്യുക! X ഒരു കോൾ അഭ്യർത്ഥിക്കുക

കോഡ് ഉപയോഗിച്ച് എല്ലാം വ്യക്തമാണെന്ന് ഞാൻ കരുതുന്നു. ഞങ്ങളുടെ സൈറ്റിൻ്റെ ഉള്ളടക്കം സ്ഥിതിചെയ്യുന്ന ഒരു wrapper.wrapper ഞങ്ങളുടെ പക്കലുണ്ട്. ഐഡി ഗോവിൻഡോ ഉള്ള ഒരു മോഡൽ വിൻഡോ വിളിക്കാൻ ഒരു ബട്ടണുണ്ട്, മോഡൽ_വിൻഡോ ഐഡിയുള്ള വിൻഡോ തന്നെ, ഓവർലേയിംഗ് ലെയർ മൈഓവർലേയും. ഇനി നമുക്ക് css ശൈലികൾ എഴുതാം.

റാപ്പർ (വീതി: 100%; മാർജിൻ: ഓട്ടോ; വീതി: ഓട്ടോ;/*100%*/ പരമാവധി വീതി: 960px;/*പരമാവധി റാപ്പർ വീതി*/ ബോർഡർ: 1px സോളിഡ് #000; പശ്ചാത്തല നിറം: # F5F9FB; ) .button( /*-------*/ ) #modal_window (വീതി: 34%;/*പ്രതികരണത്തിന്*/ ഉയരം: 300px; ബോർഡർ-റേഡിയസ്: 10px; ബോർഡർ: 3px #fff സോളിഡ്; പശ്ചാത്തലം : # e0e0e0; മാർജിൻ-ടോപ്പ്: -30%; മാർജിൻ-ഇടത്: 33%; ഡിസ്പ്ലേ: ഒന്നുമില്ല; അതാര്യത: 0; /*ആനിമേഷനുള്ള പൂർണ്ണ സുതാര്യത */ z-ഇൻഡക്സ്: 5000; /*വിൻഡോ മുകളിലെ പാളി*/ പാഡിംഗ് ആയിരിക്കണം -മുകളിൽ: 20px; ടെക്സ്റ്റ്-അലൈൻ: മധ്യഭാഗം; സ്ഥാനം: ബന്ധു; ) #modal_window #window_close (വീതി: 21px; ഉയരം: 21px; സ്ഥാനം: കേവലം; മുകളിൽ: 10px; വലത്: 10px; കഴ്സർ: പോയിൻ്റർ; ഡിസ്പ്ലേ: ബ്ലോക്ക്; ) #myoverlay ( z-index: 3000; /*എല്ലാ ലെയറുകൾക്കും മുകളിൽ എന്നാൽ വിൻഡോയ്ക്ക് താഴെ */ സ്ഥാനം: സ്ഥിരം; /*സൈറ്റ് ഓവർലാപ്പ് ചെയ്യുന്നതിന്*/ പശ്ചാത്തല നിറം: #000; അതാര്യത: 0.5; വീതി: 100%; ഉയരം: 100 %; /*പൂർണ്ണ സ്‌ക്രീൻ */ മുകളിൽ: 0; ഇടത്: 0; കഴ്‌സർ: പോയിൻ്റർ; പ്രദർശനം: ഒന്നുമില്ല; )

നമുക്ക് css കോഡ് വിവരിക്കാം. ഞങ്ങൾ block.wrapper അഡാപ്റ്റീവ് ആയി സജ്ജീകരിച്ചു, സ്‌ക്രീൻ വലുപ്പത്തെ ആശ്രയിച്ച് ഇത് മാറുന്നു, പക്ഷേ 960px-ൽ കൂടരുത്. ഞാൻ ബട്ടൺ കോഡ് കാണിക്കില്ല. # മോഡൽ_വിൻഡോ വിൻഡോയുടെ വീതി ഞങ്ങൾ ഒരു ശതമാനമായി സജ്ജമാക്കുന്നു, വീതി .wrapper-ൻ്റെ വീതിയെ ആശ്രയിച്ചിരിക്കും. വിൻഡോയുടെ മധ്യഭാഗത്തേക്ക്, മാർജിൻ 33% ആയി സജ്ജമാക്കുക. ഇത് 50% -17% ആയി കണക്കാക്കുന്നു, ഇവിടെ 17% എന്നത് വിൻഡോയുടെ പകുതി വീതിയാണ്. പ്രോപ്പർട്ടി ഡിസ്പ്ലേ ഉപയോഗിച്ച് ഞങ്ങൾ വിൻഡോ മറയ്ക്കുന്നു: ഒന്നുമില്ല, അതാര്യത: 0. കോഡ് #window_close, #myoverlay എന്നിവ ഉപയോഗിച്ച്, എല്ലാം വ്യക്തമാണെന്ന് ഞാൻ കരുതുന്നു. ഇനി നമുക്ക് jquery കോഡ് എഴുതാം. jqery ഇതിനകം ബന്ധിപ്പിച്ചിട്ടുണ്ടെന്ന് ഞങ്ങൾ അനുമാനിക്കും.

$(document).ready(function() ( $("#gowindow").click(function())(// button on click $("#myoverlay").fadeIn(400, //Overlay layer കാണിക്കുക ഫങ്ഷൻ() ( $("#modal_window") .css("ഡിസ്‌പ്ലേ", "ബ്ലോക്ക്") //ജാലകം ദൃശ്യമാക്കുക.ആനിമേറ്റ്((ഒപാസിറ്റി: 1, ടോപ്പ്: "50%"), 200); //കൂടുതൽ സുതാര്യത, വിൻഡോ സുഗമമായി പുറത്തേക്ക് നീങ്ങുന്നു );)); /* വിൻഡോ നീക്കം ചെയ്യുക */ $("#window_close, #myoverlay").click(function())( //Overlapping layer-ൽ ക്ലിക്ക് ചെയ്യുക അല്ലെങ്കിൽ $ ക്രോസ് ചെയ്യുക ("#modal_window") .animate((ഒപാസിറ്റി : 0, മുകളിൽ: "45%"), 200, //സുതാര്യത ഓണാണ്, വിൻഡോ ഫംഗ്‌ഷൻ മുകളിലേക്ക് പോകുന്നു())( $(this).css("ഡിസ്‌പ്ലേ", "none"); //ജാലകം അദൃശ്യമാക്കുക $("# myoverlay").fadeOut(400); //ഓവർലാപ്പ് ലെയർ നീക്കം ചെയ്യുക); ));));

Js കോഡിന് വിശദീകരണമൊന്നും ആവശ്യമില്ലെന്ന് ഞാൻ കരുതുന്നു, കാരണം ഞാൻ അത് നന്നായി കമൻ്റ് ചെയ്തിട്ടുണ്ട്. അത്രയേയുള്ളൂ, അതിനാൽ നമുക്ക് സംഗ്രഹിക്കാം. ഞങ്ങൾ ഒരു ലളിതമായ jquery റെസ്‌പോൺസീവ് മോഡൽ വിൻഡോ ഉണ്ടാക്കി

ഒരു മോഡൽ അല്ലെങ്കിൽ പോപ്പ്-അപ്പ് വിൻഡോ (വ്യത്യസ്‌തമായി വിളിക്കുന്നു) ഒരു വെബ്‌സൈറ്റിൽ ഉപയോഗിക്കുന്ന വളരെ സാധാരണമായ ഒന്നാണ്. നിങ്ങൾ ഒരു പ്രത്യേക ഒബ്‌ജക്റ്റിൽ (ലിങ്ക്, ബട്ടൺ അല്ലെങ്കിൽ ഫോട്ടോ) ക്ലിക്കുചെയ്യുമ്പോൾ ദൃശ്യമാകുന്ന വിവിധ വിവരങ്ങൾ (മിക്കപ്പോഴും വാചകം കൂടാതെ, നിരവധി ചിത്രങ്ങളുണ്ടെങ്കിൽ) പ്രദർശിപ്പിക്കുക എന്നതാണ് ഇതിൻ്റെ പ്രധാന ലക്ഷ്യം.

മോഡൽ വിൻഡോയിൽ, മിക്ക കേസുകളിലും, സൈറ്റിൽ സ്ഥലം ലാഭിക്കാൻ, പ്രത്യേകിച്ച് പ്രധാനപ്പെട്ട വിവരങ്ങൾ എഴുതിയിട്ടില്ല, ഉദാഹരണത്തിന്: ഫീഡ്ബാക്ക്, അംഗീകാരം, അല്ലെങ്കിൽ.

ചില പ്രധാനപ്പെട്ട ഇവൻ്റുകളിലേക്ക് സന്ദർശകരുടെ ശ്രദ്ധ ആകർഷിക്കാൻ വെബ്‌മാസ്റ്റർമാർ ആഗ്രഹിക്കുന്ന സന്ദർഭങ്ങളുണ്ട്, ഉദാഹരണത്തിന്: ബോണസുകളും സമ്മാനങ്ങളും സ്വീകരിക്കുക, പ്രമോഷനുകളിലും സ്വീപ്‌സ്റ്റേക്കുകളിലും പങ്കെടുക്കുക മുതലായവ. കൂടാതെ സന്ദർശകൻ്റെ പങ്കാളിത്തവും ആഗ്രഹവുമില്ലാതെ മോഡൽ വിൻഡോകൾ പോപ്പ് അപ്പ് ചെയ്യുന്നു.

ഈ ആവശ്യങ്ങൾക്കായി, ഒരു പേജ് തുറക്കുമ്പോൾ ആരെങ്കിലും ഒരു മോഡൽ വിൻഡോ ഉണ്ടാക്കുന്നു, അത് ഒരു നിശ്ചിത സമയത്തിന് ശേഷം ഒരു ജാവ സ്ക്രിപ്റ്റ് ഉപയോഗിച്ച് പേജിൽ ദൃശ്യമാകും, തീർച്ചയായും, മറ്റുള്ളവർ സന്ദർശകനെ അവരുടെ സൈറ്റിൽ വ്യത്യസ്ത രീതികളിൽ നിലനിർത്താനും ഒരു മോഡൽ ഉപയോഗിക്കാനും ആഗ്രഹിക്കുന്നു. പേജ് അടയ്‌ക്കുമ്പോൾ വിൻഡോ, അത് ആ നിമിഷം പോപ്പ് അപ്പ് ചെയ്യുന്നു, ക്ലയൻ്റ് പേജ് വിടാനും അടയ്ക്കാനും താൽപ്പര്യപ്പെടുമ്പോൾ.

ഒരു പോപ്പ്-അപ്പ് മോഡൽ വിൻഡോയുടെ ആദ്യ ഉദാഹരണം.

css മാത്രം ഉപയോഗിച്ച് ഒരു മോഡൽ വിൻഡോ നിർമ്മിക്കുന്നതിന്, പോപ്പ്-അപ്പ് വിൻഡോയിലേക്ക് റഫറൻസിങ് ഒബ്‌ജക്റ്റിനായി html കോഡ് എഴുതുകയും മനോഹരമായ മോഡൽ വിൻഡോ ശരിയായി പ്രദർശിപ്പിക്കുന്നതിന് സ്റ്റൈൽ ഫയലിൽ പാരാമീറ്ററുകളും പ്രോപ്പർട്ടികളും നൽകുകയും വേണം.

.my_modal (സ്ഥാനം: സ്ഥിരം; മുകളിൽ: 0; വലത്: 0; താഴെ: 0; ഇടത്: 0; പശ്ചാത്തലം: rgba (0,0,0,0.5); z- സൂചിക: 1050; ഡിസ്പ്ലേ: ഒന്നുമില്ല; മാർജിൻ: 0; padding:0;).my_modal:target(display:block;overflow-y:auto;).my_modal-dialog(position:relative;width:auto;margin:10px;)@media (min-width:576px)(. my_modal-dialog(max-width:460px;margin:30px auto;)).my_modal-content(സ്ഥാനം:ബന്ധു;പ്രദർശനം:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex ;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;background-color:#fff; -webkit-background-clip:padding-box;background-clip:padding-box;border:1px solid rgba(0,0,0,.2);border-radius:6px;outline:0;)@media (മിനിറ്റ് -width:768px)(.my_modal-content(-webkit-box-shadow:0 5px 15px rgba(0,0,0,.5);box-shadow:0 5px 15px rgba(0,0,0,.5 ;)).my_modal-header(display:block;padding:14px 14px 4px;).my_modal-title(margin-top:0;margin-bottom:0;line-height:1.5;font-size:1.25rem; font-size:1.25rem -weight:500;border-bottom:1px solid #d4d4d4;).close(padding:1px 5px 0;border:1px solid #000;border-radius:50%;font-family:sans-serif;font-size : 24px;font-weight:700;line-height:1;color:#000;text-shadow:0 1px 0 #fff;opacity:.5;text-decoration:none;top:4px;right:4px;സ്ഥാനം : absolute;).close:focus,.close:hover(color:#000;text-decoration:none;cursor:pointer;opacity:.75;).my_modal-body(position:relative;-webkit-box-flex : 1;-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:15px;overflow:auto;) മോഡൽ വിൻഡോ തുറക്കുക

മോഡൽ വിൻഡോ ശീർഷകം

മോഡൽ വിൻഡോയുടെ ടെക്സ്റ്റ് വിവരങ്ങൾ ഇതാ...

മുകളിലെ കോഡ് പകർത്തി, ഒട്ടിച്ച്, index.html എന്ന ടെക്‌സ്‌റ്റ് ഡോക്യുമെൻ്റിലേക്ക് സംരക്ഷിക്കുക, തുടർന്ന് മോഡൽ വിൻഡോയുടെ പ്രവർത്തനക്ഷമത പരിശോധിക്കുന്നതിന് അത് നിങ്ങളുടെ ബ്രൗസറിൽ തുറക്കുക. നിങ്ങളുടെ പ്രോജക്റ്റിൻ്റെ രൂപകൽപ്പനയെ അടിസ്ഥാനമാക്കി മോഡൽ വിൻഡോയുടെ രൂപവും ഇവിടെ ക്രമീകരിക്കാം.

ഉദാഹരണത്തിന്, ചില വിവരങ്ങൾ പ്രദർശിപ്പിക്കുന്നതിന് ഞാൻ പലപ്പോഴും വിവിധ ആനിമേഷൻ ഇഫക്റ്റുകൾ ഉള്ള ഒരു മോഡൽ വിൻഡോ ഉപയോഗിക്കുന്നു, അത് കൂടുതൽ രസകരമായി തോന്നുന്നു.

ഒരു ബട്ടൺ ക്ലിക്ക് ചെയ്യുമ്പോൾ മോഡൽ വിൻഡോ

ഈ ഉദാഹരണത്തിൽ, ഒരു മോഡൽ വിൻഡോ തുറക്കാൻ ഒരു ബട്ടൺ എങ്ങനെ രജിസ്റ്റർ ചെയ്യാമെന്ന് ഞാൻ കാണിക്കും.
ഇത് ചെയ്യുന്നതിന്, ബട്ടണിനും മോഡൽ വിൻഡോ ബ്ലോക്കിനുമുള്ള കോഡിൽ HTML ഓൺക്ലിക്ക് ആട്രിബ്യൂട്ട് ചേർക്കുകയും അതുവഴി ഒരു പ്രത്യേക പേരിൽ ഒരു ഫംഗ്ഷൻ വിളിക്കുകയും ചെയ്യേണ്ടതുണ്ട്.

ഒരു മോഡൽ വിൻഡോ തുറക്കുന്നതിനുള്ള ഒരു ബട്ടണിൻ്റെ ഉദാഹരണം (ക്ലിക്ക് ചെയ്യുക).

മോഡൽ വിൻഡോ ബട്ടൺ

#ഓവർലേ (സ്ഥാനം: സ്ഥിരം; മുകളിൽ: 0; ഇടത്: 0; വീതി: 100%; ഉയരം: 100%; പശ്ചാത്തല-നിറം: rgba(0, 0, 0, 0.4); z-ഇൻഡക്സ്: 999; ഓവർഫ്ലോ: ഓട്ടോ; ദൃശ്യപരത: മറഞ്ഞിരിക്കുന്നു; അതാര്യത: 0; സംക്രമണം: അതാര്യത 0.7സെ ഈസ്-ഇൻ 0സെ; ) .പോപ്പ്അപ്പ് (മുകളിൽ: 10%; ഇടത്: 0; വലത്: 0; ഫോണ്ട് വലുപ്പം: 14px; മാർജിൻ: ഓട്ടോ; വീതി: 80%; മിനിട്ട് വീതി: 200px; പരമാവധി വീതി: 600px; സ്ഥാനം: കേവലം; പാഡിംഗ്: 15px 20px; അതിർത്തി: 1px സോളിഡ് #666; പശ്ചാത്തല നിറം: #fefefe; z-ഇൻഡക്സ്: 1000; ബോർഡർ-റേഡിയസ്: ഫോണ്ട്: 10px; /18px "Tahoma", Arial, sans-serif; box-shadow: 0 0px 14px rgba(0, 0, 0, 0.4); ) .ക്ലോസ് (മുകളിൽ: 10px; വലത്: 10px; വീതി: 32px; ഉയരം: 32px; സ്ഥാനം: കേവലം; അതിർത്തി: ഒന്നുമില്ല; ബോർഡർ-റേഡിയസ്: 50%; പശ്ചാത്തല-നിറം: rgba(0, 130, 230, 0.9); ബോക്സ്-ഷാഡോ: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); കഴ്‌സർ: പോയിൻ്റർ; രൂപരേഖ: ഒന്നുമില്ല; .ക്ലോസ്: മുമ്പ് (നിറം: rgba(255, 255, 255, 0.9); ഉള്ളടക്കം: "X"; font-family : ഏരിയൽ, ഹെൽവെറ്റിക്ക, sans-serif, ഫോണ്ട് വലുപ്പം: 14px, ഫോണ്ട് ഭാരം: സാധാരണം, ടെക്സ്റ്റ് അലങ്കാരം: ഒന്നുമില്ല; ടെക്സ്റ്റ് ഷാഡോ: 0 -1px rgba(0, 0, 0, 0.9); ) .ക്ലോസ്:ഹോവർ (പശ്ചാത്തല-നിറം: rgba(180, 20, 14, 0.8); ) #ഓവർലേ .പോപ്പ്അപ്പ് p.zag(മാർജിൻ:20px 0 10px;padding:0 0 6px;color:tomato;font-size: 16px;ഫോണ്ട്-ഭാരം:ബോൾഡ്;ബോർഡർ-ബോട്ടം:1px സോളിഡ് തക്കാളി;)

തുടർന്ന് മോഡൽ വിൻഡോയുടെ html കോഡ് പകർത്തി ഒട്ടിക്കുക:

മോഡൽ വിൻഡോ

ആദ്യ ടെക്സ്റ്റ് വിവരം...

രണ്ടാമത്തെ വാചക വിവരം...

ഫോളോ-അപ്പ് ടെക്സ്റ്റ് വിവരങ്ങൾ...

മോഡൽ വിൻഡോ

അവസാനമായി, മോഡൽ വിൻഡോ വിളിക്കാനും അടയ്ക്കാനും സ്ക്രിപ്റ്റിന് മുമ്പ് എഴുതുക:

var b = document.getElementById("ഓവർലേ"); ഫംഗ്ഷൻ swa())( b.style.visibility = "visible"; b.style.opacity = "1"; b.style.transition = "എല്ലാ 0.7s ഈസ്-ഔട്ട് 0സെ"; ) ഫംഗ്ഷൻ swa2())( b .സ്റ്റൈൽ .വിസിബിലിറ്റി = "മറഞ്ഞിരിക്കുന്നു"; b.style.opacity = "0"; )

ഒരു മോഡൽ വിൻഡോ സൃഷ്ടിക്കുമ്പോൾ എന്തെങ്കിലും പ്രവർത്തിക്കുന്നില്ലെങ്കിൽ സുഹൃത്തുക്കളുമായി പങ്കിടുകയും ചോദ്യങ്ങൾ ചോദിക്കുകയും ചെയ്യുക.