மாதிரிகள், மேலடுக்குகள், உரையாடல்கள் என நீங்கள் எதை அழைத்தாலும், இந்த UI வடிவத்தை மறுபரிசீலனை செய்ய வேண்டிய நேரம் இது. அவர்கள் முதலில் காட்சிக்கு வந்தபோது, மோடல்கள் ஒரு பயனர் இடைமுக சிக்கலுக்கு ஒரு நேர்த்தியான தீர்வாக இருந்தன. முதலில், அவை பயனர் இடைமுகத்தை எளிதாக்குகின்றன. இரண்டாவதாக, திரை இடத்தை சேமிக்கிறது. அப்போதிருந்து, வடிவமைப்பாளர்கள் மாடல்களை உடனடியாக ஏற்றுக்கொண்டனர், மேலும் சிலர் அவற்றை தீவிர நிலைக்கு கொண்டு சென்றுள்ளனர். பயங்கரமான பாப்-அப் சாளரத்தின் இன்றைய பதிப்பாக மாடல்கள் மாறிவிட்டன. பயனர்கள் மாதிரி சாளரங்களை எரிச்சலூட்டுவதாகக் கண்டறிந்து, உள்ளுணர்வாகவும் தானாகவே அவற்றை மூடவும் கற்றுக்கொண்டனர்.
வரையறை:மாதிரி சாளரம் என்பது முக்கிய பயன்பாட்டு சாளரத்தின் மேல் இருக்கும் ஒரு உறுப்பு ஆகும். இது பிரதான சாளரத்தைத் தடுக்கிறது, ஆனால் குழந்தை மாதிரி சாளரத்தின் பின்னால் தெரியும். பெற்றோர் பயன்பாட்டிற்குத் திரும்புவதற்கு முன், பயனர்கள் மாதிரி சாளரத்துடன் தொடர்பு கொள்ள வேண்டும். — விக்கிபீடியா
பயன்பாடுஉங்களுக்குத் தேவைப்படும்போது மாதிரி சாளரத்தைப் பயன்படுத்தலாம்:
பயனரின் கவனத்தை ஈர்க்கவும்பயனரின் தற்போதைய பணியை நீங்கள் குறுக்கிட விரும்பும் போது, அவர்களின் கவனத்தை மிக முக்கியமான ஒன்றின் மீது ஈர்க்க பயன்படுத்தவும்.
பயனர் உள்ளீடு தேவைபயனரிடமிருந்து தகவல்களைப் பெற விரும்பும் போது பயன்படுத்தவும். உதாரணமாக, ஒரு பதிவு மற்றும் அங்கீகார படிவம்.
சூழலில் கூடுதல் தகவலைக் காட்டுபெற்றோர் பக்கத்தின் சூழலை இழக்காமல் கூடுதல் தகவலைக் காட்ட விரும்பினால் பயன்படுத்தவும். எடுத்துக்காட்டாக, பெரிய படங்கள் அல்லது வீடியோக்களைக் காட்டுகிறது.
கூடுதல் தகவலைக் காட்டு (சூழலுக்கு வெளியே)பெற்றோர் பக்கம் அல்லது பிற பக்கங்களின் "சுயாதீனமான" பிற அளவுருக்களுடன் நேரடியாக தொடர்பில்லாத தகவலை நீங்கள் காட்ட விரும்பினால் பயன்படுத்தவும். உதாரணமாக, அறிவிப்புகள்.
குறிப்பு: பிழைச் செய்திகள், பணி வெற்றிச் செய்திகள் அல்லது எச்சரிக்கை செய்திகளைக் காட்ட மாதிரிகளைப் பயன்படுத்த வேண்டாம். அவற்றை பக்கத்தில் விடுங்கள்.
மாதிரி சாளரத்தின் உடற்கூறியல்மோசமாக செயல்படுத்தப்பட்ட மேலடுக்குகள் பணியை முடிப்பதில் தலையிடலாம். உங்கள் மாதிரி சாளரம் பயனர்களுக்கு இடையூறு செய்யவில்லை என்பதை உறுதிப்படுத்த, பின்வருவனவற்றைக் கவனியுங்கள்:
1.எஸ்கேப் ஹட்ச்மாதிரி சாளரத்தை மூடுவதற்கு பயனர்களுக்கு ஒரு வழியைக் கொடுப்பதன் மூலம் தப்பிப்பதற்கான வழியைக் கொடுங்கள். இதை பின்வரும் வழிகளில் அடையலாம்:
- ரத்துசெய் பொத்தான்
- மூடு பொத்தான்
- எஸ்கேப் கீ
- சாளரத்திற்கு வெளியே கிளிக் செய்யவும்
அணுகல் உதவிக்குறிப்பு: சாளரத்தை மூடுவதற்கு ஒவ்வொரு மாதிரி சாளரமும் அணுகக்கூடிய விசைப்பலகை கட்டுப்பாட்டைக் கொண்டிருக்க வேண்டும். எடுத்துக்காட்டாக, தப்பிக்கும் விசை சாளரத்தை மூட வேண்டும்.
2. தலைப்புமாதிரி தலைப்புடன் பயனர் சூழலைக் கொடுங்கள். பயனர்கள் அசல் பக்கத்தை விட்டு வெளியேறாததால் அவர்/அவள் எங்கிருக்கிறார் என்பதை அறிய இது அனுமதிக்கிறது.
ட்வீட் பட்டனை கிளிக் செய்த பிறகு — மாதிரி தலைப்பு: புதிய ட்வீட்டை உருவாக்கவும். சூழலைக் கொடுக்கிறது. உதவிக்குறிப்பு: பொத்தான் லேபிளும் (மாடல் சாளரத்தைத் தொடங்கும்) மற்றும் மாதிரி தலைப்பும் பொருந்த வேண்டும்
3. பொத்தான்பட்டன் லேபிள்களில் தெளிவான பெயர்கள் இருக்க வேண்டும். இது எந்த பொத்தானுக்கும் பொருந்தும். மாதிரி சாளரங்களுக்கு, 'மூடு' பொத்தான் 'மூடு' பொத்தான் ஐகானாக அல்லது 'x' ஆகக் குறிப்பிடப்பட வேண்டும்.
Invision தெளிவான பொத்தான் ஐகான்களைக் கொண்டுள்ளது குறிப்பு: பொத்தான் ஐகானை குழப்பமடையச் செய்ய வேண்டாம். பயனர் ஒரு செயலை ரத்து செய்ய முயற்சித்தால், மாதிரி சாளரம் மற்றொரு ரத்து பொத்தானைக் கொண்டு பாப் அப் செய்தால், குழப்பம் ஏற்படும். "நான் ரத்துசெய்தலை ரத்துசெய்கிறேனா? அல்லது நான் அதை தொடரலாமா?
4. அளவு மற்றும் இடம் தீர்மானித்தல்மாதிரி சாளரம் மிகப் பெரியதாகவோ அல்லது மிகச் சிறியதாகவோ இருக்கக்கூடாது, அது சரியான அளவில் இருக்க வேண்டும். சூழலைப் பாதுகாப்பதே குறிக்கோள், எனவே மாதிரி சாளரம் முழுத் திரையையும் எடுத்துக் கொள்ளக்கூடாது. உள்ளடக்கமானது மாதிரி சாளரத்துடன் பொருந்த வேண்டும். ஸ்க்ரோல்பார் தேவைப்பட்டால், நீங்கள் ஒரு புதிய பக்கத்தை உருவாக்கலாம்.
- இருப்பிடம் திரையின் மேற்பகுதியில் உள்ளது, ஏனெனில் மொபைல் பார்வையில் மாதிரி சாளரத்தை கீழே வைத்தால் தொலைந்து போகலாம்.
- அளவு — மாடல் சாளரத் திரையில் 50%க்கு மேல் பயன்படுத்த வேண்டாம்.
நீங்கள் ஒரு மாதிரி சாளரத்தைத் திறக்கும்போது, லைட்பாக்ஸ் விளைவைப் பயன்படுத்தவும் (பின்னணியை இருட்டாக்கு). இது மாதிரி சாளரத்திற்கு கவனத்தை ஈர்க்கிறது மற்றும் பயனர் பெற்றோர் பக்கத்துடன் தொடர்பு கொள்ள முடியாது என்பதைக் குறிக்கிறது.
அணுகல் உதவிக்குறிப்பு: மாதிரி சாளரத்தில் விசைப்பலகை ஃபோகஸை அமைக்கவும்.
6. பயனர் ஒரு மாதிரி சாளரத்தை தொடங்குகிறார்பாப்-அப் மாதிரி சாளரம் மூலம் பயனர்களை ஆச்சரியப்படுத்த வேண்டாம். ஒரு பொத்தானைக் கிளிக் செய்வது, இணைப்பைப் பின்தொடர்வது அல்லது விருப்பத்தைத் தேர்ந்தெடுப்பது போன்ற ஒரு பயனர் செயலை மாதிரி சாளரத்தைத் தூண்டலாம். தாங்களாகவே திறக்கும் மாதிரி சாளரங்கள் பயனரை ஆச்சரியப்படுத்தலாம் மற்றும் அவற்றை விரைவாக மூடலாம்.
உள்நுழைவு பொத்தானை அழுத்துவதால் ஏற்படும் மாதிரி சாளரம் மொபைல் சாதனங்களில் மாதிரி சாளரங்கள் மாதிரிகள் மற்றும் மொபைல் சாதனங்கள் பொதுவாக ஒன்றாக வேலை செய்யாது. மாதிரிகள் மிகப் பெரியதாக இருப்பதால், அதிக திரை ரியல் எஸ்டேட்டை எடுத்துக்கொள்வதால் அல்லது மிகச் சிறியதாக இருப்பதால் உள்ளடக்கத்தைப் பார்ப்பது கடினம். சாதன விசைப்பலகை மற்றும் உள்ளமை ஸ்க்ரோல்பார்கள் போன்ற கூறுகளைச் சேர்க்கவும். பயனர்கள் தங்கள் விரல்களை நகர்த்தவும், பெரிதாக்கவும் மட்டுமே முடியும், மாதிரி சாளர புலத்தைப் பிடிக்க முயற்சி செய்கிறார்கள். மாதிரி சாளரங்களுக்கு சிறந்த மாற்றுகள் உள்ளன, எனவே அவை மொபைல் சாதனங்களில் பயன்படுத்தப்படக்கூடாது.
நன்கு தயாரிக்கப்பட்ட மாதிரி சாளரம் - பேஸ்புக் அணுகல் 
மாதிரி சாளரங்களை உருவாக்கும்போது, அணுகக்கூடிய விசைப்பலகை கட்டுப்பாடுகளைச் சேர்க்க மறக்காதீர்கள். பின்வருவனவற்றைக் கவனியுங்கள்:
மாதிரி சாளரத்தைத் திறப்பது, உரையாடல் பெட்டியை அழைக்கும் உறுப்பு விசைப்பலகையில் இருந்து அணுகக்கூடியதாக இருக்க வேண்டும்.
ஒரு உரையாடல் சாளரத்திற்கு ஃபோகஸை நகர்த்துதல் — மாதிரி சாளரம் திறந்திருக்கும் போது, விசைப்பலகை கவனம் தொடக்கத்திற்கு நகர்த்தப்பட வேண்டும்.
விசைப்பலகை ஃபோகஸைக் கட்டுப்படுத்துதல் — ஒரு உரையாடல் பெட்டிக்கு கவனம் நகர்த்தப்படும் போது, உரையாடல் பெட்டி மூடப்படும் வரை அதற்குள் "பூட்டி" இருக்க வேண்டும்.
ஒரு உரையாடலை மூடுதல் — ஒவ்வொரு மாதிரி சாளரமும் அந்தச் சாளரத்தை மூடுவதற்கு அணுகக்கூடிய விசைப்பலகை கட்டுப்பாட்டைக் கொண்டிருக்க வேண்டும்.
ஏரியாஅணுகக்கூடிய பணக்கார இணையப் பயன்பாடுகள் (ARIA) தரநிலையானது இணைய உள்ளடக்கம் மற்றும் இணையப் பயன்பாடுகளின் அணுகலை மேம்படுத்துவதற்கான வழிகளை வரையறுக்கிறது.
அணுகக்கூடிய மாதிரி சாளரத்தை உருவாக்கும் போது பின்வரும் ARIA குறிச்சொற்கள் பயனுள்ளதாக இருக்கும்: பங்கு = "உரையாடல்", ஏரியா - மறைக்கப்பட்ட, ஏரியா - லேபிள்
மேலும், குறைந்த பார்வை கொண்ட பயனர்கள் குறித்து எச்சரிக்கையாக இருங்கள். திரையின் உள்ளடக்கங்களை பெரிதாக்க அவர்கள் திரையில் உருப்பெருக்கிகளைப் பயன்படுத்தலாம். பெரிதாக்கியவுடன், பயனர் திரையின் ஒரு பகுதியை மட்டுமே பார்க்க முடியும். இந்த வழக்கில், மாதிரி சாளரங்கள் மொபைல் சாதனங்களில் அதே வழியில் காட்டப்படும்.
முடிவுரைமாதிரி சாளரங்களை தானாக மூடுவதற்கு மக்கள் கற்றுக்கொண்டால், நீங்கள் ஏன் அவற்றைப் பயன்படுத்த விரும்புகிறீர்கள்?
பயனரின் கவனத்தை ஈர்ப்பது, சூழலைப் பராமரித்தல் மற்றும் பயனர் இடைமுகத்தை எளிமையாக்குவது ஆகியவை மாதிரி சாளரங்களின் பெரிய நன்மைகள். இருப்பினும், அவை பயனர் அனுபவத்தை குறுக்கிடுவதால், ஒரு மாதிரி சாளரத்தின் பின்னால் உள்ளடக்கத்தை மறைப்பதன் மூலம் பெற்றோர் பக்கத்துடன் தொடர்புகொள்வதை சாத்தியமற்றதாக்குவதால் அவை தீமைகளையும் கொண்டுள்ளன. ஒரு மாதிரி சாளரம் எப்போதும் விடையாக இருக்காது. தேர்ந்தெடுக்கும் போது, பின்வருவனவற்றைக் கவனியுங்கள்:
சரிபார்ப்பு பட்டியல்
- மாதிரி சாளரங்களை எப்போது காட்டுவோம்?
- மாதிரி சாளரங்களை எவ்வாறு காண்பிப்பது?
- மாதிரி ஜன்னல்கள் எப்படி இருக்கும்?
- நாங்கள் என்ன தகவல்களை வழங்குகிறோம் மற்றும் சேகரிக்கிறோம்?
மாதிரி சாளரங்களுக்கான மாற்று UI கூறு உள்ளது: மாடல் அல்லாத அல்லது டோஸ்ட் என அறியப்படுகிறது (பொருள் வடிவமைப்பில் மைக்ரோசாப்ட் மற்றும் கூகிள் பயன்படுத்தும் சொல்). மேலும் அறிய எனது அடுத்த பதிவைப் படியுங்கள்.
எல்லோருக்கும் வணக்கம். மற்ற நாள் நான் வலைப்பதிவு புள்ளிவிவரங்களை கவனமாகப் பார்த்தேன், மாதிரி சாளரங்களை உருவாக்குவதற்கான எடுத்துக்காட்டுகள் எங்கள் இணைய ஊழியர்களுக்கு மிகவும் ஆர்வமாக இருப்பதைக் கண்டுபிடித்தேன். மிகவும் பிரபலமான தீர்வுகள் ஜாவாஸ்கிரிப்டைப் பயன்படுத்தாமல் பாப்-அப் சாளரங்களைச் செயல்படுத்துவதற்கான தீர்வுகளாக மாறியது.
எனது பணியின் போது, நான் பல சுவாரஸ்யமான தீர்வுகளைக் குவித்துள்ளேன், வெவ்வேறு நேரங்களில் எனது வலைப்பதிவின் பக்கங்களில் விரிவான கட்டுரைகளில் விரிவாக விவரித்தேன், ஆனால் இந்த பாடங்களில் பல காலப்போக்கில் பின்னணியில் மறைந்துவிட்டன. வலைப்பதிவு வாசகர்கள் சில நேரங்களில் வழிசெலுத்துவது கடினம், மேலும் பயனுள்ள மாதிரி சாளரங்கள் மற்றும் பாப்-அப் படிவங்களை உருவாக்குவதற்கான பல பயனுள்ள முறைகள் கவனிக்கப்படாமல் போகும்.
எனவே, இந்த சிக்கலில் பயனர்களின் ஆர்வத்தை கணக்கில் எடுத்துக்கொண்டு, இந்த தலைப்பில் அனைத்து பாடங்களையும் எடுத்துக்காட்டுகளையும் இணைத்து, மாதிரி சாளரங்கள் மற்றும் படிவங்களின் தொகுப்பை ஒரு தனி கட்டுரையில் காண்பிக்க முடிவு செய்தேன். இதன் விளைவாக சுருக்கமான விளக்கம், எடுத்துக்காட்டுகளுக்கான இணைப்புகள் மற்றும் கட்டுரைகளுடன் ஒரு குறுகிய கண்ணோட்டம் உள்ளது. எனவே பாருங்கள், படிக்கவும், யாராவது தீர்வுகளை விரும்பினால், மூலக் குறியீட்டை எடுத்து உருவாக்கவும், உருவாக்கவும், உருவாக்கவும்...
எனது வலைப்பதிவின் வாசகர்களிடையே மாதிரி சாளரங்களை உருவாக்கும் மிகவும் பிரபலமான முறை. செயல்படுத்த மிகவும் எளிதானது. பாப்-அப் பிளாக்குகளின் தோற்றம் மற்றும் அனைத்து செயல்பாடுகளும் ஜாவாஸ்கிரிப்ட் மற்றும் கூடுதல் கிராஃபிக் கூறுகளை உள்ளடக்காமல், CSS3 ஐ மட்டுமே அடிப்படையாகக் கொண்டது.
எந்தவொரு வலைத்தளத்திலும் மாதிரி சாளரங்களை இணைக்க மற்றும் காண்பிக்கும் திறன். html சட்டகத்தை சரியான இடத்தில் வைத்து, உங்களுக்குத் தேவையான உள்ளடக்கத்தைச் சேர்த்து, ஸ்டைல்களை இணைத்து, முழு விஷயத்தையும் ஒரு ஆக்டிவேட்டிங் பட்டன் அல்லது தளத்தின் வேறு ஏதேனும் உறுப்புடன் (படங்கள், மெனு உருப்படிகள், இணைப்புகள், ஒரு வார்த்தையில்) இணைத்தால் போதும். உரை, முதலியன) அவ்வளவுதான் , செல்ல தயாராக உள்ளது.
எளிய உரை, படங்கள், பல்வேறு வடிவங்கள் அல்லது உட்பொதிக்கப்பட்ட வீடியோ என எந்தத் தகவலுடனும் மாதிரி சாளரங்களின் காட்சியை உங்கள் இணையதளத்தில் விரைவாகவும் எளிதாகவும் செயல்படுத்தக்கூடிய மிக எளிமையான, இலகுரக jQuery செருகுநிரல்.
தோற்றமானது CSS ஐப் பயன்படுத்தி உருவாக்கப்படுகிறது, சாளரத்தின் அளவு நேரடியாக இணைப்பில் அமைக்கப்பட்டுள்ளது, href="#?w=500" பண்புக்கூறில், #?w=500 தேவையான சாளர அகலத்தைக் குறிக்கிறது. இருப்பினும், பாடத்தின் விவரங்களைப் படித்த பிறகு, எல்லாம் மிகவும் தெளிவாகிவிடும். இந்த தீர்வு வேலை செய்ய, தளத்துடன் இணைக்கப்பட்ட jQuery நூலகம் தேவை.
ஆரம்பத்தில், பாடம் உள்ளடக்கத்துடன் தொகுதி கூறுகளின் முழுமையான மையப்படுத்தலைப் பற்றி சிந்திக்கப்பட்டது, ஆனால் இதைப் பற்றி அதிகம் எழுதப்பட்டுள்ளது, தலைப்பை தகவமைப்புடன் நீர்த்துப்போகச் செய்து, பிரத்தியேகமாக CSS கருவிகளைப் பயன்படுத்தி எல்லாவற்றையும் ஒரு மாதிரி சாளரத்தில் மேலெழுத முடிவு செய்தேன். இதில் என்ன வந்தது என்பதை பாடத்தை படித்தாலே தெரிந்து கொள்ளலாம்.
பாப்-அப் (மாடல்) விண்டோக்களை செயல்படுத்துவதற்கான புதிய முறை. கீழ்தோன்றும் தகவல் தொகுதிகள் அல்லது "" உருவாக்க மறைக்கப்பட்ட தேர்வுப்பெட்டிகளைப் பயன்படுத்தினேன். இதன் விளைவாக, எல்லாம் மிகவும் எளிமையானதாக மாறியது; CSS3 மற்றும் HTML5 இன் தொடரியல் அம்சங்களைப் பயன்படுத்தி, நீங்கள் மாதிரி சாளரங்களின் வேலையை எளிதாக ஒழுங்கமைக்கலாம். நான் வடிவமைப்பில் அதிக கவனம் செலுத்தவில்லை (அது முழு புள்ளி அல்ல); துவக்க புள்ளியாக பூட்ஸ்டார்ப் தகவல் தொகுதிகளின் உதாரணத்தை எடுத்துக் கொண்டேன். இந்த முறை அனைத்து நவீன உலாவிகளிலும் சரியாக வேலை செய்கிறது; IE இன் பாசி பதிப்புகளில் சிக்கிய பயனர்கள் துரதிர்ஷ்டவசமாக பறக்கிறார்கள்.
ஜாவாஸ்கிரிப் இல்லாமல், பிரத்தியேகமாக CSS3 ஐப் பயன்படுத்தி, ஒரு மாதிரித் தொகுதியில் வீடியோ பார்ப்பதை ஒழுங்கமைக்கும் தலைப்பு என்னைத் தொந்தரவு செய்கிறது. இல்லை, மாதிரி சாளரத்தில் வீடியோ வெளியீட்டில் எல்லாம் நன்றாக இருக்கிறது, சாளரம் மூடப்படும்போது வீடியோவை நிறுத்துவதற்கு போதுமான மற்றும் திருப்திகரமான தீர்வை என்னால் கண்டுபிடிக்க முடியவில்லை. நான் முட்டாள்தனமாக ஒரு வெற்று href="" பண்புக்கூறுடன் இணைப்பைப் பயன்படுத்தினேன்; இந்த கோஷர் முறையானது பல திறமையான கைவினைஞர்களை தூக்கத்தில் திருப்புகிறது, ஆனால் இந்த நேரத்தில் நான் இன்னும் பயனுள்ள மற்றும் சரியான தீர்வைக் கண்டுபிடிக்கவில்லை.
படங்களுக்கு மட்டுமல்ல, உரைக்கும் ஒரு மாதிரி சாளரத்தில் ஒருவித ஸ்லைடரை உட்பொதிக்க முடியுமா என்று என்னிடம் அடிக்கடி கேட்கப்பட்டது. ஏன் கூடாது. அனைத்து அளவுருக்களுக்கும் பொருந்தக்கூடிய ஒரு எளிய உள்ளடக்க சுழலியை முதலாளித்துவம் கண்டறிந்தது; அதை ஒரு ஆயத்த மாதிரி சாளரத்துடன் இணைப்பதே எஞ்சியிருந்தது. இறுதியில் என்ன நடந்தது என்பதுதான் :)). பாருங்கள், எல்லாம் செயல்படுத்த மிகவும் எளிது.
பல தளங்கள் பாப்-அப் கருத்து படிவங்கள், பதிவு மற்றும் உள்நுழைவு படிவங்களைப் பயன்படுத்துகின்றன. ஆயத்த மாதிரி சாளரத்தில் வேலை செய்யும் படிவத்தை உட்பொதிப்பதே எளிதான வழி. CSS3 இல் அமைக்கப்பட்ட ஒரு அழகான கண்ணியமான வடிவத்தை எடுத்துக் கொள்ளுங்கள், மேலே வழங்கப்பட்ட மாதிரி சாளரத்தின் எந்தப் பதிப்பும், இந்த இரண்டு கூறுகளையும் ஒரே பொறிமுறையில் இணைப்பதே எஞ்சியிருக்கும். அதை எப்படி செய்வது? வழங்கப்பட்ட பாடத்தில் இதுவே விரிவாக விவரிக்கப்பட்டுள்ளது.
எந்தவொரு பக்கம் அல்லது தனிப்பட்ட தளம் (வலைப்பதிவு) இடுகையிலிருந்தும் உங்கள் பயனர்களுக்கு செய்திகளை அனுப்ப ஒரு சிறந்த வாய்ப்பு ஒரு தனி, மாதிரியான தொடர்பு படிவமாகும். படிவத்தில் PHP ஹேண்ட்லரை சரியாக இணைக்கவும், உங்களுக்குத் தேவையான பக்கத்தின் உடலில் வைக்கவும், அவ்வளவுதான், நீங்கள் செய்ய வேண்டியது உங்கள் அஞ்சல் பெட்டியை அவ்வப்போது சரிபார்க்கவும். இந்த முறை அனைத்து நவீன உலாவிகளிலும் சரியாக வேலை செய்கிறது: குரோம், பயர்பாக்ஸ், ஓபரா, சஃபாரி, இன்டர்நெட் எக்ஸ்ப்ளோரரில், பதிப்பு 9 இலிருந்து தொடங்குகிறது. படிவமே CSS3 மேஜிக்கைப் பயன்படுத்தி மாதிரி சாளர செயல்பாடுகளுடன் பொருத்தப்பட்டுள்ளது.
லைட்பாக்ஸ் என்பது ஒரு வகையான மாதிரி சாளரம், அல்லது செயல்பாட்டின் கொள்கை கிட்டத்தட்ட ஒரே மாதிரியாக இருக்கும், இருப்பினும் இது பெரிதாக்கப்பட்ட அல்லது முழு அளவிலான படங்களைப் பார்ப்பதற்குப் பயன்படுத்தப்படுகிறது. ஒரு காலத்தில் CSS3ஐப் பயன்படுத்தி, லைட்பாக்ஸின் அதிகமாகவோ அல்லது குறைவாகவோ தகவமைப்புப் பதிப்பை உருவாக்க முடிவு செய்தேன். இதில் என்ன வந்தது என்பதை உதாரணத்தைப் பார்த்து தெரிந்து கொள்ளலாம், தலைப்பு பொருத்தமானதாக இருந்தால், பாடத்தைப் படிக்கவும். துரதிர்ஷ்டவசமாக, IE 8 மற்றும் அதற்குக் கீழே உள்ள பயனர்கள் எதையும் பார்க்க மாட்டார்கள்; இந்த முறை போலி-வகுப்பு: இலக்கு .
தளத்திற்கான தனியான, முதலில் வடிவமைக்கப்பட்ட, பாப்-அப் தொடர்பு படிவத்தை உருவாக்குவதற்கான ஒரு சுவாரஸ்யமான (என் கருத்துப்படி) தீர்வு. ஆன்க்ளிக் நிகழ்வை செயலாக்குவதன் அடிப்படையில் படிவம் செயல்படுகிறது. அஞ்சல் உறை வடிவில் அசல் படத்தைப் பயன்படுத்தி வடிவமைக்கவும். அனைத்து உலாவிகளிலும் படிவம் விரைவாகவும் சரியாகவும் வேலை செய்கிறது, எனவே இது பயனர்களுடன் தொடர்புகொள்வதற்கான ஒரு சிறந்த எடுத்துக்காட்டு.
தளம் ஆரம்பத்தில் ஏற்றப்படும் போது, பலரைப் போலவே நானும் பல்வேறு பாப்-அப் விண்டோக்களால் உறைந்திருக்கிறேன். இந்த முறை மிகவும் ஊடுருவக்கூடியது என்று நான் நினைக்கிறேன். ஆனால் இந்த அம்சம் தேவை மற்றும் பரவலாகப் பயன்படுத்தப்படுகிறது, அதாவது முழு விஷயமும் எவ்வாறு செயல்படுகிறது என்பதைப் பார்ப்பது இன்னும் மதிப்புக்குரியது. அனைத்து நவீன உலாவிகளும் ஒரு தளத்தை ஏற்றும் ஆரம்ப கட்டத்தில் பல்வேறு வகையான பாப்-அப் சாளரங்களை சந்தேகிக்கின்றன; அவை அவற்றைத் தடுக்கின்றன. வழங்கப்பட்ட பாடத்தில், இந்த தடுப்பை எவ்வாறு புறக்கணிப்பது என்பதை நான் விரிவாக விவரிக்கிறேன், குக்கீகளை எவ்வாறு சரியாகப் பயன்படுத்துவது என்பதையும் நீங்கள் கற்றுக் கொள்வீர்கள், இதனால் பயனர் முதலில் தளத்தைப் பார்வையிடும்போது அல்லது ஒரு குறிப்பிட்ட இடைவெளியில் சாளரம் தோன்றும்.
அனேகமாக அவ்வளவுதான். நிச்சயமாக, ஸ்டாஷில் மாதிரி சாளரங்களை உருவாக்க வேறு இரண்டு வேலை விருப்பங்கள் உள்ளன, ஆனால் அவற்றில் பல இணையத்தில் உள்ளன, முக்கிய விஷயம் உங்களுக்குத் தேவையானதைக் கண்டுபிடிப்பதாகும். எனது வலைப்பதிவில் உள்ள கட்டுரைகளின் குவியலில் உள்ள தலைப்பைச் செல்ல இந்தத் தேர்வு உங்களுக்கு உதவும் என்று நம்புகிறேன். அகழ்வாராய்ச்சி வெற்றியடைந்து, இழந்த பொருள் கண்டுபிடிக்கப்பட்டால், மதிப்பாய்வு புதுப்பிக்கப்படும்.
அனைத்து மரியாதையுடன், ஆண்ட்ரூ
3. ஒரு இணைப்பிலிருந்து அழைக்கப்படும் jQuery மாதிரி சாளரத்தின் எடுத்துக்காட்டு (டெமோவிலிருந்து)
பெரும்பாலும், நீங்கள் ஏற்கனவே இணையத்தில் ஒரு பாப்-அப் மாதிரி சாளரத்தை ஒன்றுக்கு மேற்பட்ட முறை பார்த்திருக்கிறீர்கள் - பதிவு உறுதிப்படுத்தல், எச்சரிக்கை, குறிப்பு தகவல், கோப்பு பதிவிறக்கம் மற்றும் பல. இந்த டுடோரியலில் எளிமையான மாதிரி சாளரங்களை எவ்வாறு உருவாக்குவது என்பதற்கான பல எடுத்துக்காட்டுகளை வழங்குகிறேன்.
ஒரு எளிய பாப்-அப் மாதிரி சாளரத்தை உருவாக்குதல் உடனடியாக தோன்றும் ஒரு எளிய மாதிரி சாளரத்திற்கான குறியீட்டைப் பார்க்க ஆரம்பிக்கலாம்jQuery குறியீடு
$(ஆவணம்) தயார்(செயல்பாடு()
{
எச்சரிக்கை ("பாப்-அப் சாளரத்தில் உரை");
});
குறியீட்டை உங்கள் பக்கத்தின் உடலில் எங்கும் ஒட்டவும். பக்கம் ஏற்றப்பட்டவுடன், எந்த கட்டளையும் இல்லாமல், இது போன்ற ஒரு சாளரத்தைக் காண்பீர்கள்:
ஆனால் முழுப் பக்கமும் உலாவியில் ஏற்றப்பட்ட பிறகு பின்வரும் குறியீடு செயல்படுத்தப்படும். எங்கள் எடுத்துக்காட்டில், படங்களுடன் பக்கத்தை ஏற்றிய பிறகு, ஒரு எளிய பாப்-அப் சாளரம் பாப் அப் செய்யும்:
$(window).load(செயல்பாடு()
{
எச்சரிக்கை("பக்கம் ஏற்றப்பட்டது!)");
});
அத்தகைய சாளரங்களில் உள்நுழைவு மற்றும் பதிவு படிவங்கள் அமைந்துள்ளதை நீங்கள் அடிக்கடி காணலாம். வாருங்கள் நம் வேலையை தொடங்குவோம்
முதலில், 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();
});
});
மாதிரி விண்டோ என்பது ஒரு கன்டெய்னர் ஆகும், அது ஒரு இணைப்பைக் கிளிக் செய்யும் போது, மேல்தோன்றும் மற்றும் சில தகவல்களை வழங்குகிறது. பலர் ஏற்கனவே இதைப் பற்றி அறிந்திருக்கிறார்கள் என்று நினைக்கிறேன், ஆனால் இல்லையென்றால், அது என்ன என்பதைப் புரிந்துகொள்ள டெமோ பதிப்பைப் பாருங்கள். இப்போது அவற்றில் ஏராளமானவை உள்ளன, ஒவ்வொன்றும் அதன் சொந்த வழியில் செயல்படுகின்றன. எடுத்துக்காட்டாக, இந்த எடுத்துக்காட்டு உறுதிப்படுத்தலில் சில செயல்களைச் செய்யும்படி கேட்கும் முற்றிலும் நிலையானவை உள்ளன. அல்லது, எடுத்துக்காட்டாக, மற்றொரு விருப்பம், நீங்கள் முதலில் தளத்தைப் பார்வையிடும்போது, சமூக வலைப்பின்னல்களில் உள்ள குழுக்களுக்கான பல்வேறு சந்தாக்களுக்கு இது பொருத்தமானதாக இருக்கும். வலையில் மாதிரி ஜன்னல்கள் உள்ளன CSS, சரி, நான் இந்த பங்கை எடுக்க விரும்புகிறேன் ஜாவாஸ்கிரிப்ட், இது மிகவும் சுவாரஸ்யமாக இருப்பதால் எல்லா உலாவிகளிலும் நன்றாக வேலை செய்கிறது.
முதல் படி. ஜாவாஸ்கிரிப்ட் குறியீடு.
மாதிரி சாளரத்தைத் தொடங்க, நீங்கள் செயல்பாட்டிற்கு மதிப்பை அனுப்ப வேண்டும் window.onload. இதில் நாம் இரண்டு அடையாளங்காட்டி கூறுகளை அனுப்புவோம் " அ"மற்றும்" பி".
//ஐடி "a" மற்றும் "b" விண்டோவின் மூலம் கூறுகளை அனுப்புதல்.onload = செயல்பாடு() ( a = document.getElementById("a"); b = document.getElementById("b"); )
பின்னர் நாங்கள் செயல்பாட்டை எழுதுகிறோம் " ஷோஏ", இது மாதிரி சாளரத்தைக் காண்பிக்கும் மற்றும் உறுப்புகளுக்கு அனுப்பும்" அ"மற்றும்" பி"பாணிகள், அதாவது, இணைப்பைக் கிளிக் செய்யவில்லை என்றால், சாளரத்தின் வெளிப்படைத்தன்மை, அகலம் மற்றும் தடுப்பை அமைக்கிறோம்" திறந்த".
//"showA" செயல்பாட்டின் சாளரத்தைக் காட்டு showA() ( //வெளிப்படைத்தன்மையை அமைத்து காட்சியைத் தடுக்கவும் //உறுப்பு "b" b.style.filter = "alpha(opacity=80)"; b.style. ஒளிபுகாநிலை = 0.8; b .style.display = "block"; // "a" உறுப்பின் a.style.display = "block"; a.style.top = "200px ";)
மாதிரி சாளரத்தைத் திறந்த பிறகு, அதை எப்படியாவது மூட வேண்டும் அல்லது பின்னர் மறைக்க வேண்டும், இதற்காக நாங்கள் செயல்பாட்டை எழுதுகிறோம் " hideA"இது மாதிரி சாளரத்தை மறைத்து உறுப்புகளுக்கு பாணிகளை ஒதுக்கும்" அ"மற்றும்" பி".
//"hideA" செயல்பாட்டை அழைக்கவும், இது "a" மற்றும் "b" உறுப்புகளுக்கான சாளரத்தை மறைக்கும் hideA() ( b.style.display = "none"; a.style.display = "none"; )
முழு குறியீடு.
//ஐடி "a" மற்றும் "b" window.onload = function() ( a = document.getElementById("a"); b = document.getElementById("b"); ) //செயல்பாடு சாளரத்தைக் காட்டுகிறது " showA" செயல்பாடு showA() ( //வெளிப்படைத்தன்மையை அமைத்து காட்சியைத் தடுக்கவும் //உறுப்பு "b" b.style.filter = "alpha(opacity=80)"; b.style.opacity = 0.8; b.style. காட்சி = "தடுப்பு"; // "a" உறுப்பின் a.style.display = "block"; a.style.top = "200px"; ) //தடுத்தல் மற்றும் மேல் விளிம்பை 200px ஆக அமைக்கவும் hideA" செயல்பாடு, இது "a" மற்றும் "b" செயல்பாடு hideA() உறுப்புகளுக்கான //window ஐ மறைக்கும் ( b.style.display = "none"; a.style.display = "none"; )
படி இரண்டு. HTML குறியீடு.
திற
குறிச்சொல்லில் "டிவி"அடையாளங்காட்டியைக் குறிக்கவும்" அ", இது பாணிகளுடன் தொடர்பு கொள்ளும் CSSமற்றும் குறியீட்டுடன் ஜாவாஸ்கிரிப்ட். அடுத்து மற்றொரு குறிச்சொல்லைச் சேர்ப்போம் " div"மற்றும் அதற்கு ஒரு அடையாளங்காட்டியைக் கொடுங்கள்" ஜன்னல்கள்", இது மாதிரி சாளர கொள்கலனுக்குள் மார்க்அப்பாக செயல்படும்.
உள்ளே ஒரு இணைப்பைக் குறிப்பிடுகிறோம், அது " நெருக்கமான"மாதிரி சாளரம், அதற்கு ஒரு பாணியையும் கொடுங்கள்" பக்கங்கள்"மற்றும் அதற்கு இயல்புநிலை பாணியைக் கொடுங்கள்" மிதவை: வலது", அதாவது, மேல் வலது மூலையில் உள்ள மாதிரி சாளரத்தை மூடுவதற்கான இணைப்பைக் காண்பிப்போம்.
நெருக்கமான
நாங்கள் அடையாளங்காட்டியை பதிவு செய்கிறோம் " பி", இது சாளரத்தை மறைக்கும்.
முழு குறியீடு.
மூடு திற
படி மூன்று. CSS குறியீடு.
தேவையான பாணிகள் CSS, இது இல்லாமல் மாதிரி சாளரம் சரியாக வேலை செய்யாது, அல்லது, அது வேலை செய்யாது அல்லது தகவலை சரியாகக் காட்டாது.
எனவே, இந்த எடுத்துக்காட்டில், நிலை குறித்து முதலில் தேவையான பாணி சரி செய்யப்பட்டது. ஒரு மாதிரி சாளரத்தை நிரப்பும் எல்லைக்கு வரம்பிடும்போது அதைக் காட்ட இது உங்களை அனுமதிக்கிறது. பயன்படுத்தி z-குறியீடுஇணைப்பைக் கிளிக் செய்த பிறகு மாதிரி சாளரம் எவ்வளவு அடையாளம் காணப்பட்டது என்பதை நாங்கள் குறிப்பிடுகிறோம்" திறந்த", மற்றும்" நெருக்கமான". மேலும் காட்சி: இல்லை, இது இணைப்பைக் கிளிக் செய்யும் வரை மாதிரி சாளரத்தை மறைக்க உங்களை அனுமதிக்கிறது.
#b (நிலை: நிலையானது; மேல்: 0; இடது: 0; வலது: 0; கீழே: 0; காட்சி: எதுவுமில்லை; பின்னணி: சாம்பல்; z-இண்டெக்ஸ்: 1; ) #a (எல்லை: 1px திட கருப்பு; நிலை: நிலையானது ; பின்புலம்: #eff7ff; z-index:3; display:none; ) #windows (பேடிங்:5px; அகலம்: 500px; உயரம்: 300px; எல்லை: 2px திட நீலம்; ) a.pages (பின்னணி: #97cdff; நிறம்: வெண்மை
உங்கள் கவனத்திற்கு அனைவருக்கும் மிக்க நன்றி!
முக்கியமான செய்திகள் அல்லது தளத்தில் செய்யப்பட்ட மாற்றங்களைக் காட்ட, நீங்கள் பாப்-அப் சாளரங்களைப் பயன்படுத்தலாம். இரண்டு வகையான பாப்-அப்கள் உள்ளன: வழக்கமான மற்றும் மாதிரி.
குறிப்பு: மாடல் சாளரங்கள் வழக்கமான சாளரங்களிலிருந்து வேறுபடுகின்றன, இதில் மாதிரி சாளரம் திறந்திருக்கும் போது, மாதிரி சாளரம் மூடப்படும் வரை பயனர் தளத்தின் பிற கூறுகளுடன் தொடர்பு கொள்ள முடியாது.
எச்சரிக்கை() முறையைப் பயன்படுத்தி ஜாவாஸ்கிரிப்டைப் பயன்படுத்தி மாதிரி சாளரத்தின் உதாரணத்தைக் காணலாம்.
பாப்-அப் சாளரம்ஒரு பாப்அப்பை உருவாக்குவதற்கான முதல் படி ஒரு உறுப்பை (அல்லது வேறு ஏதேனும் உறுப்பு) உருவாக்கி அதை ஸ்டைல் செய்வது:
ஆவணத்தின் தலைப்பு .okno (அகலம்: 300px; உயரம்: 50px; உரை-சீரமைப்பு: மையம்; திணிப்பு: 15px; எல்லை: 3px திட #0000cc; எல்லை-ஆரம்: 10px; நிறம்: #0000cc; ) பாப்-அப் சாளரம்! முயற்சி "
இது பாப்-அப் சாளரமாகப் பயன்படுத்தப்படும். இப்போது நாம் அதை டிஸ்பிளே பிராப்பர்ட்டி மதிப்பு none ஐப் பயன்படுத்தி மறைத்து, ஒரு இணைப்பைச் சேர்ப்போம், அதைக் கிளிக் செய்யும் போது, ஒரு பாப்-அப் சாளரம் தோன்றும்:
ஆவணத் தலைப்பு #okno (அகலம்: 300px; உயரம்: 50px; உரை-சீரமைப்பு: மையம்; திணிப்பு: 15px; எல்லை: 3px திட #0000cc; எல்லை-ஆரம்: 10px; நிறம்: #0000cc; காட்சி: எதுவுமில்லை; ) #okno:இலக்கு (காட்சி: தொகுதி;) பாப்-அப் சாளரம்! அழைப்பு பாப்அப் முயற்சி »
போலி-வகுப்பு: இலக்கைப் பயன்படுத்தி, வழிசெலுத்தப்பட்ட உறுப்புக்கான பாணிகளைத் தேர்ந்தெடுத்து பயன்படுத்துகிறோம். எனவே, இணைப்பைக் கிளிக் செய்த பிறகு, உறுப்பின் காட்சிச் சொத்தின் மதிப்பு 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: இலக்கு (காட்சி: தொகுதி;) பாப்-அப் சாளரம்! பாப்அப்பை அழைக்கவும்
முழு அளவிலான மாதிரி சாளரத்தை உருவாக்குவதற்கான அடுத்த படி, எங்கள் சாளரத்தை மறைக்கும் ஒரு பொத்தானைச் சேர்ப்பதாகும். வழக்கமான இணைப்பிலிருந்து ஒரு பொத்தானை உருவாக்கி, அதை எங்களுடையதில் சேர்த்து வடிவமைப்போம்:
ஆவணத் தலைப்பு #okno (அகலம்: 300px; உயரம்: 50px; உரை-சீரமைப்பு: மையம்; திணிப்பு: 15px; எல்லை: 3px திட #0000cc; எல்லை-ஆரம்: 10px; நிறம்: #0000cc; காட்சி: எதுவுமில்லை; நிலை: முழுமையானது; மேல் : 0; வலது: 0; கீழே: 0; இடது: 0; விளிம்பு: ஆட்டோ; ) #okno: இலக்கு (காட்சி: தொகுதி;).மூடு (காட்சி: இன்லைன்-பிளாக்; பார்டர்: 1px திட #0000cc; நிறம்: #0000cc ; திணிப்பு: 0 12px; விளிம்பு: 10px; உரை-அலங்காரம்: எதுவுமில்லை; பின்னணி: #f2f2f2; எழுத்துரு அளவு: 14pt; கர்சர்: சுட்டிக்காட்டி; .close:hover (பின்னணி: #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; கர்சர்: சுட்டிக்காட்டி; ) .close:hover (பின்னணி: #e6e6ff;) பாப்-அப் சாளரம்!
சாளரத்தை மூடு பாப்-அப் சாளரத்தை அழைக்கவும் முயற்சிக்கவும் »
குறிப்பு: பக்கத்திற்குள் நுழையும் போது பயனர் உடனடியாக பாப்-அப் சாளரத்தைப் பார்க்க வேண்டும் என்றால் (அதை இணைப்பு வழியாக அழைக்க வேண்டாம்), பின்னர் பக்க முகவரியை சாளர ஐடியுடன் உள்ளிட வேண்டும் (எடுத்துக்காட்டாக, முகவரி இருக்கலாம் இது போல் இருக்கும்: site.ru/papka/documet. html#window).
