You will need
- Basic knowledge of HTML language.
Instruction
1
a pop-up window, the HTML code, the hidden layer
2
Many of the pages in the network, you can see that to create the pages pop-up Windows are involved in a fancy library different JavaScript frameworks (jQuery, MooTools, Prototype, etc.). But in fact, they are not necessary when solving this task. For creating pop-UPS is enough funds available in hypertext markup language (HTML) and the language of description of cascading style sheets (CSS). Created this way Windows will work regardless of whether the visitor's browser support JavaScript.
All the code that creates a pop-up window can be placed in two rows. The first line creates a link that you must click to display a pop-up window:
<a onmouseover='this.style.cursor="pointer" ' onfocus='this.blur();' onclick="document.getElementById('PopUp').style.display='block'"><span style="text-decoration: underline;">Clicking here!</span></a>
Here the onmouseover attribute of the link tag specifies the standard for references in the cursor type when mouse over. The onclick attribute specifies that when the link is clicked, a hidden block with the ID of the PopUp should become visible.
The second line is, actually, a pop-up window. Layer with the ID of PopUp and set in the style attribute of a window size, color and text size, background and frame:
<div id='PopUp' style='display: none; position: absolute; left: 50px; top: 50px; border: solid black 1px; padding: 10px; background-color: rgb(255,255,225); text-align: justify; font-size: 12px; width: 135px;'>This is text in a pop-up window</div>
By default it is not visible - this is indicated by the display selector with a value of none in the style of a layer.
In fact that's all you need to create pop - up Windows put the two lines between the tags <body> and </body> of your page and it is ready to work.
All the code that creates a pop-up window can be placed in two rows. The first line creates a link that you must click to display a pop-up window:
<a onmouseover='this.style.cursor="pointer" ' onfocus='this.blur();' onclick="document.getElementById('PopUp').style.display='block'"><span style="text-decoration: underline;">Clicking here!</span></a>
Here the onmouseover attribute of the link tag specifies the standard for references in the cursor type when mouse over. The onclick attribute specifies that when the link is clicked, a hidden block with the ID of the PopUp should become visible.
The second line is, actually, a pop-up window. Layer with the ID of PopUp and set in the style attribute of a window size, color and text size, background and frame:
<div id='PopUp' style='display: none; position: absolute; left: 50px; top: 50px; border: solid black 1px; padding: 10px; background-color: rgb(255,255,225); text-align: justify; font-size: 12px; width: 135px;'>This is text in a pop-up window</div>
By default it is not visible - this is indicated by the display selector with a value of none in the style of a layer.
In fact that's all you need to create pop - up Windows put the two lines between the tags <body> and </body> of your page and it is ready to work.
3
To be able to close the pop-up window before the </div> you need to add link that performs the opposite action - hiding the visible layer with the ID of the PopUp:
<br /><div style='text-align: right;'><a onmouseover='this.style.cursor="pointer" ' style='font-size: 12px;' onfocus='this.blur();' onclick="document.getElementById('PopUp').style.display = 'none' " ><span style="text-decoration: underline;">close</span></a></div>
<br /><div style='text-align: right;'><a onmouseover='this.style.cursor="pointer" ' style='font-size: 12px;' onfocus='this.blur();' onclick="document.getElementById('PopUp').style.display = 'none' " ><span style="text-decoration: underline;">close</span></a></div>
4
But if you want to have a window pop up not clicking, and when you hover the mouse, then the first line with the link should be modified thus:
<a onmouseover="document.getElementById('PopUp').style.display = 'block' " onmouseout="document.getElementById('PopUp').style.display = 'none' " onfocus='this.blur();'><span style="text-decoration: underline;">hover your mouse here!</span></a>
<a onmouseover="document.getElementById('PopUp').style.display = 'block' " onmouseout="document.getElementById('PopUp').style.display = 'none' " onfocus='this.blur();'><span style="text-decoration: underline;">hover your mouse here!</span></a>
5
The principle and structure of the code of the popup window you are now familiar, and the design of its appearance, and content depends entirely on your goals and fantasies.
