1. jQuery "ലളിതമായ മോഡൽ ബോക്‌സിൽ" മോഡൽ വിൻഡോ 2. jQuery പ്ലഗിൻ "LeanModal"

മോഡൽ വിൻഡോകളിൽ ഉള്ളടക്കം പ്രദർശിപ്പിക്കുന്നു. ഡെമോ പേജിൽ പ്ലഗിൻ പ്രവർത്തനക്ഷമമായി കാണുന്നതിന്, ലിങ്കിൽ ക്ലിക്ക് ചെയ്യുക: സൈൻ അപ്പ് ഫോം അല്ലെങ്കിൽ അടിസ്ഥാന ഉള്ളടക്കം.

3. jQuery പ്ലഗിൻ "ToastMessage"

പോപ്പ്-അപ്പ് സന്ദേശങ്ങൾ. പ്ലഗിൻ രണ്ട് പതിപ്പുകളിലാണ് വരുന്നത്. ഒരു സാഹചര്യത്തിൽ, ഒരു നിശ്ചിത സമയത്തിന് ശേഷം സന്ദേശങ്ങൾ സ്വയം അപ്രത്യക്ഷമാകും, രണ്ടാമത്തെ നടപ്പാക്കലിൽ, ഒരു സന്ദേശം അടയ്ക്കുന്നതിന്, നിങ്ങൾ ഒരു ബട്ടണിൽ ക്ലിക്കുചെയ്യേണ്ടതുണ്ട്.

4. മോഡൽ വിൻഡോയിൽ പോപ്പ് അപ്പ് ചെയ്യുന്ന ഉള്ളടക്കം

പ്ലഗിൻ "വെളിപ്പെടുത്തുക". പ്ലഗിൻ പ്രവർത്തനക്ഷമമായി കാണുന്നതിന്, ഡെമോ പേജിലെ "ഫയർ എ റിവീൽ മോഡൽ" ബട്ടണിൽ ക്ലിക്ക് ചെയ്യുക.

5. മനോഹരമായ ഡയലോഗ് ബോക്സുകൾ

പ്ലഗിൻ പ്രവർത്തനക്ഷമമായി കാണുന്നതിന് ഡെമോ പേജിലെ ക്രോസിൽ ക്ലിക്ക് ചെയ്യുക.

6. Mootools മോഡൽ വിൻഡോ, "MooDialog" പ്ലഗിൻ 7. സ്‌ക്രീനിന്റെ മുകളിലുള്ള jQuery പോപ്പ്അപ്പ് പാനൽ 8. jQuery പോപ്പ്അപ്പ് വിൻഡോ

ഒരു പോപ്പ്-അപ്പ് വിൻഡോയിൽ ഒരു ഫീഡ്‌ബാക്ക് ഫോം പ്രദർശിപ്പിക്കുന്നതിനുള്ള jQuery പ്ലഗിൻ.

10. Facebook ഡയലോഗ് ബോക്സുകൾ നടപ്പിലാക്കുന്നതിനായി MooTools പ്ലഗിൻ "ലൈറ്റ്ഫേസ്"

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

11. jQuery മോഡൽ വിൻഡോ

jQuery-യിലെ ഒരു പോപ്പ്അപ്പ് ഡയലോഗ്.

12. jQuery മോഡൽ വിൻഡോകൾ

മനോഹരമായ പോപ്പ്-അപ്പ് മോഡൽ വിൻഡോകൾ. മൂന്ന് ശൈലികൾ. വിൻഡോകൾ തുറക്കുന്നതിനുള്ള 3 ലിങ്കുകൾ ഡെമോ പേജിൽ അടങ്ങിയിരിക്കുന്നു.

13. jQuery മോഡൽ വിൻഡോകൾ

നിരവധി തരത്തിലുള്ള പോപ്പ്-അപ്പ് മോഡൽ വിൻഡോകൾ. പ്ലഗിൻ പ്രവർത്തനക്ഷമമായി കാണുന്നതിന്, ഡെമോ പേജിലെ ലിങ്കിൽ ക്ലിക്കുചെയ്യുക.

15. പേജിന്റെ മുകളിൽ പോപ്പ് അപ്പ് ചെയ്യുന്ന സന്ദേശം

സന്ദേശം പേജിന്റെ മുകളിൽ പ്രദർശിപ്പിക്കും, അത് മങ്ങുന്നു. ഒരു പോപ്പ്-അപ്പ് സന്ദേശം കാണുന്നതിന് ഡെമോ പേജിലെ "എന്നെ ക്ലിക്ക് ചെയ്യുക" ക്ലിക്ക് ചെയ്യുക. കുരിശിൽ ക്ലിക്ക് ചെയ്താൽ അത് ക്ലോസ് ചെയ്യും. jQuery ഉപയോഗിച്ചാണ് നടപ്പിലാക്കുന്നത്.

16. ജാവാസ്ക്രിപ്റ്റിലെ മോഡൽ വിൻഡോ "മോഡൽബോക്സ്"

പോപ്പ്-അപ്പുകളും പേജ് റീലോഡുകളും ഉപയോഗിക്കാതെ ആധുനിക മോഡൽ ഡയലോഗുകൾ നടപ്പിലാക്കുക. ഡെമോ പേജിൽ, സ്ക്രിപ്റ്റ് പ്രവർത്തനക്ഷമമായി കാണുന്നതിന് "ആരംഭിക്കുക ഡെമോ" ബട്ടണിൽ ക്ലിക്കുചെയ്യുക.

17. പ്രോട്ടോടൈപ്പ് ലൈബ്രറി ഉപയോഗിച്ച് "ലെയ്റ്റ്ബോക്സ്" പ്ലഗിൻ

മോഡൽ വിൻഡോകളിൽ ഉള്ളടക്കം പ്രദർശിപ്പിക്കുന്നതിനുള്ള പ്ലഗിൻ.

