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 Math对象
Aug 13 Javascript
利用JS重写Cognos右键菜单的实现代码
Apr 11 Javascript
jQuery插件实现表格隔行换色且感应鼠标高亮行变色
Sep 22 Javascript
javascript实现鼠标拖动改变层大小的方法
Apr 30 Javascript
js实现文本框选中的方法
May 26 Javascript
JavaScript、jQuery与Ajax的关系
Jan 24 Javascript
JS获取和修改元素样式的实例代码
Aug 06 Javascript
AngularJs上传前预览图片的实例代码
Jan 20 Javascript
AngularJS实现的回到顶部指令功能实例
May 17 Javascript
解决layui上传文件提示上传异常,实际文件已经上传成功的问题
Aug 19 Javascript
webpack 开发和生产并行设置的方法
Nov 08 Javascript
Vue父组件向子组件传值以及data和props的区别详解
Mar 02 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
用定制的PHP应用程序来获取Web服务器的状态信息
2006/10/09 PHP
php中截取中文字符串的代码小结
2011/07/17 PHP
php利用iframe实现无刷新文件上传功能的代码
2011/09/29 PHP
比较简单的百度网盘文件直链PHP代码
2013/03/24 PHP
php实现图片缩略图的方法
2016/03/29 PHP
php使用curl实现简单模拟提交表单功能
2017/05/15 PHP
Laravel5框架自定义错误页面配置操作示例
2019/04/17 PHP
编写高效jQuery代码的4个原则和5个技巧
2014/04/24 Javascript
js实现飞入星星特效代码
2014/10/17 Javascript
原生javascript实现图片无缝滚动效果
2016/02/12 Javascript
整理关于Bootstrap表单的慕课笔记
2017/03/29 Javascript
JavaScript实现前端实时搜索功能
2020/03/26 Javascript
Nodejs实现文件上传的示例代码
2017/09/26 NodeJs
利用vue+elementUI实现部分引入组件的方法详解
2017/11/22 Javascript
微信小程序配置服务器提示验证token失败的解决方法
2019/04/03 Javascript
微信小程序实现商城倒计时
2020/11/01 Javascript
如何解决日期函数new Date()浏览器兼容性问题
2019/09/11 Javascript
解决layui-table单元格设置为百分比在ie8下不能自适应的问题
2019/09/28 Javascript
vue中更改数组中属性,在页面中不生效的解决方法
2019/10/30 Javascript
python创建线程示例
2014/05/06 Python
Python实现快速多线程ping的方法
2015/07/15 Python
Python实现计算最小编辑距离
2016/03/17 Python
利用TensorFlow训练简单的二分类神经网络模型的方法
2018/03/05 Python
python twilio模块实现发送手机短信功能
2019/08/02 Python
python绘制玫瑰的实现代码
2020/03/02 Python
python保留格式汇总各部门excel内容的实现思路
2020/06/01 Python
Python如何将装饰器定义为类
2020/07/30 Python
Python函数__new__及__init__作用及区别解析
2020/08/31 Python
Selenium环境变量配置(火狐浏览器)及验证实现
2020/12/07 Python
Pretty Green美国:英式摇滚服饰风格代表品牌之一
2019/01/23 全球购物
物流合作计划书
2014/01/10 职场文书
献爱心倡议书
2014/04/14 职场文书
责任书格式范文
2014/07/28 职场文书
三严三实学习心得体会
2014/10/13 职场文书
2014年财务个人工作总结
2014/12/08 职场文书
天河观后感
2015/06/11 职场文书