1. jQuery "சிம்பிள் மோடல் பாக்ஸ்" இல் மாதிரி சாளரம் 2. jQuery சொருகி "LeanModal"

மாதிரி சாளரங்களில் உள்ளடக்கத்தைக் காட்டுகிறது. டெமோ பக்கத்தில் செயலில் உள்ள செருகுநிரலைப் பார்க்க, இணைப்பைக் கிளிக் செய்யவும்: பதிவு படிவம் அல்லது அடிப்படை உள்ளடக்கம்.

3. jQuery சொருகி "டோஸ்ட்மெசேஜ்"

பாப்-அப் செய்திகள். சொருகி இரண்டு பதிப்புகளில் வருகிறது. ஒரு சந்தர்ப்பத்தில், ஒரு குறிப்பிட்ட நேரத்திற்குப் பிறகு, செய்திகள் தானாகவே மறைந்துவிடும், இரண்டாவது செயலாக்கத்தில், ஒரு செய்தியை மூடுவதற்கு, நீங்கள் ஒரு பொத்தானைக் கிளிக் செய்ய வேண்டும்.

4. மாதிரி சாளரத்தில் தோன்றும் உள்ளடக்கம்

செருகுநிரல் "வெளிப்படுத்து". செயலியில் உள்ள செருகுநிரலைக் காண, டெமோ பக்கத்தில் உள்ள "ஃபயர் எ ரிவீல் மாடல்" பொத்தானைக் கிளிக் செய்யவும்.

5. அழகான உரையாடல் பெட்டிகள்

சொருகி செயலில் இருப்பதைக் காண டெமோ பக்கத்தில் உள்ள குறுக்கு மீது கிளிக் செய்யவும்.

6. Mootools மாதிரி சாளரம், "MooDialog" செருகுநிரல் 7. திரையின் மேல் jQuery பாப்அப் பேனல் 8. jQuery பாப்அப் சாளரம்

வடிவம் காட்சி jQuery சொருகி பின்னூட்டம்பாப்-அப் சாளரத்தில்.

10. செயல்படுத்துவதற்கு MooTools செருகுநிரல் "லைட்ஃபேஸ்" உரையாடல் பெட்டிகள்முகநூல்

பேஸ்புக் பாணி உரையாடல் பெட்டிகள். நிலையான தகவல்களுக்கு கூடுதலாக, நீங்கள் படங்கள், சட்டங்கள், அஜாக்ஸ் கோருகிறது. சொருகி எவ்வாறு செயல்படுகிறது என்பதற்கான நிறைய அமைப்புகள், மிகவும் சக்திவாய்ந்த கருவி. மிகவும் ஸ்டைலான மற்றும் செயல்பாட்டு தெரிகிறது. வெவ்வேறு உள்ளடக்கத்துடன் எடுத்துக்காட்டுகளைப் பார்க்க டெமோ பக்கத்தில் உள்ள இணைப்புகளைப் பின்பற்றவும்.

11. jQuery மாதிரி சாளரம்

jQuery இல் ஒரு நேர்த்தியான பாப்அப் உரையாடல்.

12. jQuery மாதிரி ஜன்னல்கள்

அழகான பாப்-அப் மாதிரி ஜன்னல்கள். மூன்று பாணிகள். டெமோ பக்கத்தில் சாளரங்களைத் திறக்க 3 இணைப்புகள் உள்ளன.

13. jQuery மாதிரி சாளரங்கள்

பல வகையான பாப்-அப் மாதிரி சாளரங்கள். செயலில் உள்ள செருகுநிரலைப் பார்க்க, டெமோ பக்கத்தில் உள்ள இணைப்பைக் கிளிக் செய்யவும்.

15. பக்கத்தின் மேல் தோன்றும் செய்தி

செய்தி பக்கத்தின் மேல் காட்டப்படும், அதையொட்டி மங்கலானது. பாப்-அப் செய்தியைக் காண டெமோ பக்கத்தில் "என்னைக் கிளிக் செய்க" என்பதைக் கிளிக் செய்யவும். குறுக்கு மீது கிளிக் செய்தால் அது மூடப்படும். jQuery ஐப் பயன்படுத்தி செயல்படுத்தப்பட்டது.

16. ஜாவாஸ்கிரிப்ட்டில் மாதிரி சாளரம் "ModalBox"

