jQuery弹出层插件popShow用法示例


Posted in Javascript onJanuary 23, 2017

本文实例讲述了jQuery弹出层插件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="display:none;">
  <div class="pWrap">
    <table class="g_form">
      <tr>
        <th class="g-form-label"><span class="g-star">*</span>用户名</th>
        <td><input id="txtUserName" type="text" /></td>
      </tr>
      <tr>
        <th><span class="g-star">*</span>密码</th>
        <td><input id="txtPsw" type="password" /></td>
      </tr>
      <tr>
        <th></th>
        <td><input type="button" value="登录" /></td>
      </tr>
    </table>
  </div>
</div>

3、popShow的使用

(1) 打开弹出层

popShow({ title: "用户登录", ele: "#swinLogin", width: 468 });
//打开弹出层

参数说明:

title: '用户登录', //标题
ele: '#divID', //目标id,必填
html: '<div><p>提交成功</p></div>', //支持html代码,若填写此项,ele可为空
width: 700, //非必填
hide: '#closeswin' //关闭按钮id,非必填

(2) 关闭弹出层

popHide(); //关闭弹出层

附件

附件1:popShow.js

function popShow(obt) {
  var wp = $('<div id=\"g-popwin\"></div>').appendTo('body'),
    ms = $('<div class=\"g-popwin-mask\"><iframe frameborder=\"0\" scrolling=\"no\"></iframe></div>').appendTo(wp),
    tb = $('<table class=\"g-popwin-box\"></table>').appendTo(wp),
    tr = $('<tr></tr>').appendTo(tb),
    td = $('<td></td>').appendTo(tr),
    bx = $('<div class=\"g_popwin\" style=\"margin:0 auto; width:700px;\"></div>').appendTo(td),
    ba = $('<div class=\"tit\"></div>').appendTo(bx),
    rb = $('<b class="g-f-r"></b>').appendTo(ba),
    hd = $('<a class="close g-f-r" title="点击关闭"></a>').appendTo(ba),
    st = $('<strong></strong>').appendTo(ba),
    cn = $('<div class=\"con\"></div>').appendTo(bx),
    ss;
  if (obt.ele) {
    ss = $(obt.ele).show().appendTo(cn)
  } else if (obt.html) {
    cn.append(obt.html)
  }
  if (obt.width) {
    bx.width(obt.width)
  }
  if (obt.height) {
    bx.height(obt.height)
  }
  if (obt.title) {
    st.text(obt.title)
  }
  else { ba.hide() }
  hd.add(obt.hide || '#swin_hide').click(function() {
    popHide();
  });
  window.popHide = function() {
    if (obt.ele) {
      ss.hide().appendTo('body')
    }
    wp.remove()
  };
}

附件2:popShow.css

#g-popwin, .g-popwin-mask, .g-popwin-mask iframe, .g-popwin-box {
  height: 100%;
  width: 100%;
}
.g-popwin-mask, .g-popwin-box {
  left: 0;
  position: fixed;
  top: 0;
  z-index: 100;
}
.g-popwin-mask {
  background: none repeat scroll 0 0 #000000;
  opacity: 0.3;
}
.g-popwin-mask iframe {
  opacity: 0;
}
.g_popwin {
  background-color: #FFFFFF;
  border: 1px solid #C6C6C6;
}
.g_popwin .tit .close {
  background: url("/images/swinclose.gif") no-repeat scroll 0 0 transparent;
  cursor: pointer;
  height: 14px;
  margin-top: 8px;
  width: 14px;
}
.g_popwin .tit b {
  display: block;
  height: 30px;
  width: 10px;
}
.g_popwin .tit
{
  background: none no-repeat scroll 0 0 #f2f2f2;
  border-bottom: 1px solid #C6C6C6;
  height: 30px;
  line-height: 30px;
  overflow: hidden;
  padding: 0 10px;
  font: 12px/1.5em Arial,Tahoma;
  color: #111111;
  line-height:30px;
}
.g_popwin .tit strong {
  display: block;
  height: 27px;
  width: 220px;
}
.g-f-r{float:right;}

