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. vue将页面导出成pdf

    npm i jspdf-html2canvas prinOut(){ // 导出pdf let page = document.querySelector('.app-main'); // page ...

  2. Qt/Qte/Qtopia三者的区别

    Qt泛指 Qt software的所有版本的图像界面库,包括 Qt/X11(Unix/Linux),Qt Windows, Qt Mac 等,但这只是相对于二进制来说的.Qt作为一个跨平台的GUI 框 ...

  3. windows10 cortana 不能搜索解决办法

    不太确定是某次系统更新或安装VS软件之后, 发现windows10 cortana 搜索的结果是空白了, 搜索了相关帖子, 试遍所有方法都无效, 最后在联网的情况下, 只用了在powershell中重 ...

  4. UE编辑器

    引用ue的js 下载地址http://pan.baidu.com/s/1gdrQ35L <script type="text/javascript" src="__ ...

  5. python的列表与shell的数组

    python:names=["a","b","c"] shell:names=(a b c)

  6. leetcode-解题记录 771. 宝石与石头

    题目: 给定字符串J 代表石头中宝石的类型,和字符串 S代表你拥有的石头. S 中每个字符代表了一种你拥有的石头的类型,你想知道你拥有的石头中有多少是宝石. J 中的字母不重复,J 和 S中的所有字符 ...

  7. Python中的装饰器,迭代器,生成器

    1. 装饰器 装饰器他人的器具,本身可以是任意可调用对象,被装饰者也可以是任意可调用对象. 强调装饰器的原则:1 不修改被装饰对象的源代码 2 不修改被装饰对象的调用方式 装饰器的目标:在遵循1和2的 ...

  8. ThinkPHP内置标签库原理(Cx标签库)

    任何一个模板引擎的功能都不可能是为你量身定制的,具有一个良好的可扩展 机制也是模板引擎的另外一个考量,Smarty采用的是插件方法来实现扩展,ThinkTemplate由于采用了标签库技术,比Smar ...

  9. for,while,do while语句区别以及常见死循环格式

    1.三种循环语句的区别: do...while循环至少执行一次循环体. 而for,while循环必须先判断条件是否成立,然后决定是否执行循环体语句. for循环和while循环的区别: 如果你想在循环 ...

  10. Scrapy框架——安装以及新建scrapy文件

    一.安装 conda install Scrapy   :之后在按y 表示允许安装相关的依赖库(下载速度慢的话也可以借助镜像源),安装的前提是安装了anaconda作为python ,   测试scr ...