பாப்-அப்கள் மற்றும் பக்க மறுஏற்றங்களைப் பயன்படுத்தாமல் நவீன மாதிரி உரையாடல்களைச் செயல்படுத்தவும். டெமோ பக்கத்தில், ஸ்கிரிப்ட் செயலில் இருப்பதைக் காண, "டெமோவைத் தொடங்கு" பொத்தானைக் கிளிக் செய்யவும்.

17. முன்மாதிரி நூலகத்தைப் பயன்படுத்தி "லைட்பாக்ஸ்" செருகுநிரல்

மாதிரி சாளரங்களில் உள்ளடக்கத்தைக் காண்பிப்பதற்கான செருகுநிரல்.

பற்றி பேசுகிறது பல்வேறு நுட்பங்கள்வலைத்தள உருவாக்கம், மாதிரி சாளரங்களை உருவாக்குவதற்கான சில வழிகளைப் பற்றி உங்களுக்குச் சொல்லாமல் இருப்பது அபத்தமானது. பாப்-அப் மற்றும் மாடல் விண்டோக்களைப் பயன்படுத்துவதன் நோக்கம், பயன் மற்றும் வளர்ந்து வரும் சிக்கல்களை நாங்கள் விவாதிக்க மாட்டோம். அத்தகைய சாளரங்களை உருவாக்குவதற்கான பல எடுத்துக்காட்டுகளில் ஒன்றை மட்டும் பார்ப்போம்.
மற்றும் போன்ற சிறப்பு செருகுநிரல்களைப் பயன்படுத்த முடியாத சூழ்நிலைகள் உள்ளன, எனவே நீங்கள் சொந்தமாக எவ்வாறு உருவாக்கலாம் என்பதைப் புரிந்துகொள்வது மதிப்பு.

இதை எப்படி செய்வது என்று பார்ப்போம்:

HTML

பின்வரும் பண்புக்கூறுகளுடன் குறிச்சொற்களைச் சேர்ப்பதன் மூலம் தொடங்குவோம்:

• href - #?w=500 என்பது சாளரத்தின் அகலத்தைக் குறிக்கிறது
• rel - ஒவ்வொரு சாளரத்திற்கும் தனிப்பட்ட பண்பு
• class="poplight" – பாப்-அப் சாளரத்தைக் காண்பிப்பதற்கான வகுப்பு

< a href= "#?w=500" rel= "popup_name" class = "poplight" >செயலில் உள்ள சாளரத்தைப் பார்க்கவும் - அகலம் = 500px

செயலில் உள்ள சாளரத்தைப் பார்க்கவும் - அகலம் = 500px

அடுத்து பாப்அப்பிற்கான இன்லைன் மார்க்அப்பை உருவாக்க வேண்டும். நீங்கள் அதை பக்கத்தில் எங்கும் வைக்கலாம், எடுத்துக்காட்டாக உள்ளடக்கத்தின் கீழே. குறிச்சொல்லின் rel பண்புக்கூறுடன் பாப்அப் ஐடி பொருந்துகிறது என்பதை நினைவில் கொள்ளவும்
இது இணைப்பையும் பாப்அப்பையும் ஒன்றாக இணைக்கும்.

தலைப்பு

நீங்கள் விரும்பும் எந்த உரையும்

எனவே, பக்கத்தில் எங்கள் சாளரத்தின் இடத்தை நாங்கள் கண்டுபிடித்துள்ளோம், இப்போது அதை பாணிகளைப் பயன்படுத்தி அலங்கரிப்போம், பேசுவதற்கு, ஒரு கண்ணியமான தோற்றத்தைக் கொடுங்கள்.

CSS தளவமைப்பு

அதிக தெளிவுக்காக, எங்கள் சாளரத்தின் பாணி அளவுருக்களுக்கான சில விளக்கங்களை நான் எழுதியுள்ளேன். பாப்அப் விண்டோக்கள் வெவ்வேறு அளவுகளைக் கொண்டிருக்கலாம் என்பதால், CSS popup_block இல் சாளரத்தின் விளிம்புகளைக் குறிப்பிடவில்லை; தேவையான அளவைக் கணக்கிடுவது .

