Pop-up windows for a wide variety of purposes have many uses in web building. They can be used to create various kinds of menus, place advertising texts and graphics, tooltips when filling out complex forms, and it is convenient to place the forms themselves in windows that do not take up space on the page. In our article you will find a description of how you can make such a window.
It is necessary
Basic knowledge of HTML
Instructions
Step 1
popup, html, hidden layer
Step 2
On many pages on the web, you can see that fancy libraries of various JavaScript frameworks (jQuery, MooTools, Prototype, etc.) are used to create pop-up windows in the pages. However, in fact, they are not necessary when solving this particular problem. The tools available in Hypertext Markup Language (HTML) and Cascading Style Sheets (CSS) are sufficient to create pop-ups. The windows created this way will work regardless of whether JavaScript is enabled in the visitor's browser.
All the code that creates the popup can be placed on two lines. The first line creates a link that must be clicked to display the popup:
Click here!
Here, the onmouseover attribute of the link tag sets the default mouse cursor type for links. The onclick attribute specifies that when the link is clicked, the hidden PopUp block should become visible.
The second line is, in fact, the pop-up window. Layer with the PopUp identifier and the size of the window, color and size of the text, background and border specified in the style attribute:
This is the text in the popup
It is not visible by default - this is indicated by the display selector with a value of none in the layer style description.
Actually, this is all you need to create a pop-up window - place these two lines between the tags and your page and it's ready to go.
Step 3
To be able to close the pop-up window in front of the tag, you need to add a link that performs the opposite action - hiding the visible layer with the PopUp identifier:
close
Step 4
And if you want the window to pop up not by clicking, but by hovering the mouse cursor, then the first line with the link must be modified in this way:
move the mouse over here!
Step 5
You are now familiar with the principle and structure of the pop-up window code, and the design of its appearance and content entirely depends on your goals and imagination.
