Home > Article > Web Front-end > jquery pop-up login window implementation code_jquery
The main layer is centered left and right. Set left equal to the width of the window divided by two minus the width of the own layer divided by two. As for the upper and lower centering of the window, I did not do it. I fixed top equal to the scrollTop of the scroll bar hidden plus 50px;
When an event triggers this class, first determine whether the two layers have been appended to the body, otherwise it will keep increasing every time it is triggered. Five parameters title, content, width, height, and cssName are set, which respectively define the style name of the layer title, content within the layer, layer width, layer height, and layer content. The content in the layer is set up with four loading methods: url, text, id, and iframe. The HTML content of the target url is loaded through ajax through get or post. text is to write content directly in the event, and id is to obtain an id on the page. The html inside is displayed in the pop-up layer, and the iframe knows that the target url is displayed in the frame in the layer. Often the content styles in the pop-up layer are also various, so a parameter cssName is added, through which the content in the layer can be arranged.
1. The html of the popup layer is as follows:
顺序 | 参数 | 功能 | 备注 | |
---|---|---|---|---|
1 | title | 弹出层的标题 | 必填,纯文本 | |
2 | content | 弹出层的内容 | :url | get或post某一页面里的html,该页面要求只包含body的子标签 |
:text | 直接写入内容 | |||
:id | 显示页面里某id的子标签 | |||
:iframe | 层内内容以框架显示 | |||
3 | width | 弹出层的宽 | 必填,css值,比如“200px” | |
4 | height | 弹出层的高 | 如上,但是可用“auto” | |
5 | cssName | 弹出层的css | 给id floatBox加入的样式名,层内样式可以通过这个样式名来定制 |