本文实例讲述了jQuery弹出层插件popShow用法。分享给大家供大家参考，具体如下：

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相关内容感兴趣的读者可查看本站专题：《jQuery常用插件及用法总结》、《jquery中Ajax用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

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

# jQuery  # 弹出层  # 插件  # popShow  # jQuery Dialog 弹出层对话框插件  # JQUERY THICKBOX弹出层插件  # jQuery弹出层插件简化版代码下载  # Jquery 弹出层插件实现代码  # 基于jquery的blockui插件显示弹出层  # jquery.artwl.thickbox.js 一个非常简单好用的jQuery弹出层插件  # jQuery插件zoom实现图片全屏放大弹出层特效  # 一个jquery的弹出层的插件  # jQuery boxy弹出层插件中文演示及使用讲解  # js弹出层(jQuery插件形式附带reLoad功能)  # Jquery实现弹出层分享微博插件具备动画效果  # jQuery弹出层插件Lightbox_me使用指南  # Jquery弹出层插件ThickBox的使用方法  # jQuery弹出层插件popShow(改进版)用法示例  # 弹出  # 必填  # 用户登录  # 相关内容  # 感兴趣  # 给大家  # 此项  # 更多关于  # 所述  # 程序设计  # 为空  # 拖拽  # 操作技巧  # 选择器  # 讲述了  # input  # txtUserName  # star  # td  # txtPsw 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： 如何在Windows服务器上快速搭建网站？  Laravel怎么实现验证码功能_Laravel集成验证码库防止机器人注册  详解jQuery停止动画——stop()方法的使用  手机钓鱼网站怎么制作视频,怎样拦截钓鱼网站。怎么办？  如何快速建站并高效导出源代码？  logo在线制作免费网站在线制作好吗,DW网页制作时，如何在网页标题前加上logo？  高性能网站服务器部署指南：稳定运行与安全配置优化方案  如何破解联通资金短缺导致的基站建设难题？  Claude怎样写结构化提示词_Claude结构化提示词写法【教程】  济南网站建设制作公司,室内设计网站一般都有哪些功能？  魔毅自助建站系统：模板定制与SEO优化一键生成指南  微信小程序 五星评分(包括半颗星评分)实例代码  Win11怎么更改系统语言为中文_Windows11安装语言包并设为显示语言  如何在万网利用已有域名快速建站？  香港服务器如何优化才能显著提升网站加载速度？  如何在 React 中条件性地遍历数组并渲染元素  详解MySQL数据库的安装与密码配置  iOS UIView常见属性方法小结  如何在腾讯云服务器快速搭建个人网站？  如何实现建站之星域名转发设置？  韩国服务器如何优化跨境访问实现高效连接？  PHP 500报错的快速解决方法  公司门户网站制作流程,华为官网怎么做？  公司网站制作需要多少钱,找人做公司网站需要多少钱？  阿里云网站搭建费用解析：服务器价格与建站成本优化指南  齐河建站公司：营销型网站建设与SEO优化双核驱动策略  js实现点击每个li节点，都弹出其文本值及修改  打开php文件提示内存不足_怎么调整php内存限制【解决方案】  手机怎么制作网站教程步骤,手机怎么做自己的网页链接？  如何获取上海专业网站定制建站电话？  googleplay官方入口在哪里_Google Play官方商店快速入口指南  如何在云服务器上快速搭建个人网站？  Laravel如何与Vue.js集成_Laravel + Vue前后端分离项目搭建指南  JS去除重复并统计数量的实现方法  头像制作网站在线观看,除了站酷，还有哪些比较好的设计网站？  猎豹浏览器开发者工具怎么打开 猎豹浏览器F12调试工具使用【前端必备】  音响网站制作视频教程,隆霸音响官方网站？  Laravel怎么做数据加密_Laravel内置Crypt门面的加密与解密功能  如何在新浪SAE免费搭建个人博客？  Win11摄像头无法使用怎么办_Win11相机隐私权限开启教程【详解】  如何将凡科建站内容保存为本地文件？  Laravel如何为API编写文档_Laravel API文档生成与维护方法  Laravel怎么在Blade中安全地输出原始HTML内容  如何在Ubuntu系统下快速搭建WordPress个人网站？  邀请函制作网站有哪些,有没有做年会邀请函的网站啊？在线制作，模板很多的那种？  如何解决hover在ie6中的兼容性问题  Android实现代码画虚线边框背景效果  黑客如何利用漏洞与弱口令入侵网站服务器？  JavaScript如何实现路由_前端路由原理是什么  智能起名网站制作软件有哪些,制作logo的软件？