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();
$("#മാസ്ക്, .വിൻഡോ").മറയ്ക്കുക();
});
$("#മാസ്ക്").ക്ലിക്ക്(ഫംഗ്ഷൻ () (
$(ഇത്).മറയ്ക്കുക();
$(".വിൻഡോ").മറയ്ക്കുക();
});
});

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

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

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

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

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

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

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

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

6. Mootools മോഡൽ വിൻഡോ, "MooDialog" പ്ലഗിൻ

7. സ്ക്രീനിന്റെ മുകളിൽ jQuery പോപ്പ്അപ്പ് പാനൽ

8. jQuery പോപ്പ്അപ്പ് വിൻഡോ

ഫോം ഡിസ്പ്ലേയ്ക്കുള്ള jQuery പ്ലഗിൻ പ്രതികരണംഒരു പോപ്പ്-അപ്പ് വിൻഡോയിൽ.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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, //സുതാര്യത ഓണാണ്, വിൻഡോ ഫംഗ്‌ഷൻ മുകളിലേക്ക് പോകുന്നു())( $(ഇത്).css("ഡിസ്‌പ്ലേ", "none"); //ജാലകം അദൃശ്യമാക്കുക $("# myoverlay").fadeOut(400); //ഓവർലാപ്പ് ലെയർ നീക്കം ചെയ്യുക); ));));

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

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

ഈ ലേഖനത്തിൽ, ഞങ്ങളുടെ അഭിപ്രായത്തിൽ മോഡൽ വിൻഡോകൾക്കായി ഞങ്ങൾ 10 മികച്ച jQuery പ്ലഗിനുകൾ തിരഞ്ഞെടുത്തു. ഈ പ്ലഗിന്നുകളുടെ ജനപ്രീതിയെ അടിസ്ഥാനമാക്കി ഞങ്ങൾ ചിത്രങ്ങളും ഉള്ളടക്കവും പ്രദർശിപ്പിക്കുന്നതിന് മോഡൽ വിൻഡോകളിൽ ശ്രദ്ധ കേന്ദ്രീകരിച്ചു.

മോഡൽ വിൻഡോകൾക്കുള്ള jQuery പ്ലഗിനുകൾ

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

പല വെബ്‌സൈറ്റുകളിലും, നിങ്ങൾക്ക് ഒരു ലോഗിൻ ഫോം, ഒരു കോൺടാക്റ്റ് ഫോം അല്ലെങ്കിൽ ഒരു മോഡൽ വിൻഡോ ആയി ലോഡ് ചെയ്യുന്ന മറ്റേതെങ്കിലും തരത്തിലുള്ള ഫോമും കണ്ടെത്താനാകും. മോഡൽ വിൻഡോകൾ ഉപയോഗിക്കുന്നതിനുള്ള മറ്റൊരു ഓപ്ഷൻ അതിൽ ലോഡ് ചെയ്യുന്നു ഗൂഗിൾ ഭൂപടം, അതിനാൽ ഉപയോക്താക്കൾക്ക് ക്ലിക്കുചെയ്ത് മാപ്പിലെ ഒരു ലൊക്കേഷനിലേക്ക് പോയിന്റ് ചെയ്യാൻ കഴിയും.

ലിക്നോ വെബ് മോഡൽ വിൻഡോസ് ബിൽഡർ ഒരു പ്ലഗിൻ മാത്രമല്ല. ഏത് തരത്തിലുള്ള jQuery മോഡൽ വിൻഡോകൾ സൃഷ്ടിക്കാനുള്ള കഴിവ് നൽകുന്ന ശക്തമായ WYSIWYG (പല ഓപ്ഷനുകളുള്ള വിഷ്വൽ ഇന്റർഫേസ്) ആപ്ലിക്കേഷനാണിത്. നിങ്ങൾക്ക് ഒന്നും അറിയേണ്ടതില്ല എന്നതാണ് അതിശയകരമായ കാര്യം സോഴ്സ് കോഡ്. ആപ്ലിക്കേഷൻ നിങ്ങൾക്കായി എല്ലാ കോഡുകളും സൃഷ്ടിക്കുന്നു. അതിനാൽ, നിങ്ങൾ ഒരു തുടക്കക്കാരനോ പ്രൊഫഷണൽ പ്രോഗ്രാമറോ ആണെങ്കിൽപ്പോലും, നിരവധി പ്രോജക്ടുകൾ വേഗത്തിൽ സൃഷ്ടിക്കാൻ ആഗ്രഹിക്കുന്ന, Likno Web Modal Windows Builder നിങ്ങളുടെ എല്ലാ ആവശ്യങ്ങളും നിറവേറ്റും.

