
Translucent is a simple yet customizable jQuery popup plugin for creating floating panels that can be dragged, closed, minimized, maximized, expanded and collapsed.
1. Import jQuery library together with the jQuery Translucent plugin's files into the html file.
<link rel="stylesheet" href="translucent/style.css"> <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"> </script> <script src="translucent/jquery-translucent.js"></script>
2. Create a basic floating popup window on the page.
$("body").translucent({ titleText: "Popup Title", textHtml: "<p>Popup Content</p>" });
3. Possible plugin customization options which can be overridden by passing in an object to the translucent()
function.
$("body").translucent({ // target ID target:"translucentDefultId", // width width:500, // height height:500, // is draggable? drag:true, // opacity (0-1) opacity:0.8, // border border:"1px solid #ddd", // border radius borderRadius:8, // enable glass blur effect wallGlass:false, // background color backgroundColor:"rgb(225, 225, 225)", // title height titleHeight:"40px", // title background titleGroundColor:"#999", // enable shadow effect shadow:true, // top position positionTop:100, // left position positionLeft:100, // font size titleFontSize:12, // text color titleFontColor:"#000", // font family titleFontFamily:"Open Sans", // make title center titleTextCenter:false, // z-index zIndex:10 });
4. Execute a function when the user tries to close the popup window.
$("body").translucent({ close:function ($dom) { alert("Are You Sure?") } });
This awesome jQuery plugin is developed by hulalalalala. For more Advanced Usages, please check the demo page or visit the official website.
- Publication date: 14.11.2018
- Source