附件3:关闭按钮图标(swinclose.gif)

jQuery弹出层插件popShow用法示例

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

Javascript 相关文章推荐
javascript Keycode对照表
Oct 24 Javascript
教您去掉ie网页加载进度条的方法
Dec 09 Javascript
JQUERY实现左侧TIPS滑进滑出效果示例
Jun 27 Javascript
解决jQuery动态获取手机屏幕高和宽的问题
May 07 Javascript
jQuery使用getJSON方法获取json数据完整示例
Sep 13 Javascript
Node.js dgram模块实现UDP通信示例代码
Sep 26 Javascript
JS实现提交表单前的数字及邮箱校检功能
Nov 13 Javascript
node中间层实现文件上传功能
Jun 11 Javascript
JavaScript继承与聚合实例详解
Jan 22 Javascript
微信小程序 bindtap 传参的实例代码
Feb 21 Javascript
如何在vue中使用kindeditor富文本编辑器
Dec 19 Vue.js
vue使用watch监听属性变化
Apr 30 Vue.js
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
node.js实现复制文本到剪切板的功能
Jan 23 #Javascript
jQuery 全选 全不选 事件绑定的实现代码
Jan 23 #Javascript
You might like
基于PHP与XML的PDF文档生成技术
2006/10/09 PHP
Discuz! 5.0.0论坛程序中加入一段js代码,让会员点击下载附件前自动弹出提示窗口
2007/04/18 PHP
php minixml详解
2008/07/19 PHP
php实现cc攻击防御和防止快速刷新页面示例
2014/02/13 PHP
PHP实现的Redis多库选择功能单例类
2017/07/27 PHP
Laravel关联模型中过滤结果为空的结果集(has和with区别)
2018/10/18 PHP
PHP递归统计系统中代码行数
2019/09/19 PHP
jquery原创弹出层折叠效果点击折叠弹出一个层
2014/03/12 Javascript
js身份证判断方法支持15位和18位
2014/03/18 Javascript
浅谈关于JavaScript API设计的一些建议和准则
2015/06/24 Javascript
Bootstrap框架动态生成Web页面文章内目录的方法
2016/05/12 Javascript
JavaScript实现的select点菜功能示例
2017/01/16 Javascript
Ionic+AngularJS实现登录和注册带验证功能
2017/02/09 Javascript
jQuery快速高效制作网页交互特效
2017/02/24 Javascript
详谈jQuery中的一些正则匹配表达式
2017/03/08 Javascript
Vue如何获取数据列表展示
2019/12/11 Javascript
JavaScript实现指定数量的并发限制的示例代码
2020/03/10 Javascript
详解JavaScript之Array.reduce源码解读
2020/11/01 Javascript
Python3.5装饰器典型案例分析
2019/04/30 Python
python射线法判断检测点是否位于区域外接矩形内
2019/06/28 Python
python3 assert 断言的使用详解 (区别于python2)
2019/11/27 Python
Python阶乘求和的代码详解
2020/02/14 Python
Win10环境中如何实现python2和python3并存
2020/07/20 Python
python获取时间戳的实现示例(10位和13位)
2020/09/23 Python
python利用platform模块获取系统信息
2020/10/09 Python
python 中 .py文件 转 .pyd文件的操作
2021/03/04 Python
乐天旅游台湾网站:Rakuten Travel TW
2017/06/01 全球购物
JAVA招聘远程笔试题
2015/07/23 面试题
2014年教师学期工作总结
2014/11/08 职场文书
2014年信息中心工作总结
2014/12/17 职场文书
2015年师德师风自我评价范文
2015/03/05 职场文书
2015年银行工作总结范文
2015/04/01 职场文书
病危通知单
2015/04/17 职场文书
工程服务质量承诺书
2015/04/29 职场文书
2016大学生求职自荐信范文
2016/01/28 职场文书
Python开发五子棋小游戏
2022/04/28 Python