jquery implements centered pop-up layer code_jquery

Copy code The code is as follows:

/*
Position the pop-up window to the middle of the browser
1. show(options{
height: height
width: width
speed: fade-out time, default 0
container: jquery object containing html content
model: whether it is a modal window , the default is true, the modal dialog box covers the mask layer under the pop-up layer, refer to the previous article Overlay implementation
})
2. close(speed: fade-out time defaults to 0)
*/
Q.Panel = function() {
var self = this;
self._resetPosition = function() {
self._container.css("top", self._getTop());
self._container.css("left", self._getLeft());
};
self._getTop = function() {
return Q.bom.scrollY() (Q.bom .windowHeight() - self._options.height) / 2;
};
self._getLeft = function() {
return (Q.dom.pageWidth() - self._options.width) / 2;
};
self.show = function(options) {
self._options = $.extend({
width: 350,
height: 200,
opacity: 0.5,
model: true,
speed: 0
}, options || {});
self._container = self._options.container;
var css = {
'width': self._options.width,
'height': self._options.height,
'z-index': Q.Overlay.zindex,
'position': 'absolute',
'left': self._getLeft(),
'top': self._getTop(),
'display': 'none'
};
self._container.css(css );
if (self._options.model) {
self._overlay = new Q.Overlay(self._options.opacity);
self._overlay.show();
}
$(window).scroll(self._resetPosition);
$(window).resize(self._resetPosition);
$(document.body).append(self._container);
self. _container.fadeIn(self._options.speed);
Q.Overlay.zindex; //Increments before popping up once to prevent multiple elastic layers from overlapping
};
self.close = function(speed) {
$(window).unbind('resize', self._resetPosition);
$(window).unbind('scroll', self._resetPosition);
self._container.fadeOut(speed | | 0, function() {
self._container.remove();
if (self._options.model) {
self._overlay.close();
}
}) ;
};
};

The centering here is controlled through js. Here are several common dialog boxes implemented using the Panel in this drama

Copy code The code is as follows:

/*弹출자정义隐藏框

닫기

Q.showPanel("리그", function(패널, 컨테이너) {
container.find(".close").click(function() {
panel.close();
}
);
*/
Q.showPanel = function(containerId,registerEventCallback) {
var 컨테이너 = $("#" 컨테이너Id)
var height = 컨테이너.높이();
var width = Container.width();
container = Container.clone(true);
var options = { 높이: 높이, 너비: 너비, 컨테이너: 컨테이너 }; new Q.Panel();
registerEventCallback(패널, 컨테이너);
panel.show(options)
}; 🎜>Q.openWindow = function(url, data,registerEventCallback) {
$.get(url, data, function(html) {
var panelDiv = $(html);
panelDiv.hide() ;
$(document.body).append(panelDiv);
var options = { height: panelDiv.height(), width: panelDiv.width(),
var panel = new Q.Panel();
registerEventCallback(panel, panelDiv);
panel.show(options)
}
/*提示框,3秒后自动淡*/
Q.tips = function(msg) {
var html = '

'
'

' >'

提示

' >'

' msg '

'
'

'

'
var 컨테이너 = $(html);
container.hide();
$(document.body).append(컨테이너);
var 패널 = new Q.Panel();
panel.show({ 컨테이너: 컨테이너, 높이: 컨테이너.높이(), 너비: 컨테이너.폭() ,속도:500});
setTimeout(function() { panel.close(500); }, 3000);
};
/*提示框*/
Q.alert = function(msg) {
var html = '

'
'

'
'

关闭提示

'
'

' msg '

'
'

确 determin

'
'

'
var 컨테이너 = $(html);
container.hide();
$(document.body).append(컨테이너);
var 패널 = new Q.Panel();
container.find(".btn_tit_close").click(function() {
panel.close();
return false;
});
container.find(".btn_org").click(function() {
panel.close();
return false;
});
panel.show({ 컨테이너: 컨테이너, 높이: 컨테이너.높이(), 너비: 컨테이너.너비() });
};
/*确认框 cancel回调为可选*/
Q.confirm = function(title, msg, yes, cancel) {
var html = '

'
'

'
'

关闭' 제목 '

'
'

' msg '

'
'

确 정의取消

'
'

'
var 컨테이너 = $(html);
container.hide();
$(document.body).append(컨테이너);
var 패널 = new Q.Panel();
container.find(".btn_tit_close").click(function() {
panel.close();
return false;
});
container.find(".btn_gray").click(function() {
if (취소)
cancel();
panel.close();
return false;
});
container.find(".btn_org").click(function() {
if (예)
yes();
panel.close();
return false;
});
panel.show({ 컨테이너: 컨테이너, 높이: 컨테이너.높이(), 너비: 컨테이너.너비() });
};

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

AI Hentai Generator

Generate AI Hentai for free.

Show More

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)

2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island Adventure: How To Get Giant Seeds

1 months ago By 尊渡假赌尊渡假赌尊渡假赌

How Long Does It Take To Beat Split Fiction?

4 weeks ago By DDD

R.E.P.O. Save File Location: Where Is It & How to Protect It?

4 weeks ago By DDD

Two Point Museum: All Exhibits And Where To Find Them

1 months ago By 尊渡假赌尊渡假赌尊渡假赌

Show More

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Show More

Hot Topics

Where is the login entrance for gmail email?

7375

15

Java Tutorial

1628

14

CakePHP Tutorial

1355

52

Laravel Tutorial

1267

25

PHP Tutorial

1216

29

Show More