How to make a pop-up window , html popup window?

How to make a pop-up window , html popup window?
You will need:
  • Basic knowledge of HTML
  • Basic knowledge of CSS
  • language text editor
# 1

To access a pop-up window will use the basis of hypertext documents, namely the link.As is well known links are created using HTML tag.Our link is different from the conventional in that its href attribute will point to the address of a document or page, a hidden layer of div.Show pop-up oknozdes #ModalWindow - id of our future hidden layer a div, which is between the tags and arrange the contents of our pop-up window, and also add a link to close the window.And so, we place the following element div.Xx's our pop oknoEto popup created by means of CSS and HTML.These windows can be used for various purposes

# 2

As can be seen from the already we have introduced a code name of the class, we were asked Dialog, now create this class by CSS styles..Dialog {position: fixed;font-family: Arial, Helvetica, sans-serif;top: 0;right: 0;bottom: 0;left: 0;background: rgba (0,0, 0,0 9).z-index: 99999; -webkit-

transition: opacity 200ms ease-in; -moz-transition: opacity 200ms ease-in;transition: opacity 200ms ease-in;display: none;pointer-events: none;} In accordance with our class Dialog pop-up window has a fixed position, which allows it to move when scrolling the page down.When the window is expanded to fill the screen background black color that has a slight transparency and is located on top of the other elements on the page (z-index property).

# 3

transitions are also set to display a pop-up window, and it is hidden in an inactive state.Properties pointer-events is set to none, to link does not react to pressing the mouse button when the window is active, that is active pseudo class ": target", which is described further..Dialog: target {display: block;pointer-events: auto;} Let us consider the class of pseudo target.It is designed to change the element output mode, due to this pseudo class of our pop-up window will be displayed when you click on the link.Here we change the value of the pointer-events.Next, determine the width of the window and its position on the page.

# 4

Here we define the gradient for the background, for example, from pale blue to blue, and the rounded corners of the window..Dialog & gt;div {width: 400px;position: relative;margin: 15% auto;padding: 5px 20px 13px 20px;border-radius: 10px;background: # B0E0E6;background: -moz-linear-gradient (# B0E0E6, # 4682B4);background: -webkit-linear-gradient (# B0E0E6, # 4682B4);background: -o-linear-gradient (# B0E0E6, # 4682B4);}

# 5

closes our window is using round shape button in the upper right corner of the window.The original color of the buttons put blue and add a light shadow.The following code creates the appearance of the button.close {background: # 0000FF;color: #FFFFFF;line-height: 25px;position: absolute;right: -12px;text-align: center;top: -10px;width: 24px;text-decoration: none;font-weight: bold;-webkit-border-radius: 15px;-moz-border-radius: 15px;border-radius: 15px;-moz-box-shadow: 1px 1px 3px # 000;-webkit-box-shadow: 1px 1px 3px # 000;box-shadow: 1px 1px 3px # 000;} When you move the cursor button to change it to red.close: hover {background: # FF0000;}

# 6

Thus html popup window and you're done.Finally roofing to remind you that the styles can be assigned within html document, or in a separate stylesheet file.If you have to write the styles in the document, they should be placed between the style tags.If the styles are saved in a separate document, the document is saved with the extension.cssi contact with him must be installed using the link tag in the html file.