jQuery弹出层插件popShow(改进版)用法示例


Posted in Javascript onJanuary 23, 2017

本文实例讲述了jQuery弹出层插件popShow(改进版)用法。分享给大家供大家参考,具体如下:

前面一篇《jQuery弹出层插件popShow用法示例》分析了popShow插件的基本用法,这里再对插件进行一番改进。

popShow弹出层

jQuery弹出层插件popShow(改进版)用法示例

图1.1 弹出层效果

1、引入JS和CSS文件

<link href="popShow.css" rel="stylesheet" type="text/css" />
<script src="/js/common/jquery.min.js" type="text/javascript"></script>
<script src="popShow.js" type="text/javascript"></script>

注意:这里需要引入jQuery库文件。

2、编写HTML代码

<div id="swinLogin" style="width:230px; display:none;">
  <table>
    <tr>
      <th>用户名</th>
      <td><input id="txtUserName" type="text" /></td>
    </tr>
    <tr>
      <th>密码</th>
      <td><input id="txtPsw" type="password" /></td>
    </tr>
    <tr>
      <th></th>
      <td><input type="button" value="登录" /></td>
    </tr>
  </table>
</div>

3、popShow的使用

(1) 打开弹出层

$("#swinLogin").popShow("用户登录");

(2) 关闭弹出层

$("#swinLogin").popHide();

附件

附件1:popShow.js

$.fn.popShow = function(title) {
  var tag = this;
  $('<div class=\"g-mask\"><iframe frameborder=\"0\" scrolling=\"no\"></iframe></div>').appendTo('body');
  this.show().attr('par', this.parent().length ? true : false).appendTo('body').wrapAll('<table class=\"g-popup\"><tr><td></td></tr></table>');
  this.wrapAll('<div class=\"g-popup-wrap\" style=\"width:' + this.outerWidth(true) + 'px\"></div>').before('<div class=\"g-popup-title g-line-dashed\">' + (title ? title : '') + '</div>').before($('<a class=\"g-popup-hide\" href=\"javascript:;\"></a>').click(function() {
    tag.popHide()
  }));
  return this
};
$.fn.popHide = function() {
  var tab = this.closest('table');
  this.attr('par') == 'true' ? this.hide().appendTo('body') : this.remove();
  tab.prev().remove();
  tab.remove();
  return this
};

附件2:popShow.css

