Home > Developer > Web Develop
3D Dialog Window Plugin effect:
<!DOCTYPE HTML><HTMLLang= "zh"><Head><MetaCharSet= "UTF-8"><Metahttp-equiv= "X-ua-compatible"content= "Ie=edge,chrome=1"> <Metaname= "Viewport"content= "Width=device-width, initial-scale=1.0"><title>jquery Click Button Popup 3D dialog window plugin</title><Linkrel= "stylesheet"type= "Text/css"href= "Https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" /><Linkrel= "stylesheet"type= "Text/css"href= "Css/htmleaf-demo.css"><Linkrel= "stylesheet"type= "Text/css"href= "Css/popup.css" /></Head><Body> <Divclass= "Container Center-block"> <H1>Popup 3D JQuery</H1> <aID= "TST"rel= "Popup_name"class= "btn btn-success btn-lg"href="#"role= "button">3D dialog box</a> <Divclass= "Popup"> <DivID= "Popup_name"class= "Popup_block"> <Divclass= "Popup_head"> <H2>Popup 3D</H2> </Div> <Divclass= "Popup_body"> <P>Gary.</P> </Div> </Div> </Div> </Div><Scriptsrc= "Js/jquery-1.11.0.min.js"type= "Text/javascript"></Script><Scriptsrc= "Https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></Script><Scriptsrc= "Js/popup.js"></Script><Scriptsrc= "Js/script.js"></Script></Body></HTML>index.html
. popup{ Position:absolute; top:50%; left:50%;}. popup_block{ Display:none; Position:absolute; width:300px; margin:-150px; Box-sizing:border-box; border-radius:20px; Border-style:solid; border-color:coral; Cursor:pointer; transform-style:preserve-3d; box-shadow:0px 20px 100px #aaa;}. close{ padding:10px;}. popup_head{ background-color:coral; padding:10px; border-radius:10px 10px 0 0; Transition-duration:0.2s;}. popup_body{ padding:20px;}. Popup_head > H1, H2, H3, H4, h5{ margin-top:0px; Color:white;}. popup_head:hover{ padding-left:20px;}Implementation process
3D pop-up widget made by Popup.js:jQuery and CSS3 and can interact with the mouse
Css
To set the popup window mode fast
. popup_block{ Display:none; Position:absolute; width:300px; margin:-150px; Box-sizing:border-box; border-radius:20px; Border-style:solid; border-color:coral; Cursor:pointer; transform-style:preserve-3d; box-shadow:0px 20px 100px #aaa;}Box-sizing: Any padding and borders specified for the element will be drawn within the set width and height
Border-radius: Adding rounded borders to div elements
Border-style: Set style portal for 4 borders
Border-style: Parameters1 parameters border-style:dotted; All 4 borders are dots 2 parameters border-style:dotted solid; the top and bottom border are point-like right and left borders are solid 3 parameters border-style:dotted Solid double; The top border is a dot-shaped right border and the left edge is a solid line with a two-line 4 parameter border-style:dotted solid double dashed; The top border is dotted to the right of the box is the solid line below the borders is the double line left box is dashed
Cursor: Specifies the type (shape) of cursors to display
pointer cursor rendered as a pointer to a link other parameters: Portal
Transform-style: The converted child element retains its 3D conversion
The flat child element will not retain its 3D position.
The preserve-3d child element retains its 3D position.
Box-shadow:: Setting one or more drop-down shaded boxes
Box-shadow: ParametersBox-shadow:h-shadow v-shadow blur spread color Inset;h-shadow : Required. The position of the horizontal shadow. Allow negative values V-shadow : Required. The position of the vertical shadow. Allow negative blur : Optional. Blur distance spread : Optional. Shadow size color : Optional. The color of the shadow. Find the full list of color values in the CSS color values inset : Optional. Change shadow inner Shadow from Outer shadow (start)
Set the PopOver header
. popup_head{ background-color:coral; padding:10px; border-radius:10px 10px 0 0; Transition-duration:0.2s;}Transition-duration: Specifies the amount of time (in seconds or milliseconds) to complete the transition effect
Dom
Load popup.js, write dialog box title and dialog box contents
<Divclass= "Popup"> <DivID= "Popup_name"class= "Popup_block"> <Divclass= "Popup_head"> <H2>Popup 3D</H2> </Div> <Divclass= "Popup_body"> <P>Gary.</P> </Div> </Div> </Div>
JS Frame _ (Popup.js) 3D dialog Window plugin
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
