Әр түрлі мақсаттағы қалқымалы терезелердің веб-құрылыста көптеген қолданыстары бар. Олардың көмегімен әртүрлі мәзір түрлерін жасауға, жарнамалық мәтіндер мен графикаларды орналастыруға, күрделі формаларды толтыру кезінде кеңестер беруге болады, сонымен қатар формаларды бетте орын алмайтын терезелерге орналастыру ыңғайлы. Біздің мақалада сіз осындай терезені қалай жасауға болатындығы туралы сипаттама таба аласыз.
Бұл қажетті
HTML туралы қарапайым білім
Нұсқаулық
1-қадам
қалқымалы терезе, HTML, жасырын қабат
2-қадам
Интернеттегі көптеген беттерде әртүрлі JavaScript фреймерлерінің (jQuery, MooTools, Prototype және т.б.) сәнді кітапханалары беттерде қалқымалы терезелер жасау үшін қолданылатынын көруге болады. Алайда, шын мәнінде, олар бұл нақты мәселені шешу кезінде қажет емес. Қалқымалы терезелерді құру үшін гипермәтіндік белгілеу тілі (HTML) және каскадтық стильдер кестесі (CSS) құралдары жеткілікті. Осылайша жасалған терезелер келушінің шолғышында JavaScript қосылып тұрғанына қарамастан жұмыс істейді.
Қалқымалы терезені жасайтын барлық кодты екі жолға орналастыруға болады. Бірінші жол сілтеме жасайды, оны қалқымалы терезені көрсету үшін басу керек:
Мында басыңыз!
Мұнда сілтеме тегінің onmouseover атрибуты сілтемелер үшін әдепкі тышқан жүгіргі түрін орнатады. Onclick атрибуты сілтемені басқан кезде жасырын PopUp блогы көрінуі керек екенін көрсетеді.
Екінші жол, шын мәнінде, қалқымалы терезе. PopUp идентификаторы бар қабат және терезе өлшемі, мәтіннің түсі мен өлшемі, стиль атрибутында көрсетілген фон және жиек:
Бұл қалқымалы терезеде
Ол әдепкі бойынша көрінбейді - бұл дисплей селекторы деңгей мәнінің сипаттамасында жоқ мәнімен көрсетіледі.
Шын мәнінде, қалқымалы терезе жасау үшін сізге қажет нәрсе - осы екі жолды тегтер мен парағыңыздың арасына қойыңыз және ол дайын.
3-қадам
Қалқымалы терезені тегтің алдында жабу үшін сізге қарама-қарсы әрекетті орындайтын сілтемені қосу керек - көрінетін қабатты PopUp идентификаторымен жасыру:
жабық
4-қадам
Егер сіз терезені басу арқылы емес, тінтуірдің курсорын апару арқылы шыққыңыз келсе, сілтеме бар бірінші жолды осылай өзгерту керек:
тінтуірді осында жылжытыңыз!
5-қадам
Сіз енді терезе кодының принципі мен құрылымымен таныссыз, оның сыртқы түрі мен мазмұнын жобалау сіздің мақсатыңыз бен қиялыңызға байланысты.
