Jquery-based Windows aero pop-up window (pretty close button)

Source: Internet
Author: User

The jquery dialog ins aerowindow introduced today is one of the most personalized ones, because it has a human body like Windows 7 Aero.

:

Demo:

Official demo local demo

Features
Unique: reflective effect of the title bar when the window is moved
Window buttons: Minimize, reduce, maximize, and close
Double-click the title bar of the window to maximize the size of the window.
Activity window highlighted
Resize)
Drag the window
N multiple configuration options
Configuration Options
Window title
X/y at the start of the window
Window Size
Minimum window size
Opening the available status of the window (minimized, maximized, normal)
Window animation (30 different brilliant effects)
Window functions, mouse events, and JavaScript calls
In the following compatibility test Browser
Internet Explorer 6
Internet Explorer 7
Internet Explorer 8
Firefox 3
Google browser 4
Apple Safari 4
Opara10
Easy to use
Let's see how Windows aero works in your existing website window.

The simplest method of use:CopyCodeThe Code is as follows: $ ('# yourcontainerdiv'). aerowindow ({
Windowtitle: 'My first very cool aero window for web ',
});

Custom Configuration:Copy codeThe Code is as follows: $ ('# yourcontainerdiv'). aerowindow ({
Windowtitle: 'My first cool aero window for web ',
Windowpositiontop: 'center ',
Windowpositionleft: 'center ',
Required wwidth: 600,
Windowheight: 400,
Windowminwidth: 100,
Windowmin Height: 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:» aerowindow (v3.5)
This site: aerowindow jquery-based Windows aero pop-up window

The code for using the aerowindow plug-in is attached to the life flow page. Copy code The Code is as follows: // Javascript script
$ (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: 'late '+ go. ATTR ('class '),
Windowpositiontop: 'center ',
Windowpositionleft: 'center ',
Required wwidth: 1000,
Windowheight: 500,
Windowanimation: 'easeoutcubic'
});
$ ('Html, body'). animate ({scrolltop: '0px '}, 300 );
Return false;
});
});
// Container in the pop-up window
<Div id = firefoxapp style = "display: none">
<IFRAME Style = "border-right-width: 0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px "id =" mywindows "Height =" 99.5% "src =" "frameborder =" 0 "width =" 100% "> </iframe>
<Div id = iframehelper> </div>
</Div>

For more information, see.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.