floating popup window translucent - Download Floating Popup Window Plugin With jQuery - Translucent

Download Floating Popup Window Plugin With jQuery – Translucent

By Posted on

This time I will share jQuery Plugin and tutorial about Floating Popup Window Plugin With jQuery – Translucent, hope it will help you in programming stack.

floating popup window translucent - Download Floating Popup Window Plugin With jQuery - Translucent
File Size: 10.9 KB
Views Total: 1267
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

Translucent is a simple yet customizable jQuery popup plugin for creating floating panels that can be dragged, closed, minimized, maximized, expanded and collapsed.

How to use it:

1. Import jQuery library together with the jQuery Translucent plugin’s files into the html file.

view source
1 <link rel="stylesheet" href="translucent/style.css">
2 <script src="https://code.jquery.com/jquery-1.12.4.min.js"
3         integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"
4         crossorigin="anonymous">
5 </script>
6 <script src="translucent/jquery-translucent.js"></script>

2. Create a basic floating popup window on the page.

view source
1 $("body").translucent({
2   titleText: "Popup Title",
3   textHtml: "<p>Popup Content</p>"
4 });

3. Possible plugin customization options which can be overridden by passing in an object to the translucent() function.

view source
01 $("body").translucent({
02  
03   // target ID
04   target:"translucentDefultId",
05  
06   // width
07   width:500,
08  
09   // height
10   height:500,
11  
12   // is draggable?
13   drag:true,
14  
15   // opacity (0-1)
16   opacity:0.8,
17  
18   // border
19   border:"1px solid #ddd",
20  
21   // border radius
22   borderRadius:8,
23  
24   // enable glass blur effect
25   wallGlass:false,
26  
27   // background color
28   backgroundColor:"rgb(225, 225, 225)",
29  
30   // title height
31   titleHeight:"40px",
32  
33   // title background
34   titleGroundColor:"#999",
35  
36   // enable shadow effect
37   shadow:true,
38  
39   // top position
40   positionTop:100,
41  
42   // left position
43   positionLeft:100,
44  
45   // font size
46   titleFontSize:12,
47  
48   // text color
49   titleFontColor:"#000",
50  
51   // font family
52   titleFontFamily:"Open Sans",
53    
54   // make title center
55   titleTextCenter:false,
56  
57   // z-index
58   zIndex:10
59  
60 });

4. Execute a function when the user tries to close the popup window.

view source
1 $("body").translucent({
2   close:function ($dom) {
3     alert("Are You Sure?")
4   }
5 });

This awesome jQuery plugin is developed by hulalalalala. For more Advanced Usages, please check the demo page or visit the official website.

source : jquery.net

Related posts: