对话框/Tips

PopupWindow - 弹出层窗口jQuery插件

也想出现在这里?联系我们
面包多

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

使用方法

在 HTML 文件中引入

也想出现在这里?联系我们
创客主机
  1. <link href="src/popupwindow.css" rel="stylesheet">
  2. <script src="//code.jquery.com/jquery.min.js"></script>
  3. <script src="src/popupwindow.js"></script>

HTML 结构

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

CSS 样式

初始化时隐藏窗口内容。

  1. .example_content {
  2.   display : none;
  3. }

初始化插件

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

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

配置参数

  1. $("#basic-demo").PopupWindow({
  2.  
  3.   // popup title
  4.   title               : "Popup Window",
  5.  
  6.   // modal mode
  7.   modal               : true,
  8.  
  9.   // auto open on page load
  10.   autoOpen            : true,
  11.  
  12.   // anmation speed
  13.   animationTime       : 300,
  14.  
  15.   // custom css classes
  16.   customClass         : "",
  17.  
  18.   // custom action buttons
  19.   buttons             : {
  20.       close               : true,
  21.       maximize            : true,
  22.       collapse            : true,
  23.       minimize            : true
  24.   },
  25.  
  26.   // button's position
  27.   buttonsPosition     : "right",
  28.  
  29.   // custom button text
  30.   buttonsTexts        : {
  31.     close               : "Close",
  32.     maximize            : "Maximize",
  33.     unmaximize          : "Restore",
  34.     minimize            : "Minimize",
  35.     unminimize          : "Show",
  36.     collapse            : "Collapse",
  37.     uncollapse          : "Expand"
  38.   }, 
  39.  
  40.   // draggable options
  41.   draggable           : true,
  42.   nativeDrag          : true,
  43.   dragOpacity         : 0.6,
  44.  
  45.   // resizable options
  46.   resizable           : true,
  47.   resizeOpacity       : 0.6,
  48.  
  49.   // enable status bar
  50.   statusBar           : true,
  51.  
  52.   // top position
  53.   top                 : "auto",
  54.  
  55.   // left position
  56.   left                : "auto",
  57.  
  58.  
  59.   // height / width
  60.   height              : 200,
  61.   width               : 400,
  62.   maxHeight           : undefined,
  63.   maxWidth            : undefined,
  64.   minHeight           : 100,
  65.   minWidth            : 200,
  66.   collapsedWidth      : undefined,
  67.  
  68.   // always keep in viewport
  69.   keepInViewport      : true,
  70.  
  71.   // enable mouseh move events
  72.   mouseMoveEvents     : true
  73.  
  74. });

API

  1. // open
  2. $('#selector').PopupWindow("open")
  3.  
  4. // close
  5. $('#selector').PopupWindow("close")
  6.  
  7. // maximize
  8. $('#selector').PopupWindow("maximize")
  9.  
  10. // unmaximize
  11. $('#selector').PopupWindow("unmaximize")
  12.  
  13. // minimize
  14. $('#selector').PopupWindow("minimize")
  15.  
  16. // unminimize
  17. $('#selector').PopupWindow("unminimize")
  18.  
  19. // collapse
  20. $('#selector').PopupWindow("collapse")
  21.  
  22. // uncollapse
  23. $('#selector').PopupWindow("uncollapse")
  24.  
  25. // get the current position of the firset popup window
  26. // return an object with numeric top and left values.
  27. $('#selector').PopupWindow("getposition")
  28.  
  29. // set the poisition
  30. $('#selector').PopupWindow("setposition", position)
  31.  
  32. // get the current size of the firset popup window
  33. // return an object with numeric width and height values.
  34. $('#selector').PopupWindow("getsize")
  35.  
  36. // set the size
  37. $('#selector').PopupWindow("setsize", size)
  38.  
  39. // get the current state  of the firset popup window
  40. // return a string representing the state: normal, closed, collapsed, minimized or maximized
  41. $('#selector').PopupWindow("getstate")
  42.  
  43. // set the state
  44. $('#selector').PopupWindow("setstate", state)
  45.  
  46. // set the title
  47. $('#selector').PopupWindow("settitle", title)
  48.  
  49. // set the content in the status bar
  50. $('#selector').PopupWindow("statusbar", content)
  51.  
  52. // destroy the plugin
  53. $('#selector').PopupWindow("destroy")

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

服务范围 1、专业提供WordPress主题、插件汉化、优化、PHP环境配置等服务请详询在线客服
2、本站承接 WordPress、DedeCMS、ThinkPHP 等系统建站、仿站、开发、定制等服务
3、英文模板(主题)安装费用为120元/次,汉化主题首次免费安装(二次安装30元/次)
售后时间 周一至周五(法定节假日除外) 10:00-22:00
免责声明 本站所提供的模板(主题/插件)等资源仅供学习交流,若使用商业用途,请购买正版授权,否则产生的一切后果将由下载用户自行承担,有部分资源为网上收集或仿制而来,若模板侵犯了您的合法权益,请来信通知我们(Email: 2107117185@qq.com),我们会及时删除,给您带来的不便,我们深表歉意!
免费下载
(0)

本文由 创客云 作者:PetitQ 发表,转载请注明来源!

也想出现在这里?联系我们
创客主机

热评文章

发表评论

精彩推荐

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

Envato Affiliates

本站承接 WordPress / DedeCMS / ThinkPHP 等
系统建站、仿站、开发、定制等业务!

Hi, 如果您有主题插件代购(30-600元)汉化等建站相关业务,可以 跟我联系 哦!
欢迎投稿
嘿,欢迎咨询!