★页面展示

★属性

属性

说明

默认值

div

Object

jQuery对象

$('body')

width

Number

控件的宽度

auto

height

Number

控件的高度

auto

title

String

弹框的头

‘提示’

content

String

弹框的内容

iframeUrl

String

弹出iframe的路径

offsetTop

Number||String

绝对定位top

值:

top,bottom,数字

居中

offsetLeft

Number||String

绝对定位left

值:

left,right,数字

居中

isDrop

Boolean

是否可拖动

true(可拖动)

btnGroupe

Array[Object]

脚部的按钮,属性:

word:(String)按钮的文字

className:(String)按钮的class,提供grey,green,red,blue

onClick:(Function)按钮的点击事件

className

控件class

 

★方法

方法

参数

描述

返回值

Create()

创建弹出层

Open()

打开弹框

Close()

关闭弹框

FastOpen()

快速打开

FastClose()

快速关闭

SetWidth(width)

width:(Number)

设置控件宽度

SetHeight(height)

height:(Number)

设置控件内容高度

Refresh()

 

如果是iframe,则刷新

SetTop()

 

弹框置顶

SetMiddle(width,height)

width:(Number)

height:(Number)

设置弹框宽高,并居中

SetPosition(offsetTop, offsetLeft)

offsetTop:同data的offsetTop

offsetLeft:同data的offsetLeft

设置弹框的位置,不传值默认是初始化传入的值

 

★事件回调

方法

参数

描述

返回值

onCloseFun()

关闭弹窗事件

 

★示例

var Popup =  new ZJ.JIECL.UI.Popup({
// iframeUrl:"http://www.baidu.com",
content:'22',
width:800,
height:600,
btnGroupe:[{
word:'取消',
className:'grey',
onClick:function(){
Popup.Close();
}
},{
word:'确定',
onClick:function(){
Popup.Open();
}
}],
offsetTop:100,
onCloseFun:function(){
console.log(1)
}
});
Popup.Open();

★源码

Js源码

Css源码

基于jQuery的控件:弹框的更多相关文章

  1. 基于Jquery 简单实用的弹出提示框

    基于Jquery 简单实用的弹出提示框 引言: 原生的 alert 样子看起来很粗暴,网上也有一大堆相关的插件,但是基本上都是大而全,仅仅几句话可以实现的东西,可能要引入好几十k的文件,所以话了点时间 ...

  2. 基于jQuery鼠标点击弹出登陆框效果

    基于jQuery鼠标点击弹出登陆框效果.这是一款扁平样式风格的jQuery弹出层登陆框特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <input type=" ...

  3. jQuery树形控件zTree使用小结

    作者:Fonour 字体:[增加 减小] 类型:转载 时间:2016-08-02我要评论 这篇文章主要为大家详细介绍了jQuery树形控件zTree使用方法,zTree树插件的基本使用方法,感兴趣的小 ...

  4. Jquery获得控件值的方法

    一 Jquery获得服务器控件值的方法 由于ASP.NET网页运行后,服务器控件会随机生成客户端id,jquery获取时候不太好操作,google了下,总结有以下3种方法: 服务器控件代码:<a ...

  5. 根据条件决定My97DatePicker日期控件弹出的日期格式

    代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <tit ...

  6. jquery时间控件

    jQuery 时间控件推荐 博客分类: jQuery 时间控件   My97DatePicker  My97DatePicker是一个更全面,更人性化,并且速度一流的日期选择控件.具有强大的日期范围限 ...

  7. Web控件文本框Reset的功能

    在前一篇中<怎样实现Web控件文本框Reset的功能>http://www.cnblogs.com/insus/p/4120889.html Insus.NET只实现了文本框的功能.单个或 ...

  8. jQuery操作控件

    在项目中添加前台控件radio,操作两个div的显示和隐藏,其实是一个很简单的问题,但是费了老大劲才完成,也就是jQuery操作控件的一些基础知识.方法有三种,简单介绍: 1.给元素设置style属性 ...

  9. 精确到秒的JQuery日期控件

    项目中需要用到精确到秒的日期控件,到网上搜了一下,发现有一个JQuery控件可以实现该功能---TimerPicker.但是官网上没有提供该控件的完整Demo,而且没有提供汉化包,所以自己汉化了一下, ...

随机推荐

  1. 【转】一文掌握 Linux 性能分析之 CPU 篇

    [转]一文掌握 Linux 性能分析之 CPU 篇 平常工作会涉及到一些 Linux 性能分析的问题,因此决定总结一下常用的一些性能分析手段,仅供参考. 说到性能分析,基本上就是 CPU.内存.磁盘 ...

  2. docker load 镜像时出现:open /var/lib/docker/tmp/docker-import-500852078/repositories: no such file or dir

    网上下载了一些镜像的压缩包,使用docker load的时候会出现如下错误: open /var/lib/docker/tmp/docker-import-500852078/repositories ...

  3. C++头文件用<>还是“” 以及 要加.h还是不加 的问题

    1.C++头文件用<>包含还是” “? 答:用<>包含,编译器会先在系统目录下搜索: 用” ” 包含,编译器会先在用户目录下搜索. 所以,如果使用系统标准库,要使用<&g ...

  4. 简单的C#网络爬虫

    Source Code: http://download.csdn.net/download/qdalong/10271880 这是爬取网页内容,像是这对大家来说都是不难得,但是在这里有一些小改动,代 ...

  5. .Net Core---- WebApi生成Swagger接口文档

    1. Swagger是什么? Swagger 是一个规范和完整的框架,用于生成.描述.调用和可视化 RESTful 风格的 Web 服务.总体目标是使客户端和文件系统作为服务器以同样的速度来更新.文件 ...

  6. Mysql的子查询相关知识,少但是精

    Mysql子查询 概念分析: 根据相关性分: (1)不相关子查询:一条Sql语句中含有多条SELECT语句,先执行子查询,再执行外查询,子查询可对立运行 关键字:(1)先子查询,再外查询 (2)可以对 ...

  7. matlab读取图片的异常表现

    在对人脸图片进行对齐时,发现有两张人脸图片一直检测不到人脸,但这两张图片中的人脸明明很好检测(证件照),经过 排查,最终发现问题所在:图片的格式不对. img = imread("**.jp ...

  8. Linux安装docker

    1.检查内核版本,必须是3.10及以上 uname ‐r 2.安装docker yum install docker 3.输入y确认安装 4.启动docker [root@localhost ~]# ...

  9. spring MVC 项目 WEB-INF下的jsp不能加载css文件

    一.项目目录 二.解决方法(已解决) 1. jsp文件加入 <link href="<c:url value="/css/main.css" />&qu ...

  10. [转] 使用Node.js实现简易MVC框架

    在使用Node.js搭建静态资源服务器一文中我们完成了服务器对静态资源请求的处理,但并未涉及动态请求,目前还无法根据客户端发出的不同请求而返回个性化的内容.单靠静态资源岂能撑得起这些复杂的网站应用,本 ...