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. TestComplete 14 百度网盘下载

    TestComplete 14 百度网盘下载 链接:https://pan.baidu.com/s/1g3imm9zFOCKnx5qqtUMl4g 二维码:

  2. vue搭配的UI框架 pc端 + 移动端

    PC桌面端UI框架: 1,iview      (最新,用户评分高功能多炫酷 解决和避免了其他UI框架出现的一些小问题) 2, bootstrap  (使用用户最多样式死板没特色) 3,Element ...

  3. 老牌激活工具– Microsoft Toolkit 2.4.3 + 详细图文教程【转】

    老牌激活工具-- Microsoft Toolkit 2.4.3 + 详细图文教程 windowsToolkit是一个一键激活MS Office 2010的工具.原理就是利用KMS来激活,不是新的激活 ...

  4. 报错记录（xml抬头报错）

    报错记录(xml抬头报错) Referenced file contains errors (http://www.springframework.org/schema/beans/spring-be ...

  5. 关系型数据库MySQL(三)_触发器

    简介 用来给保证数据完整性的一种方法,经常用于加强数据的完整性: 是与表事件相关的特殊的存储过程,与存储过程的唯一区别是触发器不能执行execute语句调用,而是在用户执行SQL语句时自动触发执行 执 ...

  6. 关于列表倒序输出的几种方法——python第7天

    项目:将列表li1 = [1, 6, 4, 3, 7, 9]倒序输出为[9, 7, 6, 4, 3, 1] li2 = ['a', 'm', 's', 'g']倒序输出为['g', 's', 'm', ...

  7. str方法

    'capitalize', 'casefold', 'center', 'count', 'encode', 'endswith', 'expandtabs', 'find', 'format', ' ...

  8. 创建调用Consul的客户端项目

    创建调用Consul的客户端项目 创建项目 源码 Github仓库:https://github.com/sunweisheng/spring-cloud-example

  9. 如何使用Charles对手机进行抓包

    步骤:(如下为ios步骤,安卓类似) 1)Mac安装Charles,保证手机与电脑在同一wifi(若没有WiFi时,Mac.MacBook,etc 自带热点功能) 2)在手机当前连接的wifi设置里配 ...

  10. USACO 2014 US Open Odometer /// 数位DP

    题目大意: 给定区间 l r 求得区间中有多少个数 数的各个数位里出现最多次的数>=数的长度的一半 如2233 3334 枚举k在数中出现次数在一半以上 那么求出的所有方案数中应该减去 两个数各 ...