3. ഒരു ലിങ്കിൽ നിന്ന് വിളിക്കുന്ന jQuery മോഡൽ വിൻഡോയുടെ ഉദാഹരണം (ഡെമോയിൽ നിന്ന്)

മിക്കവാറും, നിങ്ങൾ ഇതിനകം ഒന്നിലധികം തവണ ഇൻറർനെറ്റിൽ ഒരു പോപ്പ്-അപ്പ് മോഡൽ വിൻഡോ കണ്ടിട്ടുണ്ട് - രജിസ്ട്രേഷൻ സ്ഥിരീകരണം, മുന്നറിയിപ്പ്, റഫറൻസ് വിവരങ്ങൾ, ഫയൽ ഡൗൺലോഡ് എന്നിവയും അതിലേറെയും. ഈ ട്യൂട്ടോറിയലിൽ ഏറ്റവും ലളിതമായ മോഡൽ വിൻഡോകൾ എങ്ങനെ സൃഷ്ടിക്കാം എന്നതിനെക്കുറിച്ചുള്ള നിരവധി ഉദാഹരണങ്ങൾ ഞാൻ വാഗ്ദാനം ചെയ്യും.

ഒരു ലളിതമായ പോപ്പ്-അപ്പ് മോഡൽ വിൻഡോ സൃഷ്ടിക്കുന്നു ഉടൻ ദൃശ്യമാകുന്ന ഒരു ലളിതമായ മോഡൽ വിൻഡോയുടെ കോഡ് നോക്കാം
jQuery കോഡ്

$(പ്രമാണം).തയ്യാറാണ്(പ്രവർത്തനം()
{
മുന്നറിയിപ്പ് ("പോപ്പ്-അപ്പ് വിൻഡോയിലെ ടെക്സ്റ്റ്");
});

നിങ്ങളുടെ പേജിന്റെ ബോഡിയിൽ എവിടെയും കോഡ് ഒട്ടിക്കുക. പേജ് ലോഡുചെയ്‌ത ഉടൻ, കമാൻഡുകൾ ഇല്ലാതെ, ഇതുപോലെയുള്ള ഒരു വിൻഡോ നിങ്ങൾ കാണും:

എന്നാൽ മുഴുവൻ പേജും ബ്രൗസറിൽ ലോഡുചെയ്‌തതിനുശേഷം ഇനിപ്പറയുന്ന കോഡ് എക്‌സിക്യൂട്ട് ചെയ്യും. ഞങ്ങളുടെ ഉദാഹരണത്തിൽ, ചിത്രങ്ങളുള്ള പേജ് ലോഡ് ചെയ്ത ശേഷം, ഒരു ലളിതമായ പോപ്പ്-അപ്പ് വിൻഡോ പോപ്പ് അപ്പ് ചെയ്യും:

$(വിൻഡോ).ലോഡ്(ഫംഗ്ഷൻ()
{
മുന്നറിയിപ്പ് ("പേജ് ലോഡിംഗ് പൂർത്തിയാക്കി!)");
});

CSS ഉള്ള ഒരു ലിങ്കിൽ നിന്ന് jQuery മോഡൽ വിൻഡോയിലേക്ക് വിളിക്കുന്നു, ലിങ്ക് ക്ലിക്ക് ചെയ്യുമ്പോൾ ഒരു മോഡൽ വിൻഡോ സൃഷ്ടിക്കുക എന്നതാണ് അടുത്ത ഘട്ടം. പശ്ചാത്തലം പതുക്കെ ഇരുണ്ടുപോകും.

ലോഗിൻ, രജിസ്ട്രേഷൻ ഫോമുകൾ അത്തരം വിൻഡോകളിൽ സ്ഥിതിചെയ്യുന്നതായി നിങ്ങൾക്ക് പലപ്പോഴും കാണാൻ കഴിയും. നമുക്ക് കാര്യത്തിലേക്ക് ഇറങ്ങാം

ആദ്യം, നമുക്ക് html ഭാഗം എഴുതാം. നിങ്ങളുടെ പ്രമാണത്തിന്റെ ബോഡിയിൽ ഞങ്ങൾ ഈ കോഡ് സ്ഥാപിക്കുന്നു.

ഒരു മോഡൽ വിൻഡോ വിളിക്കുന്നു

മോഡൽ വിൻഡോ ടെക്സ്റ്റ്
അടയ്ക്കുക
ഒരു മോഡൽ വിൻഡോയിൽ ടെക്സ്റ്റ് ചെയ്യുക.

CSS കോഡ്. ഒന്നുകിൽ ഒരു പ്രത്യേക css ഫയലിൽ, അല്ലെങ്കിൽ തലയിൽ.

ശരീരം (
font-family:verdana;
ഫോണ്ട് വലുപ്പം:15px;
}
.ലിങ്ക് (നിറം:#fff; ടെക്സ്റ്റ്-ഡെക്കറേഷൻ:ഒന്നുമില്ല)
.ലിങ്ക്:ഹോവർ (നിറം:#fff; ടെക്സ്റ്റ്-ഡെക്കറേഷൻ:അണ്ടർലൈൻ)
#മാസ്ക് (
സ്ഥാനം: സമ്പൂർണ്ണ;
ഇടത്:0;
മുകളിൽ:0;
z-ഇൻഡക്സ്:9000;
പശ്ചാത്തല നിറം:#000;
പ്രദർശിപ്പിക്കുക: ഒന്നുമില്ല;
}
#boxes.window (
സ്ഥാനം: സമ്പൂർണ്ണ;
ഇടത്:0;
മുകളിൽ:0px;
മുകളിൽ: 40px;
വീതി: 440px;
ഉയരം: 200px;
പ്രദർശിപ്പിക്കുക: ഒന്നുമില്ല;
z-സൂചിക:9999;
പാഡിംഗ്: 20px;
കവിഞ്ഞൊഴുകുക: മറഞ്ഞിരിക്കുന്നു;
}
#ബോക്സുകൾ #ഡയലോഗ് (
വീതി:375px;
ഉയരം:203px;
പാഡിംഗ്:10px;
പശ്ചാത്തല നിറം:#ffffff;
}
.ടോപ്പ്(
സ്ഥാനം: സമ്പൂർണ്ണ;
ഇടത്:0;
മുകളിൽ:0;
വീതി:370px;
ഉയരം:30px;
പശ്ചാത്തലം: #0085cc;
പാഡിംഗ്: 8px 20px 6px 10px;
}
.close(
ഫ്ലോട്ട്:വലത്;
}
.ഉള്ളടക്കം(
പാഡിംഗ് ടോപ്പ്: 35px;
}

