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

ഇതൊരു ഭാരം കുറഞ്ഞ 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. ടിക്ക്ബോക്സ്

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

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

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

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

ലിക്നോ വെബ് ബിൽഡർ ഒരു ശക്തമായ WYSIWYG ആണ് സോഫ്റ്റ്വെയർആകർഷണീയമായ 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. ഇതൊരു മോഡൽ ഡയലോഗ് ചട്ടക്കൂടായി കരുതുക. യുഐ വികസനവുമായി ബന്ധപ്പെട്ട ക്രോസ്-ബ്രൗസർ പ്രശ്‌നങ്ങളിൽ നിന്ന് നിങ്ങളെ പരിരക്ഷിക്കുമ്പോൾ, നിങ്ങൾക്ക് സങ്കൽപ്പിക്കാൻ കഴിയുന്ന എന്തും നിർമ്മിക്കാനുള്ള വഴക്കം സിമ്പിൾ മോഡൽ നൽകുന്നു.

ഉപസംഹാരം

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

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

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

ഈ പോസ്റ്റിൽ ഞങ്ങൾ ഒരു ലളിതമായ മോഡൽ വിൻഡോ എങ്ങനെ നിർമ്മിക്കാം എന്നതിന്റെ ഒരു ഉദാഹരണം നോക്കും JQuery ഉപയോഗിക്കുന്നുകൂടാതെ സി.എസ്.എസ്. പ്രത്യേകത ഈ ഉദാഹരണം 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); // പശ്ചാത്തലം മറയ്ക്കുക );));));

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

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

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

ഇവിടെ ക്ലിക്ക് ചെയ്യുക! 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 റെസ്‌പോൺസീവ് മോഡൽ വിൻഡോ ഉണ്ടാക്കി