Home >Web Front-end >JS Tutorial >Jquery-based Windows Aero pop-up window (beautiful close button)_jquery

Jquery-based Windows Aero pop-up window (beautiful close button)_jquery

WBOY
WBOYOriginal
2016-05-16 18:19:151216browse

The Jquery Dialog Plugins AeroWindow introduced today is the most unique one because it has a physical body that is similar to the Windows 7 Aero effect.

Rendering:
Jquery-based Windows Aero pop-up window (beautiful close button)_jquery
Demo:

Official demo Local Demo

Features
Unique: Title bar reflective effect when window moves
Window buttons: minimize, reduce, maximize and close
Double-click the window title Column maximize, shrink
Active window highlighted
Change window size (resize)
Mouse drag window
N multiple configuration options
Configuration options
Window title
Window Starting position of
Window available functions, mouse events and JavaScript calls
Compatibility tested browsers below
Internet Explorer 6
Internet Explorer 7
Internet Explorer 8
Firefox 3
Google Browser 4
Apple Safari 4
Opara10
It is very simple to use
Come and let your existing website window display with Windows Aero effect.

The simplest way to use:




Copy the code

The code is as follows: $('#YourContainerDiv').AeroWindow({ WindowTitle: 'My first very cool Aero Window for Web',
});



Custom configuration:



Copy code
The code is as follows: $('#YourContainerDiv').AeroWindow({ WindowTitle: 'My first cool Aero Window for Web',
WindowPositionTop: 'center',
WindowPositionLeft: 'center',
WindowWidth: 600,
WindowHeight: 400,
WindowMinWidth: 100,
WindowMinHeight: 100,
WindowAnimationSpeed: 500,
WindowAnimation: 'easeOutCubic',//Animation effect when the window is opened
WindowResizable: true,
WindowDraggable: true,
WindowMinimize: true,
WindowMaximize: false,
WindowClosable: true
});


contains all necessary files and demo files. This version is based on jQuery (v1.4.2)

Official download address: »
AeroWindow
(v3.5)
Download address of this site:
AeroWindow imitation Windows Aero based on jquery Pop-up window
Attached is the code for using the AeroWindow plug-in on the life flow page


Copy the code
The code is as follows: //javascript $(document).ready(function() {
$('#profilactic a').click(function() {
var go=$(this);
$('#mywindows').attr('src',go.attr('href'))
go.attr('href','javascript:void (0);');
$('#Firefoxapp').AeroWindow({
WindowTitle: 'Xiangwan's' go.attr('class'),
WindowPositionTop: 'center',
WindowPositionLeft: 'center',
WindowWidth: 1000,
WindowHeight: 500,
WindowAnimation: 'easeOutCubic'
});
$('html,body').animate( {scrollTop: '0px'}, 300);
return false;
});
});
//Pop-up window container
Statement:
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