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. PWN入门的入门——工具安装

    安装pwntool: 命令行运行: pip install pwntools python import pwn pwn.asm("xor eax,eax") 出现'1\xc0'  ...

  2. jsp的课设1

    记这个为了巩固整个网站的开发流程,java开发太昂贵基本上很少有公司用,不知道学校怎么想的用这个.基本流程适用于任何后台的开发. JDK的安装不提了,Tomcat和Mysql都是用的最新版的,由于是w ...

  3. JavaScript 中的dispatchEvent是怎么用的

    https://zhidao.baidu.com/question/1859896201945858587.html https://www.cnblogs.com/playerlife/archiv ...

  4. bzoj 2242: [SDOI2011]计算器 & BSGS算法笔记

    这题的主要难点在于第三问该如何解决 于是就要知道BSGS是怎样的一种方法了 首先BSGS是meet in the middle的一种(戳下面看) http://m.blog.csdn.net/blog ...

  5. jquery 自定义类

    jQuery自定义类封装: (function ($) { $.DragField = function (arg) { var name = "你好"; //这个是私有变量,外部 ...

  6. jenkins实现手动选择分支构建项目-Git Paramater

    先下载插件: Git Paramater 参照: jenkins-参数化构建(三)插件:Git Parameter https://www.cnblogs.com/zhaojingyu/p/98624 ...

  7. QTP中类的使用（转）

    Call Test Class Tester Dim mvarTesterName,mvarAge,mvarGender                        Sub Class_Initia ...

  8. 利用程序随机构造N个已解答的数独棋盘

    高级软件工程第二次作业:利用程序随机构造N个已解答的数独棋盘,代码如下: package SudokuGame; /** * 解决这个问题使用的是回溯+剪枝的算法 * 基本思想:不断地将每个格子可填入 ...

  9. Oralce分页

    SELECT *FROM ( SELECT TMP_PAGE.*, ROWNUM ROW_ID FROM ( SELECT A . ID AS "id", A .bill_noti ...

  10. Java_3.Java帮助文档

    1.Oracle的在线帮助文档 http://docs.oracle.com/javase/8/docs/api 2.jdk源码内容(包含5个部分) [以下内容参考至:https://blog.csd ...