Modalne CSS: proste, szybkie i wygodne

Właściwości HTML5 /CSS3 dają programistom możliwość szybkiego tworzenia dialogów logicznych z możliwością wprowadzania niewielkich ilości informacji, potwierdzenia działania lub informowania odwiedzającego.

Funkcjonalność zapewniona przez funkcje javascript jest dostępna dla prostego kodu HTML i kilku reguł CSS. Efekt nie będzie mniej, aw niektórych przypadkach nawet większy.

Treść okna modalnego

Wyświetl informacje i potwierdź ich otrzymanie: okno pojawi się w przeglądarce, a strona oczekuje od użytkownika potwierdzenia, że ​​czyta konkretne informacje. Wyprowadź pytania i uzyskaj odpowiedź: tak lub nie. Pola wyników (formularz, zapytanie) i pobierz tekst, dane lub zestaw wartości we wszystkich polach formularza.


Warianty użycia okna modalnego mogą pochodzić z zestawu, ale w rzeczywistości jest to zwykły tag HTML. Stosowana jest właściwość pseudo-klasa: cel i wskaźnik-zdarzenia. Pierwszy określa, co zrobić po najechaniu myszą (innym wskaźnikiem). Drugi pozwala elementowi ponownie reagować na zdarzenia.

Przykład okna informacyjnego

Rysunek pokazuje łącze, które otwiera pamięć podręczna z modalnym CSS z informacjami. Dopiero gdy użytkownik kliknie na "element zamykający" okna - "X", okno zniknie i pojawi się ponownie link, aby otworzyć okno. Okno dialogowe zaczyna się od tagu "a" i kończy się znacznikiem "a". Możliwości realizacji tego pomysłu mogą wiele wymyślić.
W tym przykładzie styl opisu łącza do otwarcia okna ijego zamknięcie jest realizowane na różne sposoby. Pierwsze łącze pokazuje widoczny identyfikator div, co tworzy iluzję otwarcia okna, w którym znajduje się informacja i tylko jeden przycisk (link) do zamknięcia.


Żadne działanie na stronie nie zostanie wykonane, dopóki okno nie zostanie zamknięte. Korzystając z okna modalnego HTML /CSS, możesz zaprojektować formanty, które natychmiast pojawiają się na stronie, blokują kontrolki i pozwalają dostosować wybrane ustawienia. Po zakończeniu procesu można przywrócić logikę strony w trybie normalnym.

Dynamika okien wyskakujących

Nowoczesne funkcje HTML5 /CSS3 są obsługiwane we wszystkich przeglądarkach. Deweloper ma szeroki zakres funkcji do stosowania gradientów, przezroczystości, transformacji, przenoszenia, transformacji, rotacji i innych działań tagów.
Nic nie stoi na przeszkodzie łączeniu ze sobą różnych efektów w poszukiwaniu idealnych kształtów i oryginalnego projektu. Modalne okno na CSS to pomysł użycia wskaźników-zdarzeń i: target, ale nic nie powstrzymuje nas od używania innych reguł stylów. Jednak przy staranności zaprojektowania projektu, który może zaskoczyć każdego odwiedzającego, należy zauważyć: JavaSript to zarządzany sposób tworzenia dialogu. Tutaj możesz kontrolować wszystko. Prosty mod CSS, który wykorzystuje kombinację gradientowych znaczników, transformacji i wyglądu poprzez rotację (na przykład) jest gwarancją znacznego opóźnienia w pracy strony. Nowoczesne style są różnorodne możliwości, ale te funkcje są rygorystycznie wdrażane w algorytmach wydajności.Zasady hipertekstu i CSS. Tutaj możesz zarządzać tylko dzięki wartości reguł i wielkości wyświetlanych tagów.
Duży rozmiar tag Złożona mieszanina gradientu - gwarancja, że ​​strona będzie wyświetlana z opóźnieniem lub modalnego CSS pojawia się, gdy użytkownik zabrakło cierpliwości.

system zarządzania treścią

Można tworzyć niestandardowe funkcje zarządzania przez strony modalnego okna. Ckeditor & amp; CSS to Drupal 7 jest dobrym przykładem tworzenia modalnych okien dialogowych. Korzystanie duży arsenał narzędzi i funkcji API ctools to popularny system zarządzania treścią, można szybko i sprawnie manipulować zasady stylu bez głębokiej znajomości HTML5 /CSS3, który jest nieprofesjonalnych deweloperów.
Inne systemy zarządzania treścią są ich zastosowania modalnych okien i idei tego rodzaju dialogu. Korzystanie z javascript mogą być ukryte lub wykorzystane do innych celów, ale istotne, że każdy CMS nie pozwoli deweloperom (użytkownik) przesadzić w tworzeniu kompleksowej i pojemny projektowania wyświetlania czasu. Zastosowanie systemów zarządzania treścią są obecnie popularnym sposobem na tworzenie zasobów internetowych automatycznie przy użyciu nowoczesnych możliwości tworzenia okien modalnych z CSS i nie wymaga rzeczywistej wiedzy o tym, jak to działa w rzeczywistości.

Tożsamość logiki na dialog Strona

Zaletą stosowania stylu przeciwko użyciu JavaScript, który może określanym logikę dialogu we wszystkich opcji modalnychwindows:
  • informacje wyjściowe dla informacji;
  • wniosek o potwierdzenie operacji;
  • zmień parametry strony;
  • wprowadzanie danych itp.
  • Po opracowaniu dialogu (dla wszystkich opcji możliwych wniosków ze strony i odpowiedzi odwiedzających), można go używać w ten sam sposób zarówno do bieżącej pracy, jak i do tworzenia podobnych zasobów internetowych.
    javascript nie zapewnia takiej możliwości, ale zapewnia zarządzany dialog. Skrypt należy dostosować w każdym przypadku. Logika zaprogramowanego dialogu różni się od opisowej przez HTML /CSS. Każda opcja ma swoje zalety. Najlepszym rozwiązaniem jest połączenie i wykorzystanie minimalnych możliwości każdej opcji. Deweloper może zastosować złożone i spektakularne funkcje nowoczesnych narzędzi do tworzenia witryn, ale najbardziej pożądane jest inteligentne podejście do projektowania łączące zalety każdej opcji.

    Dynamic Styling

    Modular Box CSS to zestaw kilku zestawów reguł dla wielu etykiet. javascript to możliwość dynamicznego tworzenia tagów i stylów. W tym kontekście można napisać przesyłane funkcje, które nie wymagają łącza w ogólnej funkcjonalności witryny i jej pomocniczego arsenału. W tej implementacji takiego pomysłu można opracować funkcje, które tworzą okna dialogowe we właściwy sposób, a programista może nie przekazać fragmentów kodu z tabeli HTML i CSS do innych projektów.
    Po podłączeniu jednego pliku js, który pozwala na tworzenie okien specyficznych dla okna poprzez wywołanie odpowiedniej funkcji, możnaoptymalnie łącz wszystkie zalety opcji zarządzanych i opisowych w celu utworzenia modalnego okna na CSS i HTML.

    Powiązane publikacje