HTML5 / CSS3 properties provide the developer with the ability to quickly create the logic of the window dialog with the ability to enter small amounts of information, confirm actions or inform the visitor.
The functionality provided through JavaScript functions is available to uncomplicated HTML code and several CSS rules. The effect will be no less, and in some cases even greater.
The meaning of a modal window
Display information and confirm its receipt: a window appears in the browser, and the site is waiting for the visitor to confirm that he has read specific information. Raise a question and get an answer: yes or no. Display input fields (form, request) and get text, data or a set of values for all fields of the form.
There are many options for using a modal window, but in fact it is a regular HTML tag. The: target pseudo-class and the pointer-events property are used. The first determines what to do when you hover over a link (another pointer). The second allows you to give the element the opportunity to react again to events.
Information window example
The image shows the link, clicking on which opens a CSS modal window with information. Only after the visitor clicks on the “closing element” of the window - “X”, the window disappears and the link to open the window appears again.
The dialogue starts with the tag “a” and ends with the tag “a”. Variants of implementing this idea can come up with a huge amount.
In this example, the description style of the link to open the window and to close it is made in different ways. The first link makes visible a div with the identifier scWiindow, which creates the illusion of opening a window in which there is information and only one button (link) to close.
No actions can be performed on the page until the window is closed. Using such a modular HTML / CSS window, you can design controls that instantly pop up on the page, block control and allow you to make settings for the necessary parameters. Upon completion of the process, you can restore the logic of the page in normal mode.
Popup Dynamics
Modern HTML5 / CSS3 features are supported by all browsers. The developer has an extensive range of functionality for using gradient, transparency, transformation, moving, transforming, rotating and other actions with tags.
Nothing prevents you from combining various effects with each other in search of perfect forms and original design. A CSS modal window is the idea of using pointer-events and: target, but nothing prevents us from using other style rules.
However, while applying diligence to developing a design that can surprise any visitor, it should be noted: JavaSript is a controlled way to create a dialogue. Everything can be controlled here.
A simple CSS modal window using a combination of tags with a gradient, transformation, and appearance through rotation (for example) is a guarantee of a significant delay in the page.
Modern styles are a variety of possibilities, but these capabilities are rigidly implemented in algorithms for executing hypertext and applying CSS rules. Here you can control only through the values of the rules and the sizes of the displayed tags.
A large tag size, a complex combination of gradients is a guarantee that the page will be delayed or that the CSS modal window will appear when the visitor has run out of patience.
Site management systems
You can create your own systems for managing the functionality of pages through modal windows. Ckeditor & CSS on Drupal 7 is a good example of creating modal dialogs. Using an extensive arsenal of API functions and the ctools tool of this popular site management system, you can quickly and efficiently manipulate style rules without a deep knowledge of HTML5 / CSS3, that is, non-professional developers.
Other site management systems present their options for using modal windows and ideas of this kind of dialogue. Using JavaScript here can be hidden or used for other purposes, but it’s essential that any CMS will not allow the developer (user) to overdo it in creating a complex and time-consuming design display.
The use of site management systems is today a popular way to create web resources, it automatically uses the modern capabilities of creating modal windows from CSS tables, and does not require actual knowledge of how this actually works.
Page Dialog Logic Identity
The advantage of using styles as opposed to using JavaScript is that you can once describe the logic of the dialog for all options of modal windows:
- information output for information;
- request confirmation of the operation;
- change page settings;
- data entry, etc.
After the dialogue (on all variants of possible requests from the site and visitor’s answers) is developed, it can be used in the same way for both current work and for creating similar web resources.
JavaScript does not allow this, but provides a controlled dialog. The script has to be adjusted in each case. The logic of the programmable dialogue is different from the descriptive via HTML / CSS.
Each option has its own merits. The best solution is to combine and use the minimum capabilities of each option. The developer can apply the complex and spectacular capabilities of modern tools in the development of sites, but a reasonable approach to development, combining the advantages of each option, is the most appropriate.
Dynamic style creation
A CSS modal window is a set of rules that are assigned to multiple tags. JavaScript is the ability to dynamically create tags and styles. In this context, you can write portable functions that do not require integration into the overall functionality of the site, but will be its auxiliary arsenal.
With this implementation of such an idea, it is possible to develop functions that create dialog boxes in the desired form, and the developer may not transfer pieces of code from HTML pages and CSS tables to his other designs.
By connecting one js-file, which autonomously allows you to create the necessary windows by calling the corresponding function, you can optimally combine the advantages of managed and descriptive options for creating a modal window in CSS and HTML.