ഫാൻസിബോക്സ്

നിങ്ങളുടെ വെബ് പേജുകളിലേക്ക് ചിത്രങ്ങൾ, HTML, മൾട്ടിമീഡിയ ഉള്ളടക്കം എന്നിവയ്‌ക്കായി സൂം പ്രവർത്തനക്ഷമത ചേർക്കുന്നതിനുള്ള മനോഹരവും മനോഹരവുമായ മാർഗ്ഗം വാഗ്ദാനം ചെയ്യുന്ന ഒരു പ്ലഗിൻ ആണ് fancyBox. ഇത് ജനപ്രീതിയാർജ്ജിച്ച jQuery JavaScript ലൈബ്രറിയിലാണ് നിർമ്മിച്ചിരിക്കുന്നത്, ഇത് ഇൻസ്റ്റാൾ ചെയ്യാനും കോൺഫിഗർ ചെയ്യാനും എളുപ്പമാണ്.

ഗംഭീരമായ പോപ്പ്അപ്പ്

പ്രകടനത്തിൽ ശ്രദ്ധ കേന്ദ്രീകരിച്ച് ഉപയോഗിക്കാൻ എളുപ്പമുള്ള jQuery ലൈറ്റ്ബോക്സ് പ്ലഗിൻ ആണ് മാഗ്നിഫിക് പോപ്പ്അപ്പ്. ഏത് ഉപകരണത്തിലും സുഖപ്രദമായ അനുഭവം നൽകുക എന്നതാണ് ഇതിന്റെ പ്രധാന ലക്ഷ്യം.

bPopup

ഭാരം കുറഞ്ഞ jQuery പോപ്പ്അപ്പ് പ്ലഗിൻ ആണ് bPopup. നിങ്ങളുടെ സ്വന്തം പോപ്പ്അപ്പ് സൃഷ്‌ടിക്കാനോ സ്‌റ്റൈൽ ചെയ്യാനോ ഇത് നിങ്ങളെ അനുവദിക്കുന്നില്ല, എന്നാൽ ഇത് കേന്ദ്രീകരിക്കൽ, മോഡൽ ഓവർലാപ്പ്, ഇവന്റുകൾ എന്നിവയും മറ്റും പോലുള്ള എല്ലാ യുക്തികളും നൽകുന്നു. പ്ലഗിൻ നിങ്ങൾക്ക് ധാരാളം ഇഷ്‌ടാനുസൃതമാക്കൽ ഓപ്ഷനുകൾ നൽകുന്നു, അതിനാൽ നിങ്ങൾ തീർച്ചയായും ഇത് ഇഷ്ടപ്പെടും.

ട്വിറ്റർ ബൂട്ട്സ്ട്രാപ്പ് മോഡൽ

ട്വിറ്റർ ബൂട്ട്സ്ട്രാപ്പ് മോഡൽ - ട്വിറ്റർ ബൂട്ട്സ്ട്രാപ്പിനുള്ള പ്ലഗിൻ. ഒരു വെബ് ആപ്ലിക്കേഷനായി മോഡൽ പ്രവർത്തനം സൃഷ്ടിക്കുന്നതിന് ഇത് അനുയോജ്യമാണ് (ഉദാഹരണത്തിന്, മോഡൽ രൂപം) കൂടാതെ നൽകിയിട്ടുള്ള അടിസ്ഥാന പ്രവർത്തനം മാറ്റിസ്ഥാപിക്കുന്നു സ്റ്റാൻഡേർഡ് സവിശേഷതകൾ JavaScript അലേർട്ട്(), സ്ഥിരീകരിക്കുക (), പ്രോംപ്റ്റ് ().

ലൈറ്റ് വ്യൂ