# மங்கல் ( காட்சி : எதுவுமில்லை ; /* --இயல்புநிலைமறைக்கப்பட்ட--*/ பின்னணி: rgba (7, 87, 207, 0.8); நிலை: நிலையான; இடது: 0; மேல்: 0; அகலம்: 100%; உயரம்: 100%; ஒளிபுகாநிலை: .80; z-குறியீடு: 9999; ) .popup_block (காட்சி: எதுவுமில்லை; /*--இயல்புநிலையாக மறைக்கப்பட்டுள்ளது--*/ பின்னணி: #fff; திணிப்பு: 20px; எல்லை: 8px திடமான rgb (134, 134, 134) ; மிதவை: இடது ; எழுத்துரு அளவு: 85 நிலை --*/ -webkit-box-shadow: 0px 0px 20px #000 ; -moz-box-shadow: 0px 0px 20px #000 ; box-shadow : 0px 0px 20px #000 ; * rounding-CSS3 கார்னர் / -webkit-border-radius: 12px ; -moz-border-radius: 12px ; border-radius : 12px ; ) .popup_block p ( எழுத்துரு எடை : 400 ; திணிப்பு : 0 ; விளிம்பு : 0 ; வண்ணம் : #000 -உயரம்: 1.6; .popup_block h2 (விளிம்பு: 0px 0 10px; நிறம்: rgb (43, 43, 43); எழுத்துரு-எடை: 400; உரை-சீரமைப்பு: மையம்; உரை-நிழல்: 1px 1px; 2px0D0 * ஒரு மூடும் பொத்தானை உருவாக்கவும் */ .close (பின்னணி நிறம்: rgba (61, 61, 61, 0.8) ; எல்லை: 2px திட #சிசிசி ; உயரம்: 25px; வரி உயரம்: 20px; நிலை: முழுமையான; வலது: -17px; எழுத்துரு எடை: தடித்த; text-align: மையம்; உரை-அலங்காரம்: இல்லை; திணிப்பு: 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 ; box-shadow : 1px 1px 3px #000 ; ) மூடு: முன் (நிறம்: rgba (255, 255, 255, 0.9) .close: மிதவை box-shadow: 4px 4px 10px #857373; திணிப்பு: 0 ; ) /*--IE6-க்கான நிலையான பொசிஷனிங்--*/ * html # மங்கல் ( நிலை : absolute ; ) * html .popup_block ( நிலை : முழுமையான ; )

#ஃபேட் (காட்சி: எதுவுமில்லை;/*--இயல்பாக மறைக்கப்பட்டது--*/ பின்னணி: rgba(7, 87, 207, 0.8); நிலை: நிலையானது; இடது: 0; மேல்: 0; அகலம்: 100%; உயரம்: 100%; ஒளிபுகாநிலை: .80; z-index: 9999; .popup_block (டிஸ்ப்ளே: எதுவுமில்லை; /*--இயல்பாக மறைக்கப்பட்டது--*/ பின்னணி: #fff; திணிப்பு: 20px; பார்டர்: 8px திட rgb(134, 134, 134); மிதவை: இடது; எழுத்துரு அளவு: 85%; நிலை: நிலையானது; மேல்: 50%; இடது: 50%; நிறம்: #000; அதிகபட்ச அகலம்: 750px; நிமிட அகலம்: 320px; உயரம்: தானியங்கு ; z-index: 99999; /*--CSS3 box shadow--*/ -webkit-box-shadow: 0px 0px 20px #000; -moz-box-shadow: 0px 0px 20px #000; box-shadow: 0px நிழல்: 0px 20px #000 ; திணிப்பு: 0; விளிம்பு: 0; நிறம்: #000; வரி-உயரம்: 1.6;).popup_block h2 (விளிம்பு: 0px 0 10px; நிறம்: rgb(43, 43, 43); எழுத்துரு எடை: 400; உரை-சீரமைப்பு : மையம், உரை நிழல்: 1px 1px 2px #0D0C0C; கரை: 2px திட #சிசிசி; உயரம்: 25px; வரி உயரம்: 20px; நிலை: முழுமையான; வலது: -17px; எழுத்துரு எடை: தடித்த; text-align: மையம்; உரை-அலங்காரம்: எதுவுமில்லை; திணிப்பு: 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; ) .close:முன் (நிறம்: rgba(255, 255, 255, 0.9); உள்ளடக்கம்: "X"; எழுத்துரு அளவு: 12px; உரை-நிழல்: 0 -1px rgba(0, 0, 0, 0.9); ) மூடவும் box-shadow:4px 4px 10px #857373; padding:0; ) /*--IE6-க்கான நிலையான பொசிஷனிங்--*/ *html #fade (நிலை: absolute; ) *html .popup_block (நிலை: முழுமையான; )