jQuery കോഡിൽ, മോഡൽ വിൻഡോയുടെയും മാസ്‌കിന്റെയും സ്ഥാനത്ത് ഞങ്ങൾ ശ്രദ്ധ കേന്ദ്രീകരിക്കും, ഞങ്ങളുടെ കാര്യത്തിൽ പശ്ചാത്തലം ക്രമേണ ഇരുണ്ടതാക്കുന്നു.

ശ്രദ്ധ! പ്രമാണത്തിന്റെ തലയിൽ ലൈബ്രറി ഉൾപ്പെടുത്താൻ മറക്കരുത്!

Google വെബ്‌സൈറ്റിൽ നിന്ന് ലൈബ്രറി ബന്ധിപ്പിക്കുന്നു. ശരി, jQuery കോഡ് തന്നെ.

jQuery കോഡ്

$(പ്രമാണം).റെഡി(ഫംഗ്ഷൻ() (
$("a").click(function(e) (
e.preventDefault();
var id = $(ഇത്).attr("href");
var maskHeight = $(രേഖ).ഉയരം();
var മാസ്ക് വീതി = $(വിൻഡോ).വിഡ്ത്ത്();
$("#മാസ്ക്").css(("വീതി":മാസ്ക് വീതി,"ഉയരം":മാസ്ക് ഉയരം));
$("#മാസ്ക്").fadeIn(1000);
$("#മാസ്ക്").fadeTo("സ്ലോ",0.8);
var winH = $(വിൻഡോ).ഉയരം();
var winW = $(വിൻഡോ).വിഡ്ത്ത്();
$(id).css("top", winH/2-$(id).height()/2);
$(id).css("ഇടത്", winW/2-$(id).width()/2);
$(id).fadeIn(2000);
});
$(".വിൻഡോ .ക്ലോസ്").ക്ലിക്ക്(ഫംഗ്ഷൻ (ഇ) (
e.preventDefault();
$("#മാസ്ക്, .വിൻഡോ").മറയ്ക്കുക();
});
$("#മാസ്ക്").ക്ലിക്ക്(ഫംഗ്ഷൻ () (
$(ഇത്).മറയ്ക്കുക();
$(".വിൻഡോ").മറയ്ക്കുക();
});
});

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

ഇത് എങ്ങനെ ചെയ്യാമെന്ന് നോക്കാം:

HTML

ഇനിപ്പറയുന്ന ആട്രിബ്യൂട്ടുകൾ ഉപയോഗിച്ച് ടാഗുകൾ ചേർത്തുകൊണ്ട് നമുക്ക് ആരംഭിക്കാം:

• href - #?w=500 എന്നത് വിൻഡോയുടെ വീതിയെ സൂചിപ്പിക്കുന്നു
• rel - ഓരോ വിൻഡോയ്ക്കും തനതായ ആട്രിബ്യൂട്ട്
• class="poplight" - ഒരു പോപ്പ്-അപ്പ് വിൻഡോ പ്രദർശിപ്പിക്കുന്നതിനുള്ള ക്ലാസ്

< a href= "#?w=500" rel= "popup_name" class = "poplight" >പ്രവർത്തനത്തിലുള്ള വിൻഡോ കാണുക - വീതി = 500px

പ്രവർത്തനത്തിലുള്ള വിൻഡോ കാണുക - വീതി = 500px

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

തലക്കെട്ട്

നിങ്ങൾക്ക് ആവശ്യമുള്ള ഏത് വാചകവും

അതിനാൽ, പേജിൽ ഞങ്ങളുടെ വിൻഡോയുടെ സ്ഥാനം ഞങ്ങൾ കണ്ടെത്തി, ഇപ്പോൾ നമുക്ക് അത് സ്റ്റൈലുകൾ ഉപയോഗിച്ച് അലങ്കരിക്കാം, സംസാരിക്കാൻ, മാന്യമായ രൂപം നൽകുക.

CSS ലേഔട്ട്

കൂടുതൽ വ്യക്തതയ്ക്കായി, ഞങ്ങളുടെ വിൻഡോയുടെ ശൈലി പാരാമീറ്ററുകൾക്കായി ഞാൻ ചില വിശദീകരണങ്ങൾ എഴുതിയിട്ടുണ്ട്. പോപ്പ്അപ്പ് വിൻഡോകൾക്ക് വ്യത്യസ്‌ത വലുപ്പങ്ങളുണ്ടാകാമെന്നതിനാൽ, CSS popup_block-ൽ വിൻഡോയുടെ അറ്റങ്ങൾ ഞങ്ങൾ വ്യക്തമാക്കുന്നില്ല; ആവശ്യമായ വലുപ്പം കണക്കാക്കുന്നത് .

