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 全面解析各种浏览器网页中的JS 执行顺序
Feb 17 Javascript
jQuery中调用WebService方法小结
Mar 28 Javascript
JS动态获取当前时间,并写到特定的区域
May 03 Javascript
Javascript闭包用法实例分析
Jan 23 Javascript
jquery实现用户信息修改验证输入方法汇总
Jul 18 Javascript
在AngularJS中使用jQuery的zTree插件的方法
Apr 21 Javascript
总结Javascript中数组各种去重的方法
Oct 04 Javascript
js使用原型对象(prototype)需要注意的地方
Aug 28 Javascript
JavaScript判断日期时间差的实例代码
Mar 01 Javascript
ES6 Class中实现私有属性的一些方法总结
Jul 08 Javascript
vue选项卡切换登录方式小案例
Sep 27 Javascript
利用uni-app生成微信小程序的踩坑记录
Apr 05 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
node.js实现复制文本到剪切板的功能
Jan 23 #Javascript
jQuery 全选 全不选 事件绑定的实现代码
Jan 23 #Javascript
You might like
DC这些乐高系列动画电影你看过几部?
2020/04/09 欧美动漫
怎样辨别一杯好咖啡
2021/03/03 新手入门
对text数据类型不支持代码页转换 从: 1252 到: 936
2011/04/23 PHP
PHP使用递归生成文章树
2015/04/21 PHP
php压缩文件夹最新版
2018/07/18 PHP
JavaScript Eval 函数使用
2010/03/23 Javascript
(jQuery,mootools,dojo)使用适合自己的编程别名命名
2010/09/14 Javascript
javascript利用控件对windows的操作实现原理与应用
2012/12/23 Javascript
js 采用delete实现继承示例代码
2014/05/20 Javascript
jQuery老黄历完整实现方法
2015/01/16 Javascript
js实现点击链接后窗口缩小并居中的方法
2015/03/02 Javascript
jQuery语法小结(超实用)
2015/12/31 Javascript
javascript基础知识
2016/06/07 Javascript
jQuery leonaScroll 1.1 自定义滚动条插件(推荐)
2016/09/17 Javascript
基于JSON数据格式详解
2017/08/31 Javascript
vue-cli 构建骨架屏的方法示例
2018/11/08 Javascript
[48:47]VGJ.S vs NB 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
【Python】Python的urllib模块、urllib2模块批量进行网页下载文件
2016/11/19 Python
Python实现按学生年龄排序的实际问题详解
2017/08/29 Python
Python脚本完成post接口测试的实例
2018/12/17 Python
如何利用Python分析出微信朋友男女统计图
2019/01/25 Python
python 多进程队列数据处理详解
2019/12/23 Python
通过python连接Linux命令行代码实例
2020/02/18 Python
Python使用xpath实现图片爬取
2020/09/16 Python
HTML5+CSS3:3D展示商品信息示例
2017/01/03 HTML / CSS
Canvas实现保存图片到本地的示例代码
2018/06/28 HTML / CSS
报纸媒体创意广告词
2014/03/17 职场文书
2014客服代表实习自我鉴定
2014/09/18 职场文书
县人大领导班子四风对照检查材料思想汇报
2014/10/09 职场文书
奖学金感谢信
2015/01/21 职场文书
小学生组织委员竞选稿
2015/11/21 职场文书
优秀范文:《但愿人长久》教学反思3篇
2019/10/24 职场文书
go语言求任意类型切片的长度操作
2021/04/26 Golang
MySQL子查询中order by不生效问题的解决方法
2021/08/02 MySQL
Oracle安装TNS_ADMIN环境变量设置参考
2021/11/01 Oracle
Tomcat项目启动失败的原因和解决办法
2022/04/20 Servers