சாளரத்தின் உருவாக்கம் மற்றும் அதன் தோற்றம்உடன் css ஐப் பயன்படுத்துகிறது, எந்த சிறப்பு சிரமங்களும் இருக்காது என்று நினைக்கிறேன். நீங்கள் ஸ்டைல்களை நேரடியாக பதிவு செய்யலாம் HTML பக்கம், மற்றும் குறிச்சொற்களுக்கு இடையில், அல்லது அதை உங்கள் பாணிகளின் தனி கோப்பில் வைக்கலாம், பொதுவாக இது ஒரு style.css கோப்பு அல்லது அது போன்றது.

JQuery அமைப்பு

க்கு முழு அளவிலான வேலைமாதிரி சாளரத்தில், நீங்கள் jQuery ஐ இணைக்க வேண்டும், இந்த நூலகத்தின் வேலையைப் பற்றி நன்கு தெரியாதவர்கள் படிக்கலாம்.

சரி, நாம் தொடர்வோம். நீங்கள் அதிகம் செய்யலாம் சமீபத்திய பதிப்புநூலக இணையதளத்தில் இருந்து jQuery, அல்லது Google இன் ஆழத்தில் அமைந்துள்ள ஒரு தனி கோப்பைப் பயன்படுத்தவும், அதை ஆவணத்துடன் இணைத்து, மூடும் குறிச்சொல்லுக்கு முன் பகுதியில், பின்வரும் வரியை வைக்கவும்:

அடுத்த கட்டத்தில் நிரப்புதல் மற்றும் செயல்பாடுகளைப் பார்ப்போம் jQuery சொருகி, எங்கள் பாப்அப்பைச் செயல்படுத்த, நாம் என்ன செய்கிறோம் என்பதை நன்கு புரிந்துகொள்ள குறியீடு சில விளக்கங்களைக் கொண்டுள்ளது.

jQuery சொருகி