#fade (ഡിസ്‌പ്ലേ: ഒന്നുമില്ല; /*--ഡിഫോൾട്ടായി മറച്ചിരിക്കുന്നു--*/ പശ്ചാത്തലം: rgba (7, 87, 207, 0.8); സ്ഥാനം: സ്ഥിരം; ഇടത്: 0; മുകളിൽ: 0; വീതി: 100%; ഉയരം: 100%; അതാര്യത: .80; z-ഇൻഡക്സ്: 9999; .popup_block (ഡിസ്പ്ലേ: ഒന്നുമില്ല; /*--ഡിഫോൾട്ടായി മറച്ചിരിക്കുന്നു--*/ പശ്ചാത്തലം: #fff ; പാഡിംഗ്: 20px ; ബോർഡർ: 8px സോളിഡ് rgb (1344 , , 134) z-index : 99999 ; /*--CSS3 box shadow--*/ -webkit-box-shadow: 0px 0px 20px #000 ; -moz-box-shadow: 0px 0px 20px #000 ; x0px0p0 ; x0px0p0 #000 ; /*--CSS3 കോർണർ റൗണ്ടിംഗ്--*/ -webkit-border-radius: 12px ; -moz-border-radius: 12px ; border-radius : 12px ; ) .popup_block p (font-weight : 400 ; : 0; മാർജിൻ: 0; നിറം: #000; ലൈൻ-ഉയരം: 1.6;).popup_block h2 (മാർജിൻ: 0px 0 10px; നിറം: rgb(43, 43, 43); ഫോണ്ട് ഭാരം: 400; ടെക്സ്റ്റ്-അലൈൻ: സെന്റർ; text-shadow : 1px 1px 2px #0D0C0C ; ) /* ഒരു ക്ലോസ് ബട്ടൺ രൂപപ്പെടുത്തുക */ .ക്ലോസ് (പശ്ചാത്തല നിറം: rgba (61, 61, 61, 0.8); അതിർത്തി: 2px സോളിഡ് #ccc; ഉയരം: 25px; ലൈൻ-ഉയരം: 20px; സ്ഥാനം: കേവലം; വലത്: - 17px; ഫോണ്ട്-വെയിറ്റ്: ബോൾഡ്; ടെക്സ്റ്റ്-അലൈൻ: സെന്റർ; ടെക്സ്റ്റ്-ഡെക്കറേഷൻ: ഒന്നുമില്ല; പാഡിംഗ്: 0; മുകളിൽ: -17px; വീതി: 25px; -webkit-ബോർഡർ-റേഡിയസ്: 50%; -moz-ബോർഡർ-റേഡിയസ് : 50% ; -ms-ബോർഡർ-റേഡിയസ്: 50% ; -o-ബോർഡർ-റേഡിയസ്: 50% ; ബോർഡർ-റേഡിയസ്: 50% : 1px 1px 3px #000 ; box-shadow : 1px 1px 3px #000 ; .close: മുമ്പ് (നിറം: rgba (255, 255, 255, 0.9) ; ഉള്ളടക്കം: "X" ; font-size: 12shapxow; : 0 -1px rgba (0, 0, 0, 0.9) webkit-box-shadow: 4px 4px 10px #857373 ; -moz-box-shadow: 4px 4px 10px #857373 ; പാഡിംഗ്: 0; ) /*--IE6-നുള്ള ഫിക്സഡ് പൊസിഷനിംഗ്--*/ * html #fade (സ്ഥാനം: absolute;) * html .popup_block (സ്ഥാനം: absolute;)

#ഫേഡ് (ഡിസ്‌പ്ലേ: ഒന്നുമില്ല;/*--ഡിഫോൾട്ടായി മറച്ചിരിക്കുന്നു--*/ പശ്ചാത്തലം: rgba(7, 87, 207, 0.8); സ്ഥാനം: സ്ഥിരം; ഇടത്: 0; മുകളിൽ: 0; വീതി: 100%; ഉയരം: 100%; അതാര്യത: .80; z-ഇൻഡക്സ്: 9999; .popup_block (ഡിസ്പ്ലേ: ഒന്നുമില്ല; /*--ഡിഫോൾട്ടായി മറച്ചിരിക്കുന്നു--*/ പശ്ചാത്തലം: #fff; പാഡിംഗ്: 20px; ബോർഡർ: 8px സോളിഡ് rgb(134, ഫ്ലോട്ട്: ഇടത് ; z-ഇൻഡക്സ്: 99999; /*--CSS3 ബോക്സ് ഷാഡോ--*/ -webkit-box-shadow: 0px 0px 20px #000; -moz-box-shadow: 0px 0px 20px #000; box-shadow: 0px 20px #000; /*--CSS3 കോർണർ റൗണ്ടിംഗ്--*/ -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; .popup_block p (font-weight: 400; പാഡിംഗ്: 0; മാർജിൻ: 0; നിറം: #000; ലൈൻ-ഉയരം: 1.6;).popup_block h2 (മാർജിൻ: 0px 0 10px; നിറം: rgb(43, 43, 43); ഫോണ്ട്-വെയ്റ്റ്: 400; ടെക്സ്റ്റ്-അലൈൻ : മധ്യഭാഗം, ടെക്സ്റ്റ് ഷാഡോ: 1px 1px 2px #0D0C0C; ബോർഡർ: 2px സോളിഡ് #ccc; ഉയരം: 25px; ലൈൻ-ഉയരം: 20px; സ്ഥാനം: കേവലം; വലത്: -17px; ഫോണ്ട്-വെയ്റ്റ്: ബോൾഡ്; ടെക്സ്റ്റ്-അലൈൻ: സെന്റർ; ടെക്സ്റ്റ് അലങ്കാരം: ഒന്നുമില്ല;പാഡിംഗ്: 0; മുകളിൽ: -17px; വീതി: 25px; -വെബ്കിറ്റ്-ബോർഡർ-റേഡിയസ്: 50%; -moz-ബോർഡർ-റേഡിയസ്: 50%; -ms-ബോർഡർ-റേഡിയസ്: 50%; -o-ബോർഡർ-റേഡിയസ്: 50%; ബോർഡർ-റേഡിയസ്: 50%; -moz-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000; ബോക്സ് ഷാഡോ: 1px 1px 3px #000; ) .ക്ലോസ്:മുമ്പ് (നിറം: rgba(255, 255, 255, 0.9); ഉള്ളടക്കം: "X"; ഫോണ്ട് വലുപ്പം: 12px; ടെക്സ്റ്റ്-ഷാഡോ: 0 -1px rgba(0, 0, 0, 0.9); ) .ക്ലോസ്:ഹോവർ (പശ്ചാത്തലം-നിറം: rgba(252, 20, 0, 0.8); ) .ഷാഡോ (ബോക്സ്-ഷാഡോ:4px 4px 10px #857373; -webkit-box-shadow:4px 4px 10px-857373;85737z box-shadow:4px 4px 10px #857373; padding:0; ) /*--IE6-നുള്ള ഫിക്സഡ് പൊസിഷനിംഗ്--*/ *html #fade (സ്ഥാനം: absolute; ) *html .popup_block (സ്ഥാനം: absolute; )

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

