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 相关文章推荐
VBScript版代码高亮
Jun 26 Javascript
基于jquery的jqDnR拖拽溢出的修改
Feb 12 Javascript
js中if语句的几种优化代码写法
Mar 12 Javascript
javascript 进阶篇3 Ajax 、JSON、 Prototype介绍
Mar 14 Javascript
ajax页面无刷新 IE下遭遇Ajax缓存导致数据不更新的问题
Dec 11 Javascript
javaScript(JS)替换节点实现思路介绍
Apr 17 Javascript
JS打开层/关闭层/移动层动画效果的实例代码
May 11 Javascript
轮播图组件js代码
Aug 08 Javascript
JS实现异步上传压缩图片
Apr 22 Javascript
实例讲解DataTables固定表格宽度(设置横向滚动条)
Jul 11 Javascript
Javascript 严格模式use strict详解
Sep 16 Javascript
js+html+css实现手动轮播和自动轮播
Dec 30 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
Pain 全世界最小最简单的PHP模板引擎 (普通版)
2011/10/23 PHP
数据库中排序的对比及使用条件详解
2012/02/23 PHP
JavaScript 学习笔记二 字符串拼接
2010/03/28 Javascript
parseInt parseFloat js字符串转换数字
2010/08/01 Javascript
为JS扩展Array.prototype.indexOf引发的问题探讨及解决
2013/04/24 Javascript
$(&quot;&quot;).click与onclick的区别示例介绍
2014/09/25 Javascript
Javascript递归打印Document层次关系实例分析
2015/05/15 Javascript
jquery Easyui Datagrid实现批量操作(编辑,删除,添加)
2017/02/20 Javascript
原生javascript实现分页效果
2017/04/21 Javascript
详解使用vue实现tab 切换操作
2017/07/03 Javascript
Vue组件实例间的直接访问实现代码
2017/08/20 Javascript
详解Angular4 路由设置相关
2017/08/26 Javascript
Node.js如何使用Diffie-Hellman密钥交换算法详解
2017/09/05 Javascript
JS 仿支付宝input文本输入框放大组件的实例
2017/11/14 Javascript
vue通过滚动行为实现从列表到详情,返回列表原位置的方法
2018/08/31 Javascript
解决Vue2.0 watch对象属性变化监听不到的问题
2018/09/11 Javascript
javascript实现一款好看的秒表计时器
2020/09/05 Javascript
[01:00:53]2018DOTA2亚洲邀请赛3月29日 小组赛B组 iG VS Secret
2018/03/30 DOTA
Python爬虫番外篇之Cookie和Session详解
2017/12/27 Python
Python3调用百度AI识别图片中的文字功能示例【测试可用】
2019/03/13 Python
用Python调用win命令行提高工作效率的实例
2019/08/14 Python
Python中xml和dict格式转换的示例代码
2019/11/07 Python
Python实现名片管理系统
2020/02/14 Python
如何通过命令行进入python
2020/07/06 Python
Python gevent协程切换实现详解
2020/09/14 Python
基于CSS3实现图片模糊过滤效果
2015/11/19 HTML / CSS
华为菲律宾官方网站:HUAWEI Philippines
2021/02/23 全球购物
中专生自我鉴定书范文
2013/12/28 职场文书
学习雷锋倡议书
2014/04/15 职场文书
暖通工程师岗位职责
2014/06/12 职场文书
镇创先争优活动总结
2014/08/28 职场文书
作文评语集锦
2014/12/25 职场文书
公司更名通知函
2015/04/24 职场文书
2015年监理个人工作总结
2015/05/23 职场文书
红色故事汇观后感
2015/06/18 职场文书
用Python进行栅格数据的分区统计和批量提取
2021/05/27 Python