PopupWindow - 弹出层窗口jQuery插件

PetitQ 对话框/Tips 2019-10-11 2.48K 0 0

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

使用方法

在 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")
```

Github 网址：https://github.com/gasparesganga/jquery-popup-window

PopupWindow - 弹出层窗口 jQuery 插件

已有 621 人购买

永久更新：
演示数据：
提取码：7tof

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

对话框/Tips

PopupWindow - 弹出层窗口jQuery插件

使用方法

HTML 结构

CSS 样式

初始化插件

配置参数

API

PopupWindow - 弹出层窗口 jQuery 插件

相关文章

jQuery炫酷点击变形全屏放大的模态窗口

jQuery简单实用的tooltip插件

简单实用jQuery确认框警告框插件

发表回复取消回复

热销模板

对话框/Tips

使用方法

HTML 结构

CSS 样式

初始化插件

配置参数

API

PopupWindow - 弹出层窗口 jQuery 插件

相关文章

发表回复 取消回复

热销模板

发表回复取消回复