Use CSS + DIV to control the style and size of the pop-up window

　　Experience and skills of kangfire website construction Institute (bkjia.com)This article introduces how to use CSS + DIV to control the style and size of the pop-up window, mainly by adding the DIV layer to the page, and control the layer position and display and hide on the page. Before introducing this method, let's first understand the two attributes of div.

1. id: <div> the id in the sign can also be called its name. It is often combined with CSS styles to control any elements in the webpage.

2. style: used to set the style of elements in the <div> flag. The value is the CSS property value. The common CSS attribute is position. This attribute has two optional values: relative and absolute. Relative indicates that the position of the <div> flag is relative to its window, and absolute indicates that the position of the <div> flag is absolute.

Another common attribute of the style attribute is to control the display attribute displayed by <div>. Set display to block. All elements in <div> are placed as a separate block on the page. Set display to none. The <div> element is removed from the page, and all the elements under it are automatically filled. Setting display to inline will make its behavior the same as that of inline. Even a common block element, it will be combined into an output stream like <span> and output to the page.

Note: When <div> is used independently without CSS, its effect on the webpage is the same as that in <p>.

Example:

Note: After clicking a connection, a logon page is displayed.

<Div style = "position: absolute; width: 240px; height: 139px; display: none"> <Table> <tr> <td> User Name <input type = "text"> </td> </tr> ...... </Table> </div>

Add a user login hyperlink to the page

<A href = "#"> login of users of the Fire Station Building Institute </a>

Compile open (login) js Functions

Description: document. body. clientWidth indicates the visible area width of the webpage.

Function open (divID) { DivID. style. display = 'block '; DivID. style. left = (document. body. clientWidth-240)/2; DivID. style. top = (document. body. clientHeight-139)/2; }