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. ini操作

    关于C#操作INI文件的总结 INI文件其实是一种具有特定结构的文本文件,它的构成分为三部分,结构如下: [Section1] key = value2 key = value2 …… [Sectio ...

  2. python实现计时器（装饰器）

    1.写一个装饰器,查看函数执行的时间 import time # 装饰器run_time,@run_time加在谁头上,谁就是参数fundef run_time(fun): start_time = ...

  3. arm可以干什么

    ARM开发可以控制各种电机.arm性能很强 ,内存更大, c语言当然可以.ARM是32位的,单片机是8位的,运行速度快很多,最关键的是可以跑操作系统.控制部分的内容ARM当然可以胜任,而且ARM的资源 ...

  4. (2).net体系

    一.C# 和CLR 和.Net Framework 的历史版本对照表 C#版本      CLR版本     Framework版本 1.0 1.0 1.0 1.2 1.1 1.1 2.0 2.0 2 ...

  5. day 97 VUE第一天

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  6. USACO 6.1 章节

    Postal Vans 题目大意 4*n的网格,要经过所有点的有向有环,不重复经过点的路径总数 n<=1000 题解 显然 插头dp 以4为切面 问题是,会发现 超精度 解决呢要么实现高精度,要 ...

  7. 爬取拉勾网所有python职位并保存到excel表格 对象方式

    # 1.把之间案例,使用bs4,正则,xpath,进行数据提取. # 2.爬取拉钩网上的所有python职位. from urllib import request,parse import json ...

  8. java异常不匹配问题

    java的异常处理是为了提高程序健壮性的. 当发生异常的时候,我们把这个异常捕获到,或者throw出去.然后对这些异常的情况进行处理.并且异常发生之后的代码仍然会执行,这样就能提高程序的健壮性.如下 ...

  9. bzoj2582 [Usaco2012Jan]Bovine Alliance

    [Usaco2012Jan]Bovine Alliance Time Limit: 2 Sec Memory Limit: 128 MB Description Bessie and her bovi ...

  10. ubunut 1804 sublime text3

    —– BEGIN LICENSE —– TwitterInc User License EA7E- 1D77F72E 390CDD93 4DCBA022 FAF60790 61AA12C0 A3708 ...