1.首先在网上下载jquery.leanModal.min.js，添加到你的页面
参考网址：
https://blog.csdn.net/NTDDLIN...

LeanModal.js下载地址：

http://leanmodal.finelysliced...

2.在你是css文件里编写模态框的样式

3.编写在模态框出现的内容，开始设置内容为不可见，就是 display：none（样式内容省略）

4.点击你要出现弹窗的元素 添加a标签的href=“你编写的模态框的id”

5.在js文件里添加属性
top：属性是指离上边框的距离
overlay：指的是弹框的背景透明度（值越大就越不透明）

6.效果

jQuery插件之——弹窗框（模态框）leanModal的更多相关文章

  1. 从头开始一步一步实现EF6+Autofac+MVC5+Bootstarp极简前后台ajax表格展示及分页（二）前端修改、添加表格行点击弹出模态框

    在前一篇中,由于不懂jquery,前端做的太差了,今天做稍做修改,增加一个跳转到指定页面功能,表格行点击样式变化.并且在表格中加入bootstarp的按钮组,按钮点击后弹出模态框,须修改common, ...

  2. Ajax发送请求等待时弹出模态框等待提示

    主要的代码分为两块,一个是CSS定义模态框,另一个是在Ajax中弹出模态框. 查看菜鸟教程中的模态框教程demo,http://www.runoob.com/try/try.php?filename= ...

  3. jQuery练习：表单模态框

    代码:基于事件冒泡原理和事件委托 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta cha ...

  4. bootstrap弹出模态框会给body加padding的解决方法

    bootstrap弹出模态框会给body加padding,导致页面缩放的解决方法: 在页面或是css文件里加上($paddingSize为less变量,需要改成像素或是其他单位,如12px,1rem) ...

  5. JavaScript：用JS实现加载页面前弹出模态框

    用JS实现加载页面前弹出模态框 主要的JavaScript 代码是: <script> //加载模态框 $('#myModal').modal(); $(document).ready(f ...

  6. jQuery点击弹出层，弹出模态框，点击模态框消失

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 3 ...

  7. bootstrap-table：操作栏点击编辑按钮弹出模态框修改数据

    核心代码: columns: [ { checkbox:true //第一列显示复选框 }, ... { field: 'fail_num', title: '失败数' }, { field: 'op ...

  8. jQuery插件实现select下拉框左右选择_交换内容（multiselect2side）

    效果图: 使用jQuery插件---multiselect2side做法: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio ...

  9. jquery删除记录弹出提示框

    来自于<jquery权威指南> ------------------- 点击删除时,弹出提示框,并做相应的删除确定或取消 完整代码如下: <!DOCTYPE html PUBLIC ...

随机推荐

  1. BUUCTF平台：RSA

    RSA import gmpy2 def Decrypt(c,e,p,q): L=(p-1)*(q-1) d=gmpy2.invert(e,L) n=p*q m=gmpy2.powmod(c,d,n) ...

  2. EAM(Enterprise Asset Management)企业资产管理系统

    EAM (Enterprise Asset Management)的缩写,EAM系统是指企业资产管理系统. EAM系统是在资产比重较大的企业,在资产建设.维护中减少维护成本,提高资产运营效率,通过现代 ...

  3. [CSP-S模拟测试]:Star Way To Heaven（最小生成树Prim）

    题目描述 小$w$伤心的走上了$Star\ way\ to\ heaven$. 到天堂的道路是一个笛卡尔坐标系上一个$n\times m$的长方形通道(顶点在$(0,0)$和$(n,m)$),小$w$ ...

  4. shell cp拷贝的用法

    个人觉得这个记录的比较全 自己查阅: cp [options] <source file or directory> <target file or directory> 或 ...

  5. Linux下的tar压缩解压命令

    tar  这五个是独立的命令,压缩解压都要用到其中一个,可以和别的命令连用但只能用其中一个. -c: 建立压缩档案-x:解压-t:查看内容-r:向压缩归档文件末尾追加文件-u:更新原压缩包中的文件 下 ...

  6. 解决Ubuntu与Windows双系统时间不同步问题

    目录 1.Windows修改法 1.1设置UTC 1.2恢复LocalTime 2.Ubuntu修改法 2.1设置LocalTime 2.2恢复UTC 切换系统后,往往发现时间差了8小时.这恰恰是北京 ...

  7. javaIO流(四)--输入与输出支持

    一.打印流 如果现在要想通过程序实现内容的输出,核心的本质一定要依靠OutputStream类来支持但是OutputStream类有一个最大的缺点,这个类的数据输出操作功能有限,所有的数据一定要转为字 ...

  8. tp5 之 "No input file specified

    tp5 之 "No input file specified" 问题 通过"域名/模块/控制器/方法"这样的方式访问的时候,浏览器输出如下: 直接通过" ...

  9. this关键字与super关键字区别

        this super 1 访问属性 访问本类中属性,如果本类中没有此属性,就从父类继承过来的属性中查找 (遵循就近原则) 访问父类中的属性 2 调用方法 访问本类中方法 直接访问父类中方法 3 ...

  10. springCloud的使用03-----服务消费者(feign)

    1 创建springboot项目,引入jar依赖 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi=& ...