jQuery JavaScript ലൈബ്രറി ഉപയോഗിച്ച് മനോഹരമായ പോപ്പ്അപ്പ് വിൻഡോകൾ എളുപ്പത്തിൽ സൃഷ്ടിക്കാൻ Lightview നിങ്ങളെ അനുവദിക്കുന്നു. ഏത് ബ്രൗസറിന്റെയും ഉപയോക്താക്കൾക്ക് മികച്ച അനുഭവം നൽകുന്നതിന് നിങ്ങളെ സഹായിക്കുന്നതിന് Lightview HTML5 ഉപയോഗിക്കുന്നു. നിങ്ങൾക്ക് നിങ്ങളുടെ മീഡിയ ഉള്ളടക്കം സ്വയമേവ മെച്ചപ്പെടുത്താം അല്ലെങ്കിൽ ശക്തമായ JavaScript API ഉപയോഗിച്ച് ഇഷ്ടാനുസൃത പോപ്പ്അപ്പുകൾ സൃഷ്ടിക്കാം.

പോപ്പ് ഈസി

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

കളർബോക്സ്

ചെറിയ jQuery ലൈറ്റ്ബോക്സ് പ്ലഗിൻ. ഇത് ഫോട്ടോ കൃത്രിമത്വം, ഗ്രൂപ്പിംഗ്, സ്ലൈഡ്ഷോകൾ, അജാക്സ്, ഇൻലൈൻ ഉള്ളടക്കം, iframe ഉള്ളടക്കം എന്നിവയെ പിന്തുണയ്ക്കുന്നു. ഡിസ്പ്ലേ നിയന്ത്രിക്കുന്നത് CSS വഴിയാണ്, അതിനാൽ ഇത് പൂർണ്ണമായും പുനർരൂപകൽപ്പന ചെയ്യാൻ കഴിയും. കോൾബാക്ക്, ഇവന്റ്-ബൗണ്ട് ഫംഗ്‌ഷനുകൾ എന്നിവ ഉപയോഗിച്ച് പ്ലഗിന്റെ പ്രവർത്തനക്ഷമത വിപുലീകരിക്കാൻ കഴിയും, അതിനാൽ നിങ്ങൾ മാറ്റേണ്ടതില്ല ഉറവിട ഫയലുകൾ. കളർബോക്‌സ് ഒരു കീ/മൂല്യം ഒബ്‌ജക്റ്റിൽ നിന്നുള്ള ക്രമീകരണങ്ങൾ സ്വീകരിക്കുന്നു, അത് ഏത് HTML ഘടകത്തിലേക്കും ബന്ധിപ്പിച്ചിരിക്കാം.

മോഡൽ പോപ്ലൈറ്റ്

മോഡൽ ഡയലോഗുകൾക്കായുള്ള വളരെ ഭാരം കുറഞ്ഞതും ലളിതവുമായ jQuery പ്ലഗിൻ ആണ് ഇത്. ഇത് ഇൻസ്റ്റാൾ ചെയ്യാനും ഉപയോഗിക്കാനും വളരെ എളുപ്പമാണ്. ഇതിന് സങ്കീർണ്ണമായ ഭാഗങ്ങളില്ല. വേഗമേറിയതും എളുപ്പമുള്ളതും എന്നാൽ ഫലപ്രദവുമായ ഡയലോഗ് ബോക്സ്.

എറിക് മാർട്ടിന്റെ സിമ്പിൾ മോഡൽ

മോഡൽ ഡയലോഗുകൾ വികസിപ്പിക്കുന്നതിനുള്ള ശക്തമായ ഇന്റർഫേസ് നൽകുന്ന ഭാരം കുറഞ്ഞ jQuery പ്ലഗിൻ ആണ് SimpleModal. ഇതൊരു മോഡൽ ഡയലോഗ് ചട്ടക്കൂടായി കരുതുക. ക്രോസ്-ബ്രൗസർ വികസന പ്രശ്‌നങ്ങളിൽ നിന്ന് നിങ്ങളെ സംരക്ഷിക്കുമ്പോൾ, നിങ്ങൾക്ക് സങ്കൽപ്പിക്കാൻ കഴിയുന്ന എന്തും നിർമ്മിക്കാനുള്ള വഴക്കം SimpleModal നൽകുന്നു ഉപയോക്തൃ ഇന്റർഫേസ്.

ഉപസംഹാരം

മുകളിൽ അവതരിപ്പിച്ച എല്ലാ വിവരങ്ങളും നിങ്ങൾക്ക് ഉപയോഗപ്രദമാകുമെന്ന് ഞങ്ങൾ പ്രതീക്ഷിക്കുന്നു. ദയവായി ഒരു അഭിപ്രായം രേഖപ്പെടുത്തി ഈ പ്ലഗിന്നുകളെക്കുറിച്ച് നിങ്ങൾ എന്താണ് ചിന്തിക്കുന്നതെന്ന് ഞങ്ങളോട് പറയുക, അല്ലെങ്കിൽ ഞങ്ങൾക്ക് ഇതുവരെ അറിയാത്ത മറ്റൊരു പ്ലഗിൻ നിങ്ങൾ ഉപയോഗിക്കുന്നുണ്ടാകാം.