$(ஆவணம்) . தயார்(செயல்பாடு () ( //பாப்லைட் கிளாஸ் மற்றும் href டேக் பண்புடன் இணைப்பைக் கிளிக் செய்யும் போது உடன் # $("a.poplight" ) . கிளிக்(செயல்பாடு () ( var popID = $(இது) . attr("rel" ) ; //சாளரத்தின் பெயரைப் பெறவும், புதியவற்றைச் சேர்க்கும் போது rel பண்புக்கூறில் பெயரை மாற்ற மறக்காமல் இருப்பது முக்கியம் இணைப்பு var popURL = $(இது) . attr("href") ; //இணைப்பின் href பண்புக்கூறிலிருந்து அளவைப் பெறவும் //வினவல் மற்றும் href url இலிருந்து மாறிகள் var query= popURL. பிரித்து ("?" ) ; var dim = வினவல்[ 1 ] . பிளவு ("&" ); var popWidth = மங்கலான[ 0 ] . பிளவு ("=" ) [ 1 ] ; //வினவல் சரத்தின் முதல் மதிப்பு //சாளரத்தில் மூடு பட்டனைச் சேர்க்கவும் $( "#" + popID) . fadeIn() . css(( "width" : Number( popWidth ) ) ).("#" + popID) . height() + 80 ) / 2 ; var popMargLeft = ($("# " + popID) . width() + 80 ) / 2 ; //உள்தள்ளல் மதிப்பை அமைக்கவும் $("#" + popID) .css(( "மார்ஜின்-டாப்" : - popMargTop, "margin-left" :- popMargLeft ) ); //ஒரு ஒளிஊடுருவக்கூடிய கருமையாக்கும் பின்னணியைச் சேர்க்கவும் $("உடல்" ) . append("") ; //டிவ் கொள்கலன் குறிச்சொல்லுக்கு முன் வைக்கப்படும். $("#மங்கல்") . css(("வடிகட்டி" : "alpha(opacity=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 பண்புக்கூறில் பெயர் var popURL = $(இது).attr("href"); //இணைப்பின் href பண்புக்கூறிலிருந்து அளவைப் பெறவும் //வினவல் மற்றும் மாறிகள் href url var வினவலில் இருந்து = 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(( "margin-top" : -popMargTop, "margin-left" : -popMargLeft ) ); //ஒரு ஒளிஊடுருவக்கூடிய கருமையாக்கும் பின்னணியைச் சேர்க்கவும். $("#Fade").css(("filter" : "alpha(opacity=80)")).fadeIn(); //அடுக்கு ஒளிஊடுருவக்கூடிய தன்மை, முட்டாள் IE திரும்ப தவறானது; )); //சாளரத்தை மூடிவிட்டு பின்புலத்தை மங்கச் செய்யவும் $(ஆவணம்).on("click", "a.close, #fade", function() ( //சாளரத்திற்கு வெளியே கிளிக் செய்வதன் மூலம் மூடவும், அதாவது பின்னணியில்... $( "#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= உடன் span உறுப்பு உள்ளது மாதிரி_மூடு. இந்த உறுப்பு மாதிரி சாளரத்தை மூடுவதற்கான பொத்தானாக செயல்படும்; கூடுதலாக, தொகுதிக்கு கீழே id= பண்புடன் ஒரு div தொகுதி உள்ளது. மேலடுக்கு, இது பின்னணியை இருட்டடிக்கும். மாதிரி சாளரம், வகுப்புடன் இணைப்பு மூலம் திறக்கப்படும் மாதிரி.

மாதிரி சாளரத்திற்கான CSS

#மாதிரி_வடிவம் (அகலம்: 300px; உயரம்: 300px; எல்லை-ஆரம்: 5px; எல்லை: 3px #000 திடம்; பின்னணி: #fff; நிலை: நிலையானது; மேல்: 45%; இடது: 50%; விளிம்பு-மேல்: -150px; விளிம்பு-இடது: -150px; காட்சி: எதுவுமில்லை; ஒளிபுகாநிலை: 0; z-குறியீடு: 5; திணிப்பு: 20px 10px; ) #மாதிரி_வடிவம் #மாதிரி_மூடு (அகலம்: 21px; உயரம்: 21px; நிலை: முழுமையானது; மேல்: 10px; வலது: 10px; கர்சர்: சுட்டிக்காட்டி; காட்சி: தொகுதி; ) #மேலே (z-index:3; நிலை:நிலையானது; பின்னணி-நிறம்:#000; ஒளிபுகாநிலை:0.8; -moz-ஒளிபுகாநிலை:0.8; வடிகட்டி:ஆல்ஃபா(ஒளிபுகாநிலை=80) ; அகலம்: 100%; உயரம்: 100%; மேல்: 0; இடது: 0; கர்சர்: சுட்டிக்காட்டி; காட்சி: எதுவுமில்லை; )

க்கு மாதிரி_வடிவம்நாம் ஒரு நிலையான அகலம் மற்றும் உயரத்தை அமைத்து, பின்னர் நிலையை திரையின் மையத்தில் மையப்படுத்துகிறோம். மாதிரி சாளர பின்னணிக்கு ( மேலடுக்கு) திரையின் அகலத்திற்கு ஏற்றவாறு அளவை அமைத்து, வெளிப்படைத்தன்மையை நிரப்பி, முன்னிருப்பாக மறைக்கவும். உடன் சிறப்பு தருணம் z-குறியீடு, மாதிரியானது பக்கத்தில் உள்ள அனைத்து உறுப்புகளிலும் மிகப்பெரியதாக இருக்க வேண்டும், மேலும் அட்டையானது மாதிரியைத் தவிர அனைத்து உறுப்புகளிலும் மிகப்பெரியதாக இருக்க வேண்டும்.

இப்போது மிக அடிப்படையான விஷயத்திற்கு, இது ஜாவாஸ்கிரிப்ட் குறியீடு. மாதிரி சாளரத்திற்கு இரண்டு முக்கிய நிகழ்வுகள் பயன்படுத்தப்படும்: அதன் திறப்பு - வர்க்கத்துடன் ஒரு உறுப்பு மீது கிளிக் செய்தல் மாதிரி, எங்கள் விஷயத்தில் இது ஒரு இணைப்பு, மற்றும் மாதிரி சாளரத்தை மூடுவது அட்டையில் ஒரு கிளிக் ஆகும் ( மேலடுக்கு), அல்லது மூடு பொத்தானைக் கிளிக் செய்யவும், எங்கள் விஷயத்தில் இது id= உடன் span உறுப்பு ஆகும் மாதிரி_மூடு.

$(document).ready(function() ( $(".modal").click(function(event)( event.preventDefault(); $("#overlay").fadeIn(400, // இன் காட்சியை அனிமேட் கவர் செயல்பாடு ()( // அடுத்து மோட் விண்டோவைக் காட்டு $("#modal_form") .css("டிஸ்ப்ளே", "பிளாக்") .animate((ஒளிபுகாநிலை: 1, மேல்: "50%"), 200); )); "), 200, // வெளிப்படைத்தன்மை செயல்பாட்டைக் குறைக்கவும்())( // அனிமேஷனுக்குப் பிறகு $(இது).css("டிஸ்ப்ளே", "இல்லை"); // சாளரத்தை மறைக்க $("#மேலே").ஃபேட்அவுட் (400); // பின்னணியை மறை ));));));

அனிமேட்டைப் பயன்படுத்தி செங்குத்து நிலையை மாற்றுகிறோம் மேல், அத்துடன் வெளிப்படைத்தன்மை ஒளிபுகாநிலை, மற்றும் இதன் மூலம் நாம் ஒரு சுவாரஸ்யமான விளைவைப் பெறுகிறோம். ஒரு சாளரத்தைத் திறக்கும்போதும் அதை மூடும்போதும் இதேபோன்ற விளைவு பயன்படுத்தப்படுகிறது. வித்தியாசம் என்னவென்றால், தொகுதிகளுக்கு பண்புகள் பயன்படுத்தப்படும் வரிசை மாறுகிறது, இதன் மூலம் சாளரத்தின் திறப்பு மற்றும் மூடுதலைக் காட்சிப்படுத்துகிறது.

மாடல் சாளரங்கள் நவீன வலை வடிவமைப்பின் ஒருங்கிணைந்த பகுதியாகும்; அவற்றின் உதவியுடன், டெவலப்பர் ஒரு பக்கத்தில் லூப்பிங் செய்யும் முறையை நாடலாம் மற்றும் பார்வையாளர்களை இரண்டாம் பக்கங்களுக்கு திருப்பி விட முடியாது. இந்த டுடோரியலில், jQuery மற்றும் CSS3 ஐப் பயன்படுத்தி உங்கள் இணையதளத்திற்கு மங்கலான பின்னணியுடன் அற்புதமான மாதிரி சாளரங்களை எவ்வாறு உருவாக்குவது என்பதைப் பார்ப்போம். இந்த விதிகளுக்கு நன்றி, சாளரம் தோன்றும் போது ஒரு மங்கலான பின்னணியை உருவாக்குவோம், இது தளத்தில் தேவையான தகவலுடன் மட்டுமே பார்வையாளரின் கண்ணை இணைக்கும்.

CSS3 இல் மங்கலான பின்னணி கொண்ட மாதிரி சாளரங்கள்

சிறந்த பொருளாதார செய்தி இங்கே மட்டுமே உள்ளது: துரோபாகா

சாளர அனிமேஷன், தோன்றும் பொத்தானைக் கிளிக் செய்யும் போது, ​​​​விண்டோ மேலிருந்து கீழாக அனிமேஷன் செய்யும், மேலும் பின்னணி மங்கலானது தானாகவே அதிகரிக்கும்.

படி 1. HTML

எங்களிடம் ஒரு கொள்கலன் இருக்கும்: தலைப்பு, விளக்கம், பின்னர் மாதிரி சாளரத்தைத் திறக்க toggleModal வகுப்பைக் கொண்ட பொத்தானுக்கு வகுப்பைச் சேர்க்கிறோம்:

தலைப்பு

விளக்கம்

சாளரத்திற்கான கட்டுரையின் தலைப்பைத் திறக்கவும்

இணையதளத்தை உருவாக்கும் போது தாவல்கள் மிகவும் சுவாரசியமான மற்றும் வசதியான விஷயம்; தளத்தில் சிறிது இடத்தை சேமிக்கும் போது, ​​தகவலை ஒழுங்காக ஒழுங்கமைக்க அவை உங்களை அனுமதிக்கின்றன.

நெருக்கமான

பின்னர் நாம் மோடல் இஸ்-ஆக்டிவ் வகுப்பைச் சேர்க்க வேண்டும், இந்த கிளாஸ் மாடல் விண்டோவை அழைப்பதற்குப் பொறுப்பாகும், மொடல்__ஹெடர் தலைப்புக்கும் அதன் ஸ்டைலிங்கிற்கும் பொறுப்பாகும்.

படி 2: CSS

இப்போது ஸ்டைலிங்கிற்குச் செல்வோம், முதல் படி பொத்தான் வகுப்பாக இருக்கும், இது நீங்கள் யூகித்தபடி, தளத்தில் உள்ள பொத்தான்களுக்கு பொறுப்பாக இருக்கும், அதற்கான சரியான காட்சி அளவுருக்களை நாங்கள் அமைத்துள்ளோம்:

பொத்தான் (பின்னணி: எதுவுமில்லை; பின்னணி-கிளிப்: திணிப்பு-பெட்டி; காட்சி: இன்லைன்-தடுப்பு; எல்லை: 0; பயனர்-தேர்ந்தெடு: எதுவுமில்லை; -வெப்கிட்-டச்-கால்அவுட்: எதுவுமில்லை; -வெப்கிட்-தோற்றம்: பொத்தான்; -வெப்கிட்-பயனர் -தேர்ந்தெடு: இல்லை; -moz-பயனர்-தேர்ந்தெடு: இல்லை; -ms-பயனர்-தேர்ந்தெடு: இல்லை; )

கொள்கலன் (நிலை: உறவினர்; விளிம்பு: 0 ஆட்டோ; அதிகபட்ச அகலம்: 960px; பெட்டி அளவு: பார்டர்-பாக்ஸ்; திணிப்பு-மேல்: 40px; )

கட்டுரை (பின்னணி: #fff; திணிப்பு: 20px; விளிம்பு-கீழ்: 40px; எல்லை-ஆரம்: 5px; ) .மாதிரி (காட்சி: எதுவுமில்லை; நிலை: நிலையானது; மேல்: 50%; அகலம்: 100%; உயரம்: தானியங்கு; விளிம்பு -மேல்: -150px; பின்னணி-நிறம்: $வண்ணம்-வெள்ளை; எல்லை-ஆரம்: 3px; z-இண்டெக்ஸ்: 999; பெட்டி-நிழல்: 0px 1px 3px 0px கருமை($color-bg, 10%); @media #( $small) (இடது: 50%; விளிம்பு-இடது: -260px; அதிகபட்ச அகலம்: 520px; ) &.is-செயலில் (காட்சி: தொகுதி; அனிமேஷன்: 1s நேரியல் ஸ்லைடு; ) .உள் (நிலை: உறவினர்; திணிப்பு: 20px ; ) .modal__header (எல்லை-கீழே: 1px திட கருமை($color-bg, 5%); ) .modal__footer ( text-align: centre; button ( display: inline-block; ) )

பாணிகள் மிகவும் எளிமையானவை, அவை சேமிக்கப்படுகின்றன தனி கோப்புஒருமுறையாவது CSSஐ சந்தித்த டெவலப்பருக்கு அவற்றைத் திருத்தும்போது சிரமங்களை ஏற்படுத்தக்கூடாது.

படி 3. JS

எங்கள் கடைசி, ஆனால் குறைவான முக்கியத்துவம் வாய்ந்தது, மெனு தோன்றும் போது தானியங்கி பின்னணி மங்கலை அமைப்பது, அத்துடன் இணைப்புகளின் கிளிக்தன்மை, சிறிய JS விதிகள் இதற்கு எங்களுக்கு உதவும்:

$("உடல்").addClass("is-blurred"); $(".toggleModal").on("click", function (event) ( event.preventDefault(); $(".modal").toggleClass("is-active"); $("body").toggleClass ("மங்கலானது");));

இதன் விளைவாக, பார்வையாளர்களின் கண்ணுக்கு மகிழ்ச்சி அளிக்கும் மற்றும் உங்கள் வடிவமைப்பை ஒழுங்கீனம் செய்யாத அற்புதமான மாதிரி ஜன்னல்கள்.

3. ஒரு இணைப்பிலிருந்து அழைக்கப்படும் jQuery மாதிரி சாளரத்தின் எடுத்துக்காட்டு (டெமோவிலிருந்து)

பெரும்பாலும், நீங்கள் ஏற்கனவே இணையத்தில் பாப்-அப் மாதிரி சாளரத்தை ஒன்றுக்கு மேற்பட்ட முறை பார்த்திருக்கிறீர்கள் - பதிவு உறுதிப்படுத்தல், எச்சரிக்கை, குறிப்பு தகவல், கோப்பு பதிவிறக்கம் மற்றும் பல. இந்த டுடோரியலில் எளிமையான மாதிரி சாளரங்களை எவ்வாறு உருவாக்குவது என்பதற்கான பல எடுத்துக்காட்டுகளை வழங்குகிறேன்.

ஒரு எளிய பாப்-அப் மாதிரி சாளரத்தை உருவாக்குதல் உடனடியாக தோன்றும் ஒரு எளிய மாதிரி சாளரத்திற்கான குறியீட்டைப் பார்க்க ஆரம்பிக்கலாம்
jQuery குறியீடு

$(ஆவணம்) தயார்(செயல்பாடு()
{
எச்சரிக்கை ("பாப்-அப் சாளரத்தில் உரை");
});

குறியீட்டை உங்கள் பக்கத்தின் உடலில் எங்கும் ஒட்டவும். பக்கம் ஏற்றப்பட்டவுடன், எந்த கட்டளையும் இல்லாமல், இது போன்ற ஒரு சாளரத்தைக் காண்பீர்கள்:

ஆனால் முழுப் பக்கமும் உலாவியில் ஏற்றப்பட்ட பிறகு பின்வரும் குறியீடு செயல்படுத்தப்படும். எங்கள் எடுத்துக்காட்டில், படங்களுடன் பக்கத்தை ஏற்றிய பிறகு, ஒரு எளிய பாப்-அப் சாளரம் பாப் அப் செய்யும்:

$(window).load(செயல்பாடு()
{
எச்சரிக்கை("பக்கம் ஏற்றப்பட்டது!)");
});

CSS உடனான இணைப்பிலிருந்து jQuery மாதிரி சாளரத்தை அழைப்பது, இணைப்பைக் கிளிக் செய்யும் போது, ​​மாதிரி சாளரத்தை உருவாக்குவது அடுத்த படியாகும். பின்னணி மெதுவாக இருட்டாகிவிடும்.

அத்தகைய சாளரங்களில் உள்நுழைவு மற்றும் பதிவு படிவங்கள் அமைந்துள்ளதை நீங்கள் அடிக்கடி காணலாம். வாருங்கள் நம் வேலையை தொடங்குவோம்

முதலில், html பகுதியை எழுதுவோம். இந்தக் குறியீட்டை உங்கள் ஆவணத்தின் உடலில் வைக்கிறோம்.

மாதிரி சாளரத்தை அழைக்கிறது

மாதிரி சாளர உரை
நெருக்கமான
மாதிரி சாளரத்தில் உரை.

CSS குறியீடு. ஒரு தனி css கோப்பில், அல்லது தலையில்.

உடல் (
font-family:verdana;
எழுத்துரு அளவு:15px;
}
.இணைப்பு (நிறம்:#fff; உரை-அலங்காரம்: எதுவுமில்லை)
.link:hover (color:#fff; text-decoration:underline)
#முகமூடி (
நிலை: முழுமையான;
இடது:0;
மேல்:0;
z-குறியீடு:9000;
பின்னணி நிறம்:#000;
காட்சி: எதுவுமில்லை;
}
#boxes.window (
நிலை: முழுமையான;
இடது:0;
மேல்:0px;
மேல்: 40px;
அகலம்: 440px;
உயரம்:200px;
காட்சி: எதுவுமில்லை;
z-குறியீடு:9999;
திணிப்பு: 20px;
வழிதல் மறைத்து;
}
#பெட்டிகள் #உரையாடல் (
அகலம்:375px;
உயரம்:203px;
திணிப்பு:10px;
பின்னணி நிறம்:#ffffff;
}
.top(
நிலை: முழுமையான;
இடது:0;
மேல்:0;
அகலம்:370px;
உயரம்:30px;
பின்னணி: #0085cc;
திணிப்பு: 8px 20px 6px 10px;
}
.நெருக்கமான(
மிதவை:வலது;
}
.உள்ளடக்கம்(
திணிப்பு-மேல்: 35px;
}

jQuery குறியீட்டில், மாதிரி சாளரம் மற்றும் முகமூடியின் நிலைப்பாட்டில் கவனம் செலுத்துவோம், எங்கள் விஷயத்தில் பின்னணி படிப்படியாக இருட்டாகும்.

கவனம்! ஆவணத்தின் தலைப்பில் நூலகத்தைச் சேர்க்க மறக்காதீர்கள்!

Google இணையதளத்தில் இருந்து நூலகத்தை இணைக்கிறது. சரி, jQuery குறியீடு தானே.

jQuery குறியீடு

$(ஆவணம்) தயார்(செயல்பாடு() (
$("a").click(function(e) (
e.preventDefault();
var ஐடி = $(இது).attr("href");
var maskHeight = $(ஆவணம்).height();
var மாஸ்க்அகலம் = $(window).width();
$("#மாஸ்க்").css(("அகலம்":மாஸ்க்அகலம்,"உயரம்":மாஸ்க் உயரம்));
$("#மாஸ்க்").fadeIn(1000);
$("#மாஸ்க்").fadeTo("மெதுவாக",0.8);
var winH = $(window).height();
var winW = $(window).width();
$(id).css("top", winH/2-$(id).height()/2);
$(id).css("இடது", winW/2-$(id).width()/2);
$(id).fadeIn(2000);
});
$(".window .close").click(function (e) (
e.preventDefault();
$("#mask, .window").hide();
});
$("#மாஸ்க்").கிளிக்(செயல்பாடு () (
$(இது).மறை();
$(".window").hide();
});
});