Floating Popup Window Plugin With jQuery - Translucent

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.

<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.