"മോഡൽ വിൻഡോസിനായുള്ള ടോപ്പ് 10 jQuery പ്ലഗിനുകൾ" എന്ന ലേഖനത്തിന്റെ വിവർത്തനം ഫ്രണ്ട്ലി പ്രോജക്റ്റ് ടീം തയ്യാറാക്കിയതാണ്.

ഇതൊരു ഭാരം കുറഞ്ഞ JQuery മോഡൽ പോപ്പ്അപ്പ് പ്ലഗിൻ ആണ് (1.49KB മാത്രം). സ്‌ക്രിപ്റ്റ് പോപ്പ്അപ്പ് സൃഷ്‌ടിക്കുകയോ സ്‌റ്റൈൽ ചെയ്യുകയോ ചെയ്യുന്നില്ല, പക്ഷേ ഇത് കേന്ദ്രീകരിക്കൽ, മോഡൽ ഓവർലേ, ഇവന്റ് എന്നിവയ്‌ക്കും അതിലേറെ കാര്യങ്ങൾക്കുമുള്ള എല്ലാ ലോജിക്കും നൽകുന്നു. ഇത് നിങ്ങളുടെ ആവശ്യങ്ങൾക്ക് അനുയോജ്യമായ നിരവധി ഇഷ്‌ടാനുസൃതമാക്കൽ ഓപ്ഷനുകൾ നൽകുന്നു.

2. മെസ്സി

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

3.Shadowbox.js

ഏറ്റവും ജനപ്രിയമായ എല്ലാ വെബ് പബ്ലിഷിംഗ് മീഡിയ ഫോർമാറ്റുകളെയും പിന്തുണയ്ക്കുന്ന സ്റ്റാൻഡേർഡ് വ്യൂവിംഗ് ആപ്ലിക്കേഷൻ.

4. jQuery Impromptu

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

ഡെമോ

നിങ്ങളുടെ വെബ് ബ്രൗസറിൽ അറിയിപ്പുകൾ, ഡയലോഗുകൾ, മോഡലുകൾ എന്നിവ പ്രദർശിപ്പിക്കാൻ നിങ്ങളെ സഹായിക്കുന്ന ഒരു jQuery പ്ലഗിൻ.

ഡെമോ

6. കളർബോക്സ് - ഒരു jQuery ലൈറ്റ്ബോക്സ്

jQuery-യ്‌ക്കായുള്ള ഭാരം കുറഞ്ഞതും ഇഷ്ടാനുസൃതമാക്കാവുന്നതുമായ ലൈറ്റ്‌ബോക്‌സ് പ്ലഗിൻ

ഡെമോ

നൽകുന്നു പെട്ടെന്നുള്ള വഴിപേജ് വീണ്ടും ലോഡുചെയ്യാതെ ഡാറ്റ കാണിക്കുക.

ഡെമോ

8. jQuery സ്പീഡോ പോപ്പ്അപ്പ്

ചെറുതും ശക്തവും ഇഷ്ടാനുസൃതമാക്കാവുന്നതുമായ jQuery പോപ്പ്അപ്പ് / മോഡൽ പ്ലഗിൻ. HTML5, CSS3 എന്നിവയിൽ നിർമ്മിച്ചത്.

ഡെമോ

9. ബോക്‌സി

ഫ്ലെക്സിബിൾ ഡയലോഗ് ബോക്സ് ഫേസ്ബുക്ക് ശൈലിഡ്രാഗ് ആൻഡ് ഡ്രോപ്പ്, ഫ്രെയിം സൈസിംഗ് എന്നിവയ്ക്കുള്ള പിന്തുണയുള്ള JQuery-യ്ക്ക്. ഡയലോഗ് ബോക്‌സുകൾ സൃഷ്‌ടിച്ചതിന് ശേഷം കൈകാര്യം ചെയ്യുന്നതിനായി ഒരു ഒബ്‌ജക്റ്റ് ഇന്റർഫേസ് നൽകിക്കൊണ്ട് ഞാൻ കണ്ട മറ്റ് ഓവർലേകളിൽ നിന്ന് ഇത് വ്യത്യസ്തമാണ്.