JQuery സജ്ജീകരണം

മോഡൽ വിൻഡോ പൂർണ്ണമായി പ്രവർത്തിക്കുന്നതിന്, നിങ്ങൾ jQuery ബന്ധിപ്പിക്കേണ്ടതുണ്ട്; ഈ ലൈബ്രറിയുടെ പ്രവർത്തനത്തെക്കുറിച്ച് പരിചയമില്ലാത്തവർക്ക് വായിക്കാൻ കഴിയും.

ശരി, ഞങ്ങൾ മുന്നോട്ട് പോകും. നിങ്ങൾക്ക് ലൈബ്രറിയുടെ വെബ്‌സൈറ്റിൽ നിന്ന് JQuery-യുടെ ഏറ്റവും പുതിയ പതിപ്പ് ഉപയോഗിക്കാം, അല്ലെങ്കിൽ നിങ്ങൾക്ക് Google-ന്റെ ആഴത്തിൽ സ്ഥിതി ചെയ്യുന്ന ഒരു പ്രത്യേക ഫയൽ ഉപയോഗിക്കാം, അത് ഡോക്യുമെന്റുമായി ബന്ധിപ്പിച്ച്, ക്ലോസിംഗ് ടാഗിന് മുമ്പുള്ള വിഭാഗത്തിൽ, ഇനിപ്പറയുന്ന ലൈൻ സ്ഥാപിക്കുക:

അടുത്ത ഘട്ടത്തിൽ, ഞങ്ങളുടെ പോപ്പ്-അപ്പ് വിൻഡോ സജീവമാക്കുന്നതിന് jquery പ്ലഗിൻ പൂരിപ്പിക്കലും പ്രവർത്തനങ്ങളും ഞങ്ങൾ നോക്കും, ഞങ്ങൾ എന്താണ് ചെയ്യുന്നതെന്ന് നന്നായി മനസ്സിലാക്കുന്നതിനുള്ള ചില വിശദീകരണങ്ങൾ കോഡിൽ അടങ്ങിയിരിക്കുന്നു.

JQuery പ്ലഗിൻ

