popupWindow.js是一款jQuery弹出层窗口插件。该插件能够轻松的制作弹出层模态窗口效果。弹出的窗口支持最大化、最小化、拖拽、改变尺寸等功能。

使用方法

安装：

 
npm install gasparesganga-jquery-popup-window
bower install gasparesganga-jquery-popup-window                  
                

在HTML文件中引入。

  
<link href="src/popupwindow.css" rel="stylesheet">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="src/popupwindow.js"></script>   
                

HTML结构

<button id="basic-demo_button" class="btn btn-primary">单窗口示例</button>
<div id="basic-demo" class="example_content">这是一个模态窗口</div>
                

CSS样式

初始化时隐藏窗口内容。

.example_content {
  display : none;
} 
                

初始化插件

然后通过下面的代码来初始化插件。

$("#basic-demo").PopupWindow({
  // options here
});          
                

配置参数

$("#basic-demo").PopupWindow({

  // popup title
  title               : "Popup Window",

  // modal mode
  modal               : true,

  // auto open on page load
  autoOpen            : true,

  // anmation speed
  animationTime       : 300,

  // custom css classes
  customClass         : "",
  
  // custom action buttons
  buttons             : {
      close               : true,
      maximize            : true,
      collapse            : true,
      minimize            : true
  },

  // button's position
  buttonsPosition     : "right",

  // custom button text
  buttonsTexts        : {
    close               : "Close",
    maximize            : "Maximize",
    unmaximize          : "Restore",
    minimize            : "Minimize",
    unminimize          : "Show",
    collapse            : "Collapse",
    uncollapse          : "Expand"
  }, 
  
  // draggable options
  draggable           : true,
  nativeDrag          : true,
  dragOpacity         : 0.6,
  
  // resizable options
  resizable           : true,
  resizeOpacity       : 0.6,
  
  // enable status bar
  statusBar           : true,
  
  // top position
  top                 : "auto",

  // left position
  left                : "auto",
  

  // height / width
  height              : 200,
  width               : 400,
  maxHeight           : undefined,
  maxWidth            : undefined,
  minHeight           : 100,
  minWidth            : 200,
  collapsedWidth      : undefined,
  
  // always keep in viewport
  keepInViewport      : true,

  // enable mouseh move events
  mouseMoveEvents     : true
  
});
                

API

// open
$('#selector').PopupWindow("open")

// close
$('#selector').PopupWindow("close")

// maximize
$('#selector').PopupWindow("maximize")

// unmaximize
$('#selector').PopupWindow("unmaximize")

// minimize
$('#selector').PopupWindow("minimize")

// unminimize
$('#selector').PopupWindow("unminimize")

// collapse
$('#selector').PopupWindow("collapse")

// uncollapse
$('#selector').PopupWindow("uncollapse")

// get the current position of the firset popup window
// return an object with numeric top and left values.
$('#selector').PopupWindow("getposition")

// set the poisition
$('#selector').PopupWindow("setposition", position)

// get the current size of the firset popup window
// return an object with numeric width and height values.
$('#selector').PopupWindow("getsize")

// set the size
$('#selector').PopupWindow("setsize", size)

// get the current state  of the firset popup window
// return a string representing the state: normal, closed, collapsed, minimized or maximized
$('#selector').PopupWindow("getstate")

// set the state
$('#selector').PopupWindow("setstate", state)

// set the title
$('#selector').PopupWindow("settitle", title)

// set the content in the status bar
$('#selector').PopupWindow("statusbar", content)

// destroy the plugin
$('#selector').PopupWindow("destroy")                   
                 

popupWindow.js-jQuery弹出层窗口插件的github网址为：https://github.com/gasparesganga/jquery-popup-window

在线预览    源码下载