എളുപ്പം JQuery പ്ലഗിൻ, ഇത് വിൻഡോയിലേക്ക് ശക്തമായ ഒരു ഇന്റർഫേസ് നൽകുന്നു. ഇത് ഒരു മോഡൽ വിൻഡോ ആയി കരുതുക.

ഡെമോ

11. സുഗമമായ പോപ്പ്അപ്പ്

ലളിതവും വൃത്തിയുള്ളതുമായ ട്യൂട്ടോറിയലിൽ JQuery ഉപയോഗിച്ച് ആദ്യം മുതൽ അതിശയകരവും വലുതുമായ ഒരു പോപ്പ്അപ്പ് എങ്ങനെ സൃഷ്ടിക്കാം...

ഡെമോ

12. മോഡൽ ബോക്സിൽ നിന്ന് പുറത്തുകടക്കുക

നിങ്ങളുടെ സൈറ്റ് വിടുന്ന സന്ദർശകർക്ക് ഒരു പ്രത്യേക സന്ദേശം കാണിക്കേണ്ടതുണ്ടോ? അവർ ബ്രൗസർ വിൻഡോ അടയ്ക്കുന്നതിന് മുമ്പ് ഒരു മോഡൽ വിൻഡോ ആരംഭിച്ച് നിങ്ങൾക്ക് ഇത് ചെയ്യാൻ കഴിയും.

ഡെമോ

13. jQuery BlockUI പ്ലഗിൻ

എപ്പോൾ സിൻക്രണസ് സ്വഭാവം അനുകരിക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു AJAX ഉപയോഗിക്കുന്നു, ബ്രൗസർ തടയാതെ. പ്രവർത്തനക്ഷമമാക്കുമ്പോൾ, അത് അപ്രാപ്തമാക്കുന്നത് വരെ പേജിൽ (അല്ലെങ്കിൽ പേജിന്റെ ഭാഗം) ഉപയോക്തൃ പ്രവർത്തനത്തെ തടയും. BlockUI അത് നൽകാൻ DOM-ലേക്ക് ഘടകങ്ങൾ ചേർക്കുന്നു രൂപംഉപയോക്തൃ ഇടപെടലുകളെ തടയുന്ന പെരുമാറ്റവും.

ഡെമോ

14. ടിക്ക്ബോക്സ്

വെബ് പേജ് UI വിജറ്റ് JQuery ലൈബ്രറിയുടെ മുകളിൽ JavaScript-ൽ എഴുതിയിരിക്കുന്നു. ഒരൊറ്റ ചിത്രം, ഒന്നിലധികം ചിത്രങ്ങൾ, ഉൾച്ചേർത്ത ഉള്ളടക്കം, iframed ഉള്ളടക്കം, അല്ലെങ്കിൽ AJAX വഴി നൽകുന്ന ഉള്ളടക്കം ഒരു ഹൈബ്രിഡ് രൂപത്തിൽ കാണിക്കുക എന്നതാണ് ഇതിന്റെ പ്രവർത്തനം.

17. ലളിതമായ jQuery മോഡൽ

Jquery ഉപയോഗിച്ച് ഒരു മോഡൽ വിൻഡോ ഉണ്ടാക്കുക

18. ലിക്നോ വെബ് മോഡൽ വിൻഡോസ് ബിൽഡർ

ലിക്നോ വെബ് ബിൽഡർ ഒരു ശക്തമായ WYSIWYG ആണ് സോഫ്റ്റ്വെയർഅത്ഭുതകരമായ സൃഷ്ടിക്കാൻ jQuery മോഡൽവിൻഡോകൾ, ഡയലോഗ് ബോക്സുകൾ, മോഡൽ സ്ലൈഡ്ഷോകൾ, പോപ്പ്-അപ്പുകൾ തുടങ്ങിയവ. ആപ്പ് ആവശ്യമായ എല്ലാ കോഡുകളും സൃഷ്ടിക്കുന്നു, അതിനാൽ പ്രോഗ്രാമിംഗ് കഴിവുകളൊന്നും ആവശ്യമില്ല. എല്ലാ ഫലങ്ങളും ക്രോസ്-ബ്രൗസർ, ക്രോസ്-സിഎംഎസ്, ക്രോസ്-ഡിവൈസ് എന്നിവയാണ്.