本文实例讲述了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 】

相关推荐： 如何用AI帮你把自己的生活经历写成一个有趣的故事？  Win11搜索不到蓝牙耳机怎么办 Win11蓝牙驱动更新修复【详解】  Laravel如何优化应用性能？（缓存和优化命令）  Laravel如何安装使用Debugbar工具栏_Laravel性能调试与SQL监控插件【步骤】  PHP 500报错的快速解决方法  Win11怎么关闭透明效果_Windows11辅助功能视觉效果设置  JavaScript Ajax实现异步通信  黑客入侵网站服务器的常见手法有哪些？  Laravel怎么上传文件_Laravel图片上传及存储配置  Laravel表单请求验证类怎么用_Laravel Form Request分离验证逻辑教程  文字头像制作网站推荐软件,醒图能自动配文字吗？  Laravel如何设置定时任务（Cron Job）_Laravel调度器与任务计划配置  php在windows下怎么调试_phpwindows环境调试操作说明【操作】  Laravel如何创建自定义中间件？（Middleware代码示例）  Edge浏览器怎么启用睡眠标签页_节省电脑内存占用优化技巧  猪八戒网站制作视频,开发一个猪八戒网站，大约需要多少？或者自己请程序员，需要什么程序员，多少程序员能完成？  Win11任务栏卡死怎么办 Windows11任务栏无反应解决方法【教程】  Laravel怎么生成URL_Laravel路由命名与URL生成函数详解  制作网站软件推荐手机版,如何制作属于自己的手机网站app应用？  Laravel如何发送系统通知_Laravel Notifications实现多渠道消息通知  Laravel怎么配置不同环境的数据库_Laravel本地测试与生产环境动态切换【方法】  如何制作新型网站程序文件,新型止水鱼鳞网要拆除吗？  Laravel如何配置和使用缓存？（Redis代码示例）  轻松掌握MySQL函数中的last_insert_id()  如何快速建站并高效导出源代码？  电视网站制作tvbox接口,云海电视怎样自定义添加电视源？  laravel怎么为应用开启和关闭维护模式_laravel应用维护模式开启与关闭方法  高端企业智能建站程序：SEO优化与响应式模板定制开发  php 三元运算符实例详细介绍  Internet Explorer官网直接进入 IE浏览器在线体验版网址  南京网站制作费用,南京远驱官方网站？  大连企业网站制作公司,大连2025企业社保缴费网上缴费流程？  Java解压缩zip - 解压缩多个文件或文件夹实例  Android自定义控件实现温度旋转按钮效果  edge浏览器无法安装扩展 edge浏览器插件安装失败【解决方法】  Laravel怎么实现模型属性的自动加密  如何基于云服务器快速搭建网站及云盘系统？  HTML5空格和margin有啥区别_空格与外边距的使用场景【说明】  音响网站制作视频教程,隆霸音响官方网站？  零服务器AI建站解决方案：快速部署与云端平台低成本实践  Laravel如何获取当前登录用户信息_Laravel Auth门面使用与Session用户读取【技巧】  大连 网站制作,大连天途有线官网？  Laravel数据库迁移怎么用_Laravel Migration管理数据库结构的正确姿势  非常酷的网站设计制作软件,酷培ai教育官方网站？  javascript日期怎么处理_如何格式化输出  夸克浏览器网页跳转延迟怎么办 夸克浏览器跳转优化  Laravel Blade组件怎么用_Laravel可复用视图组件的创建与使用  java获取注册ip实例  如何快速启动建站代理加盟业务？  Linux系统命令中tree命令详解