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.

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.