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 相关文章推荐
AppBaseJs 类库 网上常用的javascript函数及其他js类库写的
Mar 04 Javascript
window.location.hash 属性使用说明
Mar 20 Javascript
Jquery中获取iframe的代码
Jan 11 Javascript
jQuery动态添加、删除元素的方法
Jan 09 Javascript
Jquery选择器中使用变量实现动态选择例子
Jul 25 Javascript
JSP基于Bootstrap分页显示实例解析
Jun 12 Javascript
Javascript中arguments对象的详解与使用方法
Oct 04 Javascript
checkbox:click事件触发span元素内容改变的方法
Sep 11 Javascript
express 项目分层实践详解
Dec 10 Javascript
扫微信小程序码实现网站登陆实现解析
Aug 20 Javascript
Vue自定义组件的四种方式示例详解
Feb 28 Javascript
vue项目打包后请求地址错误/打包后跨域操作
Nov 04 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
UTF8编码内的繁简转换的PHP类
2009/07/09 PHP
php中字符查找函数strpos、strrchr与strpbrk用法
2014/11/18 PHP
PHP+MySQL删除操作实例
2015/01/21 PHP
php与c 实现按行读取文件实例代码
2017/01/03 PHP
PHP实现简单日历类编写
2020/08/28 PHP
jquery操作下拉列表、文本框、复选框、单选框集合(收藏)
2014/01/08 Javascript
JS中判断JSON数据是否存在某字段的方法
2014/03/07 Javascript
javascript实现点击商品列表checkbox实时统计金额的方法
2015/05/15 Javascript
JS实现slide文字框缩放伸展效果代码
2015/11/05 Javascript
jQuery插件formValidator自定义函数扩展功能实例详解
2015/11/25 Javascript
JavaScript中输出信息的方法(信息确认框-提示输入框-文档流输出)
2016/06/12 Javascript
vue.js通过路由实现经典的三栏布局实例代码
2018/07/08 Javascript
一些可能会用到的Node.js面试题
2019/06/15 Javascript
[02:49]2018DOTA2亚洲邀请赛主赛事决赛日战况回顾 Mineski鏖战5局夺得辉耀
2018/04/10 DOTA
python二分法实现实例
2013/11/21 Python
用Python实现换行符转换的脚本的教程
2015/04/16 Python
Python与Redis的连接教程
2015/04/22 Python
linux安装python修改默认python版本方法
2019/03/31 Python
django-filter和普通查询的例子
2019/08/12 Python
通过实例解析Python调用json模块
2019/12/11 Python
Python语法之精妙的十个知识点(装B语法)
2020/01/18 Python
浅谈keras中的keras.utils.to_categorical用法
2020/07/02 Python
python map比for循环快在哪
2020/09/21 Python
Python的scikit-image模块实例讲解
2020/12/30 Python
html5指南-2.如何操作document metadata
2013/01/07 HTML / CSS
奥斯汀独木舟和皮划艇:Austin Canoe & Kayak
2018/05/22 全球购物
美国在线打印网站:Overnight Prints
2018/10/11 全球购物
C++面试题目
2013/06/25 面试题
成教自我鉴定
2013/10/27 职场文书
师范应届生语文教师求职信
2013/10/29 职场文书
咖啡店自主创业商业计划书
2014/01/22 职场文书
安全生产承诺书
2014/03/26 职场文书
煤矿班组长竞聘书
2014/03/31 职场文书
千与千寻观后感
2015/06/04 职场文书
详解PHP服务器如何在有限的资源里最大提升并发能力
2021/05/25 PHP
《艾尔登法环》1.03.3补丁上线 碎星伤害调整
2022/04/06 其他游戏