$(രേഖ) . റെഡി(ഫംഗ്ഷൻ () ( //പോപ്‌ലൈറ്റ് ക്ലാസും href ടാഗ് ആട്രിബ്യൂട്ടും ഉള്ള ഒരു ലിങ്കിൽ ക്ലിക്ക് ചെയ്യുമ്പോൾ കൂടെ # $("a.poplight" ) . ക്ലിക്ക്(ഫംഗ്ഷൻ () ( var popID = $(ഇത്) . attr("rel" ) ; //വിൻഡോയുടെ പേര് നേടുക, പുതിയവ ചേർക്കുമ്പോൾ അത് മറക്കരുത് എന്നത് പ്രധാനമാണ്. ലിങ്ക് var popURL = $(ഇത്) . attr("href" ); //ലിങ്കിന്റെ href ആട്രിബ്യൂട്ടിൽ നിന്ന് വലുപ്പം നേടുക //ചോദ്യവും href url-ൽ നിന്നുള്ള വേരിയബിളുകളും var query= popURL. സ്പ്ലിറ്റ് ("?" ) ; var dim = ചോദ്യം[ 1 ] . സ്പ്ലിറ്റ് ("&" ); var popWidth = മങ്ങിയ[ 0 ] . സ്പ്ലിറ്റ് ("=" ) [ 1 ] ; //അന്വേഷണ സ്ട്രിംഗിന്റെ ആദ്യ മൂല്യം // വിൻഡോയിലേക്ക് ഒരു ക്ലോസ് ബട്ടൺ ചേർക്കുക $( . " + popID) . width() + 80 ) / 2 ; //ഇൻഡന്റേഷൻ മൂല്യം സജ്ജീകരിക്കുക $("#" + popID) .css(( "മാർജിൻ-ടോപ്പ്" : - popMargTop, "മാർജിൻ-ഇടത്" :- popMargLeft ) ); //ഒരു അർദ്ധസുതാര്യമായ ഇരുണ്ട പശ്ചാത്തലം ചേർക്കുക $("ശരീരം" ) . അനുബന്ധം (""); //ഡിവ് കണ്ടെയ്നർ ടാഗിന് മുമ്പ് സ്ഥാപിക്കും. $("#ഫേഡ്" ) . css(("ഫിൽട്ടർ" : "ആൽഫ(ഒപാസിറ്റി=80)" ) ) . fadeIn(); //ലെയർ അർദ്ധസുതാര്യത, മണ്ടത്തരമായ IE റിട്ടേൺ തെറ്റിനുള്ള ഫിൽട്ടർ ; ) ); //ജാലകം അടച്ച് പശ്ചാത്തലം മങ്ങിക്കുക $(രേഖ) . on("click" , "a.close, #fade" , function () ( //ജാലകത്തിന് പുറത്ത് ക്ലിക്ക് ചെയ്ത് അടയ്ക്കുന്നു, അതായത് പശ്ചാത്തലത്തിൽ... $("#fade , .popup_block" ) . fadeOut(function ( ) ($("#Fade, a.close") . നീക്കം() ) );

$(document).ready(function())( //പോപ്‌ലൈറ്റ് ക്ലാസും href ടാഗ് ആട്രിബ്യൂട്ടും ഉള്ള ഒരു ലിങ്കിൽ ക്ലിക്ക് ചെയ്യുമ്പോൾ കൂടെ # $("a.poplight").click(function() (var popID = $(this).attr("rel"); //ജാലകത്തിന്റെ പേര് നേടുക, അത് മാറ്റാൻ മറക്കരുത് പുതിയവ ചേർക്കുമ്പോൾ ലിങ്കിന്റെ rel ആട്രിബ്യൂട്ടിൽ പേര് നൽകുക = popURL.split("?"); var dim= query.split( "&"); var popWidth = dim.split("="); //അന്വേഷണ സ്ട്രിംഗിന്റെ ആദ്യ മൂല്യം //ഒരു ക്ലോസ് ബട്ടൺ ചേർക്കുക ജാലകം $("#" + popID).fadeIn().css(( "വീതി": നമ്പർ(popWidth) )).prepend(""); //മധ്യ വിന്യാസത്തിന് (ലംബമായും തിരശ്ചീനമായും) മാർജിൻ (മാർജിൻ) നിർണ്ണയിക്കുക - css var popMargTop = ($("#" + popID).height() + 80) / 2; var popMargLeft = ($("# " + popID).width() + 80) / 2; //ഇൻഡന്റേഷൻ മൂല്യം സജ്ജമാക്കുക $("# " + popID).css(( "മാർജിൻ-ടോപ്പ്" : -popMargTop, "മാർജിൻ-ഇടത്" : -popMargLeft ) ) ); $("#fade").css(("ഫിൽറ്റർ" : "ആൽഫ(ഒപാസിറ്റി=80)")).fadeIn(); //ലെയർ അർദ്ധസുതാര്യത, മണ്ടത്തരമായ IE റിട്ടേൺ തെറ്റിനുള്ള ഫിൽട്ടർ; )); //വിൻഡോ അടച്ച് പശ്ചാത്തലം മങ്ങുക $(രേഖ).ഓൺ("ക്ലിക്ക്", "എ.ക്ലോസ്, #ഫേഡ്", ഫംഗ്‌ഷൻ() ( //ജാലകത്തിന് പുറത്ത്, അതായത് പശ്ചാത്തലത്തിൽ ക്ലിക്കുചെയ്‌ത് അടയ്ക്കുക... $( "#fade , .popup_block").fadeOut(function() ($("#fade, a.close").remove(); //fade out )); false മടങ്ങുക; )); ));

ഉപസംഹാരം:

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

അടുത്ത തവണ ഞാൻ തീർച്ചയായും നിങ്ങളോട് പറയുകയും ഒരു ഉദാഹരണം കാണിക്കുകയും ചെയ്യും, കൂടാതെ പോപ്പ്-അപ്പ് വിൻഡോയിലെ മറ്റ് മൂന്നാം കക്ഷി ഒബ്‌ജക്റ്റുകളെ കുറിച്ച് പഠിക്കാൻ പലരും താൽപ്പര്യപ്പെടും. അതിനാൽ വെബിൽ നഷ്ടപ്പെടാതെ തുടരുക!

അപ്ഡേറ്റ്: പതിപ്പ് dm-modal.js v1.3 (01/15/2017)
പരിഹരിച്ചത്: href*=\\# വാക്യഘടന ഉപയോഗിച്ച്, കാലഹരണപ്പെട്ട .live() ഫംഗ്‌ഷൻ മാറ്റിസ്ഥാപിച്ചു. പ്ലഗിൻ ഇപ്പോൾ jQuery ലൈബ്രറിയുടെ നിലവിലെ പതിപ്പുകൾക്കൊപ്പം പ്രവർത്തിക്കുന്നു

അത്രയേയുള്ളൂ! ഇത് മറ്റൊരു ഉപയോഗപ്രദമായ പാഠമാണെന്ന് ഞാൻ പ്രതീക്ഷിക്കുന്നു.

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

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

ഈ പോസ്റ്റിൽ JQuery, CSS എന്നിവ ഉപയോഗിച്ച് എങ്ങനെ ഒരു ലളിതമായ മോഡൽ വിൻഡോ ഉണ്ടാക്കാം എന്നതിന്റെ ഒരു ഉദാഹരണം നോക്കാം. ഈ ഉദാഹരണത്തിന്റെ പ്രത്യേകത, JQuery ലൈബ്രറി ഒഴികെ, അത് ആവശ്യമില്ല എന്നതാണ്.

പേജിൽ മോഡൽ വിൻഡോ കോഡ് സ്ഥാപിക്കുക:

മോഡൽ വിൻഡോ അടയ്ക്കുക

മാർക്ക്അപ്പിൽ നിന്ന് നിങ്ങൾക്ക് കാണാനാകുന്നതുപോലെ, മോഡൽ വിൻഡോയുടെ ബ്ലോക്ക് തന്നെ id= ആട്രിബ്യൂട്ട് ഉള്ള ഒരു div ആണ്. മോഡൽ_ഫോം id= ഉള്ള ഒരു സ്പാൻ ഘടകം അടങ്ങിയിരിക്കുന്നു മോഡൽ_ക്ലോസ്. മോഡൽ വിൻഡോ അടയ്ക്കുന്നതിനുള്ള ഒരു ബട്ടണായി ഈ ഘടകം പ്രവർത്തിക്കും; കൂടാതെ, ബ്ലോക്കിന് താഴെ ഐഡി= ആട്രിബ്യൂട്ട് ഉള്ള ഒരു ഡിവി ബ്ലോക്ക് ഉണ്ട്. ഓവർലേ, ഇത് പശ്ചാത്തലം ഇരുണ്ടതാക്കാനും സഹായിക്കുന്നു. ക്ലാസിനൊപ്പം ലിങ്ക് വഴി മോഡൽ വിൻഡോ തുറക്കും മോഡൽ.

മോഡൽ വിൻഡോയ്ക്കുള്ള CSS

#modal_form (വീതി: 300px; ഉയരം: 300px; ബോർഡർ-റേഡിയസ്: 5px; ബോർഡർ: 3px #000 സോളിഡ്; പശ്ചാത്തലം: #fff; സ്ഥാനം: സ്ഥിരം; മുകളിൽ: 45%; ഇടത്: 50%; മാർജിൻ-ടോപ്പ്: -150px; മാർജിൻ-ഇടത്: -150px; ഡിസ്പ്ലേ: ഒന്നുമില്ല; അതാര്യത: 0; z-ഇൻഡക്സ്: 5; പാഡിംഗ്: 20px 10px; ) #modal_form #modal_close (വീതി: 21px; ഉയരം: 21px; സ്ഥാനം: കേവലം; മുകളിൽ: 10px; വലത്: 10px; കഴ്‌സർ: പോയിന്റർ; ഡിസ്പ്ലേ: ബ്ലോക്ക്; ) #ഓവർലേ (z-ഇൻഡക്സ്:3; സ്ഥാനം:നിശ്ചിതം; പശ്ചാത്തല നിറം:#000; അതാര്യത:0.8; -moz-opacity:0.8; ഫിൽട്ടർ: ആൽഫ(ഒപാസിറ്റി=80) ; വീതി: 100%; ഉയരം: 100%; മുകളിൽ: 0; ഇടത്: 0; കഴ്സർ: പോയിന്റർ; ഡിസ്പ്ലേ: ഒന്നുമില്ല; )

വേണ്ടി മോഡൽ_ഫോംഞങ്ങൾ ഒരു നിശ്ചിത വീതിയും ഉയരവും സജ്ജമാക്കി, തുടർന്ന് സ്ഥാനം സ്ക്രീനിന്റെ മധ്യഭാഗത്തേക്ക് കേന്ദ്രീകരിക്കുന്നു. മോഡൽ വിൻഡോ പശ്ചാത്തലത്തിനായി ( ഓവർലേ) ഞങ്ങൾ സ്‌ക്രീനിന്റെ വീതിക്ക് അനുയോജ്യമായ വലുപ്പം സജ്ജമാക്കുകയും സുതാര്യത നിറയ്ക്കുകയും സ്ഥിരസ്ഥിതിയായി അത് മറയ്ക്കുകയും ചെയ്യുന്നു. കൂടെ പ്രത്യേക നിമിഷം z-സൂചിക, പേജിലെ എല്ലാ ഘടകങ്ങളിലും ഏറ്റവും വലുത് മോഡൽ ഉണ്ടായിരിക്കണം, കൂടാതെ കവറിൽ മോഡൽ ഒഴികെയുള്ള എല്ലാ ഘടകങ്ങളിലും ഏറ്റവും വലുത് ഉണ്ടായിരിക്കണം.

ഇപ്പോൾ ഏറ്റവും അടിസ്ഥാനപരമായ കാര്യത്തിലേക്ക്, ഇതാണ് ജാവാസ്ക്രിപ്റ്റ് കോഡ്. മോഡൽ വിൻഡോയ്ക്കായി രണ്ട് പ്രധാന ഇവന്റുകൾ ഉപയോഗിക്കും: അതിന്റെ ഓപ്പണിംഗ് - ക്ലാസ് ഉള്ള ഒരു ഘടകത്തിൽ ക്ലിക്ക് ചെയ്യുക മോഡൽ, ഞങ്ങളുടെ കാര്യത്തിൽ ഇതൊരു ലിങ്കാണ്, കൂടാതെ മോഡൽ വിൻഡോ അടയ്ക്കുന്നത് കവറിൽ ഒരു ക്ലിക്ക് ആണ് ( ഓവർലേ), അല്ലെങ്കിൽ ക്ലോസ് ബട്ടണിൽ ക്ലിക്ക് ചെയ്യുക, ഞങ്ങളുടെ കാര്യത്തിൽ ഇത് id= ഉള്ള ഒരു സ്പാൻ ഘടകമാണ് മോഡൽ_ക്ലോസ്.

$(document).ready(function() ( $(".modal").click(function(event)( event.preventDefault(); $("#overlay").fadeIn(400, // എന്നതിന്റെ ഡിസ്പ്ലേ ആനിമേറ്റ് ചെയ്യുക കവർ ഫംഗ്‌ഷൻ ()( // അടുത്തതായി മോഡ് വിൻഡോ കാണിക്കുക $("#modal_form") .css("ഡിസ്‌പ്ലേ", "ബ്ലോക്ക്") .ആനിമേറ്റ്((ഒപാസിറ്റി: 1, ടോപ്പ്: "50%"), 200); ));)); "), 200, // സുതാര്യത ഫംഗ്‌ഷൻ കുറയ്ക്കുക())( // ആനിമേഷന് ശേഷം $(ഇത്).css("ഡിസ്‌പ്ലേ", "ഒന്നും"); // വിൻഡോ മറയ്‌ക്കുക $("#ഓവർലേ").ഫേഡ്ഔട്ട് (400); // പശ്ചാത്തലം മറയ്ക്കുക );));));

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

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

CSS3-ൽ മങ്ങിയ പശ്ചാത്തലമുള്ള മോഡൽ വിൻഡോകൾ

മികച്ച സാമ്പത്തിക വാർത്തകൾ ഇവിടെ മാത്രം: ദ്രോബാഖ

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

ഘട്ടം 1. HTML

ഞങ്ങൾക്ക് ഒരു കണ്ടെയ്‌നർ ഉണ്ടായിരിക്കും: ശീർഷകം, വിവരണം, തുടർന്ന് മോഡൽ വിൻഡോ തുറക്കുന്നതിന് ടോഗിൾ മോഡൽ ക്ലാസ് ഉള്ള ബട്ടണിനായി ഞങ്ങൾ ഒരു ക്ലാസ് ചേർക്കുന്നു:

തലക്കെട്ട്

വിവരണം

ജാലകത്തിനായുള്ള ലേഖനത്തിന്റെ പേര് തുറക്കുക

ഒരു വെബ്‌സൈറ്റ് സൃഷ്‌ടിക്കുമ്പോൾ ടാബുകൾ വളരെ രസകരവും സൗകര്യപ്രദവുമായ കാര്യമാണ്; സൈറ്റിൽ കുറച്ച് സ്ഥലം ലാഭിക്കുമ്പോൾ തന്നെ വിവരങ്ങൾ ശരിയായി ഓർഗനൈസുചെയ്യാൻ അവ നിങ്ങളെ അനുവദിക്കുന്നു.

അടയ്ക്കുക

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

ഘട്ടം 2: CSS

ഇപ്പോൾ നമുക്ക് സ്റ്റൈലിംഗിലേക്ക് പോകാം, ആദ്യ ഘട്ടം ബട്ടൺ ക്ലാസ് ആയിരിക്കും, അത് ഉത്തരവാദിത്തമായിരിക്കും, നിങ്ങൾ ഊഹിച്ചതുപോലെ, സൈറ്റിലെ ബട്ടണുകൾക്കായി, ഞങ്ങൾ അതിനായി ശരിയായ ഡിസ്പ്ലേ പാരാമീറ്ററുകൾ സജ്ജമാക്കുന്നു:

ബട്ടൺ (പശ്ചാത്തലം: ഒന്നുമില്ല; പശ്ചാത്തല-ക്ലിപ്പ്: പാഡിംഗ്-ബോക്സ്; ഡിസ്പ്ലേ: ഇൻലൈൻ-ബ്ലോക്ക്; അതിർത്തി: 0; ഉപയോക്താവ്-തിരഞ്ഞെടുക്കുക: ഒന്നുമില്ല; -വെബ്കിറ്റ്-ടച്ച്-കോൾഔട്ട്: ഒന്നുമില്ല; -വെബ്കിറ്റ്-രൂപം: ബട്ടൺ; -വെബ്കിറ്റ്-ഉപയോക്താവ് -തിരഞ്ഞെടുക്കുക: ഒന്നുമില്ല; -moz-ഉപയോക്താവ്-തിരഞ്ഞെടുക്കുക: ഒന്നുമില്ല; -ms-ഉപയോക്താവ്-തിരഞ്ഞെടുക്കുക: ഒന്നുമില്ല; )

കണ്ടെയ്നർ (സ്ഥാനം: ബന്ധു; മാർജിൻ: 0 ഓട്ടോ; പരമാവധി വീതി: 960px; ബോക്സ്-സൈസിംഗ്: ബോർഡർ-ബോക്സ്; പാഡിംഗ്-ടോപ്പ്: 40px; )

ലേഖനം (പശ്ചാത്തലം: #fff; പാഡിംഗ്: 20px; മാർജിൻ-ബോട്ടം: 40px; ബോർഡർ-റേഡിയസ്: 5px; ) .മോഡൽ (ഡിസ്‌പ്ലേ: ഒന്നുമില്ല; സ്ഥാനം: സ്ഥിരം; മുകളിൽ: 50%; വീതി: 100%; ഉയരം: ഓട്ടോ; മാർജിൻ -top: -150px; പശ്ചാത്തല നിറം: $color-white; ബോർഡർ-റേഡിയസ്: 3px; z-ഇൻഡക്സ്: 999; ബോക്സ്-ഷാഡോ: 0px 1px 3px 0px ഇരുണ്ടതാക്കുക($color-bg, 10%); @media #( $small) (ഇടത്: 50%; മാർജിൻ-ഇടത്: -260px; പരമാവധി വീതി: 520px; ) &.is-ആക്ടീവ് (ഡിസ്‌പ്ലേ: ബ്ലോക്ക്; ആനിമേഷൻ: 1 സെ ലീനിയർ സ്ലൈഡ്; ) .ഇന്നർ (സ്ഥാനം: ബന്ധു; പാഡിംഗ്: 20px ; ) .modal__header (ബോർഡർ-ബോട്ടം: 1px സോളിഡ് ഡാർക്ക് ($color-bg, 5%); ) .modal__footer (ടെക്‌സ്റ്റ്-അലൈൻ: സെന്റർ; ബട്ടൺ (ഡിസ്‌പ്ലേ: ഇൻലൈൻ-ബ്ലോക്ക്; ) )

ശൈലികൾ വളരെ ലളിതമാണ്, അവ ഒരു പ്രത്യേക ഫയലിൽ സംഭരിച്ചിരിക്കുന്നു, ഒരിക്കലെങ്കിലും CSS നേരിട്ട ഒരു ഡവലപ്പർക്കായി അവ എഡിറ്റുചെയ്യുമ്പോൾ ബുദ്ധിമുട്ടുകൾ ഉണ്ടാക്കരുത്.

ഘട്ടം 3. JS

മെനു ദൃശ്യമാകുമ്പോൾ സ്വയമേവയുള്ള പശ്ചാത്തല മങ്ങൽ സജ്ജീകരിക്കുക എന്നതായിരിക്കും ഞങ്ങളുടെ അവസാനത്തേതും എന്നാൽ പ്രാധാന്യം കുറഞ്ഞതുമായ ലിങ്കുകളുടെ ക്ലിക്കബിളിറ്റി, ചെറിയ JS നിയമങ്ങൾ ഇതിന് ഞങ്ങളെ സഹായിക്കും:

$("ശരീരം").addClass("ഇസ്-ബ്ലർഡ്"); $(".toggleModal").on("click", function (event) ( event.preventDefault(); $(".modal").toggleClass("is-active"); $("body").toggleClas ("ഇസ്-ബ്ലർഡ്"); );

കാഴ്ചക്കാരുടെ കണ്ണിന് ഇമ്പമുള്ളതും നിങ്ങളുടെ ഡിസൈൻ അലങ്കോലപ്പെടുത്താത്തതുമായ മോഡൽ വിൻഡോകളാണ് ഫലം.