/*弹出层*/
.g-mask, .g-mask iframe, .g-popup { width:100%; height:100%; }
.g-mask { background:#fff; filter:alpha(opacity=80); opacity:0.8; }
.g-mask iframe { filter:alpha(opacity=0); opacity:0; }
.g-mask, .g-popup { position:fixed; top:0; left:0; z-index:10000; _position:absolute; _top:expression(documentElement.scrollTop + "px");}
.g-black-mask {background:#000;opacity:0.7;}
.g-black-popup{position:absolute;}
.g-popup { text-align:center; }
.g-popup-wrap { padding:30px; background:#fff; border:#E95A59 solid 4px; text-align:left; position:relative; margin:0 auto; }
.g-popup-title { font-size:14px; height:28px; line-height:28px; overflow:hidden; margin-bottom:20px; font-weight:bold; color:#e25150; border-bottom:1px dotted #AAAAAA}
.g-popup-hide {background:url("/images/popBtn.png") 0 0 no-repeat; width:34px; height:30px; display:block; position:absolute; right:5px; top:5px; z-index:99; }
.g-popup-hide:hover { background-position:0 -40px; }
.g-info-hide { width:34px; height:30px; display:block; position:absolute; background-position:0 -1320px; top:5px; right:5px; }
.g-info-hide:hover { background-position:0 -1360px; }
.g-popup-tip { height: 0; overflow: hidden; position: fixed; z-index:10001; bottom: 0; right: 0; _position: absolute; _bottom: auto; _top: expression(eval(document.documentElement.scrollTop + document.documentElement.clientHeight - this.offsetHeight - (parseInt(this.currentStyle.marginTop, 10) || 0) - (parseInt(this.currentStyle.marginBottom, 10) || 0)));}

附件3:关闭按钮图标(popBtn.png)

jQuery弹出层插件popShow(改进版)用法示例

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
左侧是表头的JS表格控件(自写,网上没有的)
Jun 04 Javascript
使用javascript实现判断当前浏览器
Apr 14 Javascript
在JavaScript中使用NaN值的方法
Jun 05 Javascript
javascript实现动态导入js与css等静态资源文件的方法
Jul 25 Javascript
学习Angular中作用域需要注意的坑
Aug 17 Javascript
3种不同的ContextMenu右键菜单实现代码
Nov 03 Javascript
JS中Select下拉列表类(支持输入模糊查询)功能
Jan 17 Javascript
javascript 中iframe高度自适应(同域)实例详解
May 16 Javascript
基于vue-simplemde实现图片拖拽、粘贴功能
Apr 12 Javascript
vue.extend与vue.component的区别和联系
Sep 19 Javascript
webpack开发环境和生产环境的深入理解
Nov 08 Javascript
RxJS在TypeScript中的简单使用详解
Apr 13 Javascript
JS判断指定dom元素是否在屏幕内的方法实例
Jan 23 #Javascript
jQuery弹出层插件popShow用法示例
Jan 23 #Javascript
Javascript中for循环语句的几种写法总结对比
Jan 23 #Javascript
基于jQuery插件jqzoom实现的图片放大镜效果示例
Jan 23 #Javascript
JavaScript在form表单中使用button按钮实现submit提交方法
Jan 23 #Javascript
canvas绘制表盘时钟
Jan 23 #Javascript
canvas绘制的直线动画
Jan 23 #Javascript
You might like
php读取xml实例代码
2010/01/28 PHP
PHP7.1实现的AES与RSA加密操作示例
2018/06/15 PHP
PHP支付宝当面付2.0代码
2018/12/21 PHP
php 比较获取两个数组相同和不同元素的例子(交集和差集)
2019/10/18 PHP
jquery JSON的解析方式
2009/07/25 Javascript
jQuery ui 1.7更新小结
2009/08/15 Javascript
Jquery中使用setInterval和setTimeout的方法
2013/04/08 Javascript
jquery实现点击展开列表同时隐藏其他列表
2015/08/10 Javascript
AngularJs Understanding the Controller Component
2016/09/02 Javascript
JS绘制微信小程序画布时钟
2016/12/24 Javascript
React中常见的动画实现的几种方式
2018/01/10 Javascript
利用Webpack实现小程序多项目管理的方法
2019/02/25 Javascript
Python实现的一个简单LRU cache
2014/09/26 Python
python通过正则查找微博@(at)用户的方法
2015/03/13 Python
Python实现简单状态框架的方法
2015/03/19 Python
Python判断文件和文件夹是否存在的方法
2015/05/21 Python
详谈pandas中agg函数和apply函数的区别
2018/04/20 Python
Python用5行代码写一个自定义简单二维码
2018/10/21 Python
Tensorflow Summary用法学习笔记
2020/01/10 Python
Python破解BiliBili滑块验证码的思路详解(完美避开人机识别)
2020/02/17 Python
Python脚本导出为exe程序的方法
2020/03/25 Python
Python暴力破解Mysql数据的示例
2020/11/09 Python
python实现文件分片上传的接口自动化
2020/11/19 Python
美国便宜的横幅和标志印刷在线:Best of Signs
2019/05/29 全球购物
图库照片、免版税图片、矢量艺术、视频片段:Depositphotos
2019/08/02 全球购物
成人大专生实习期的自我评价
2013/10/02 职场文书
写给老师的表扬信
2014/01/21 职场文书
大学生实习鉴定评语
2014/04/25 职场文书
学校班班通实施方案
2014/06/11 职场文书
城市规划应届毕业生自荐信
2014/07/04 职场文书
小学安全汇报材料
2014/08/14 职场文书
2014年管理工作总结
2014/11/22 职场文书
党员年度个人总结
2015/02/14 职场文书
2015年财务部工作总结
2015/04/10 职场文书
Go标准容器之Ring的使用说明
2021/05/05 Golang
Python中异常处理用法
2021/11/27 Python