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 相关文章推荐
关于jQuery $.isNumeric vs. $.isNaN vs. isNaN
Apr 15 Javascript
jQuery.position()方法获取不到值的安全替换方法
Mar 13 Javascript
介绍一个简单的JavaScript类框架
Jun 24 Javascript
理解JS绑定事件
Jan 19 Javascript
javascript原型继承工作原理和实例详解
Apr 07 Javascript
JS中parseInt()和map()用法分析
Dec 16 Javascript
微信小程序 石头剪刀布实例代码
Jan 04 Javascript
js cookie实现记住密码功能
Jan 17 Javascript
ionic 自定义弹框效果
Jun 27 Javascript
Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)
Aug 24 Javascript
vue中promise的使用及异步请求数据的方法
Nov 08 Javascript
使用webpack5从0到1搭建一个react项目的实现步骤
Dec 16 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 MVC框架详解
2017/08/16 PHP
Laravel中七个非常有用但很少人知道的Carbon方法
2017/09/21 PHP
在Laravel中使用DataTables插件的方法
2018/05/29 PHP
php进程daemon化的正确实现方法
2018/09/06 PHP
javascript 写类方式之一
2009/07/05 Javascript
javascript 获取元素位置的快速方法 getBoundingClientRect()
2009/11/26 Javascript
Js获取事件对象代码
2010/08/05 Javascript
关于jquery append() html时的小问题的解决方法
2010/12/16 Javascript
JS getAttribute和setAttribute(取得和设置属性)的使用介绍
2013/07/10 Javascript
CheckBoxList多选样式jquery、C#获取选择项
2013/09/06 Javascript
查找Oracle高消耗语句的方法
2014/03/22 Javascript
js中this用法实例详解
2015/05/05 Javascript
浅谈angular.js中实现双向绑定的方法$watch $digest $apply
2015/10/14 Javascript
BootStrap响应式导航条实例介绍
2016/05/06 Javascript
完美实现八种js焦点轮播图(上篇)
2016/07/18 Javascript
Bootstrap CSS组件之导航(nav)
2016/12/17 Javascript
使用jQuery实现购物车结算功能
2017/08/15 jQuery
parabola.js抛物线与加入购物车效果的示例代码
2017/10/25 Javascript
深入浅析JSONAPI在PHP中的应用
2017/12/24 Javascript
基于javascript实现碰撞检测
2020/03/12 Javascript
Python实现冒泡,插入,选择排序简单实例
2014/08/18 Python
Windows和Linux下使用Python访问SqlServer的方法介绍
2015/03/10 Python
Python使用matplotlib的pie函数绘制饼状图功能示例
2018/01/08 Python
Linux CentOS7下安装python3 的方法
2018/01/21 Python
如何在Django中添加没有微秒的 DateTimeField 属性详解
2019/01/30 Python
Python 通过requests实现腾讯新闻抓取爬虫的方法
2019/02/22 Python
python基于paramiko将文件上传到服务器代码实现
2019/07/08 Python
带有css3动画效果的兼容多浏览器简单导航条示例
2014/01/26 HTML / CSS
西班牙创意礼品和小工具网上商店:Curiosite
2016/07/26 全球购物
Made in Design意大利:现代家具、名家灯具和装饰
2020/10/27 全球购物
校园之声广播稿
2014/01/31 职场文书
升国旗仪式主持词
2014/03/19 职场文书
《泉水》教学反思
2014/04/11 职场文书
幼儿园保育员岗位职责
2014/04/13 职场文书
公共机构节能宣传周活动总结
2014/07/09 职场文书
抗洪救灾标语
2014/10/08 职场文书