JQuery simpleModal插件的使用-遁地龙卷风
(0)写在前面
jquery、simpleModal、浏览器这三者的兼容性,不仅显示在报错上,还体现在所呈现的效果不是预期上。
说一下我的环境
jquery-1.8.3.js
jquery.simplemodal.js 1.4.4
chrome49
去官网下载simpleModal,可以省去很多麻烦,比如名子一样但内容不一样,说多了都是泪啊
(1)快速入手
导入顺序
<script type="text/javascript" src="jquery-1.8.3.js" ></script>
<script type="text/javascript" src="jquery.simplemodal.js" ></script>
将下列代码黏贴到你的html文件
<body><div id="lol" style="border:1px solid red;display:none"><p>很好,你可以继续看下去了</p><button type="button" class="simplemodal-close">关 闭</button></div> <script> $(function() { $('#lol').modal(); }); </script>
</body>
如果你看到lol元素在浏览器视口的位置是,左右居中,上下居中,点击关闭按钮隐藏,浏览器没报错,可以继续了。
(1)详细介绍
继续以往的观点,这里不是JQuery官网
说一些比较常见的,新鲜的东西,了解这些,你就可以完成大部分工作,并知道怎么找到自己不知道的
有兴趣的的小伙伴可以通过debug查看元素信息
(a) $.modal
$.modal("<div>123</div>");
自己看效果
(b)传递参数
可以这样使用
$('#lol').modal({})
对象里可以放入以下参数,单不限于以下参数
position: ['0']
数组里可以放入两个参数,指定top,left的值(不是lol的)
只有一个时,指定top
overlayId: 'osx-overlay',
opacity: 75,
overlayClose: true,
overlayId: 'osx-overlay' 指定simpleModal框架自动创建的div的id名,你将获得控制权,注意,你需要手动的加上这个样式,最好在给他指定一个非白色的背景色
opacity: 75 osx-overlay所代表元素显示时,内容的透明度
overlayClose: true osx-overlay所代表元素被点击时,是否回到上一个状态,看到的现象是lol所代表的元素不可见了。
onOpen:
onClose:
两个属性可以绑定函数,覆盖默认的显示、关闭函数
(c)不显示
sampleModal会为含有类为simplemodal-close的元素自动绑定关闭行为,列如
<button type="button" class="simplemodal-close">关 闭</button>
(2)综合练习
style样式
<style type="text/css">#osx-overlay{background-color:black;}
</style>
body区域(含js)
<body><div id="lol" style="border:1px solid red;display:none"><p>遁地龙卷风</p><button type="button" class="simplemodal-close">关 闭</button></div>
</body>
<script>$(function() {$('#lol').modal({position: ['0'],overlayId: 'osx-overlay',opacity: 75, position: ['0'],overlayClose: true,}); });
</script>
转载于:https://www.cnblogs.com/resolvent/p/5822513.html
JQuery simpleModal插件的使用-遁地龙卷风相关推荐
- JQuery data方法的使用-遁地龙卷风
(-1)说明 我用的是chrome49,这个方法涉及到JQuery版本问题,我手里有3.0的,有1.9.1,后面将1.9.1及其以前的称为低版本,3.0称为高版本 测试例子用到的showMessage ...
- Jquery实现大于等于且小于等于-遁地龙卷风
jq 的slice方法能更好实现 做合并单元格的功能,如下图所示 为了达到上述效果,需要先获取包括起始行和结束行的tr $("tr:eq("+index_startTr+" ...
- jquery toggle方法使用出错?请看这里-遁地龙卷风
这个函数在1.9之前和1.9之后的用法大不相同 1 1.9之间,用于点击元素时函数的轮流执行 toggle(function(){alert(1);//1,3,5,7...},function(){a ...
- 超强1000个jquery极品插件!(连载中。。。。最近更新20090710)
花N长时间积累的Jquery插件,希望大家喜欢.大家还有什么新的插件,请留言,我们一并收录. 感谢大家的支持. ++++++++++++++++++++++++++++++++++++++++++++ ...
- 超强1000个jquery极品插件!(感觉好强大,转载一下)
花N长时间积累的Jquery插件,希望大家喜欢.大家还有什么新的插件,请留言,我们一并收录. 感谢大家的支持. ++++++++++++++++++++++++++++++++++++++++++++ ...
- 超强1000个jquery极品插件!
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ accordion类 +++++++++++++ ...
- 超强1000个jquery极品插件!(连载中。。。。最近更新20100127)
1.导航类 (1) Horizontal accordion: jQuery 基于jQuery开发,非常简单的水平方向折叠控件. 二手图书 二手书 特价书 旧书网 (2)jQuery-Horizont ...
- 1000个jquery极品插件
花N长时间积累的Jquery插件,希望大家喜欢.大家还有什么新的插件,请留言,我们一并收录. 感谢大家的支持. 花N长时间积累的Jquery插件,希望大家喜欢.大家还有什么新的插件,请留言,我们一并收 ...
- 超强1000个jquery极品插件
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ accordion类 +++++++++++++ ...
- 超强1000个jquery极品插件!(转)
花N长时间积累的Jquery插件,希望大家喜欢.大家还有什么新的插件,请留言,我们一并收录. 感谢大家的支持. ++++++++++++++++++++++++++++++++++++++++++++ ...
最新文章
- vimproc_mac.so” is not found
- eclipse ssh连接git an error_JSP+SSH+Mysql实现的学生管理系统
- 【技术好文转载】未来技术前瞻
- 四部门联合印发《常见类型移动互联网应用程序必要个人信息范围规定》
- 软件工程第四周作业之四则运算-C#实现
- [NOTE] sqli-labs Basic Challenges
- android shell检查是否锁屏_ADB获取手机屏幕的状态(点亮与否)以及ADB点击事件基本操作...
- idea 切换git仓库_Idea切换git分支及合并
- 程序员如何避免半途而废?
- Anaconda python安装使用
- 每日一道剑指offer-替换空格
- 快逸报表(润乾报表使用)(v4 版本)
- 在编辑word时,如何查找和替换空格符呢?
- LeetCode 101Pro
- oplayer 文件服务器,iPad万能播放器(OPlayer HD)
- CentOS8 编译安装tsar nagios + nagios-plugins + nsca
- vtkOBBTree——包围盒
- the work directory /tmp/ oracle,Oracle升级问题总结
- 第3章 直流电机的工作原理及特性 学习笔记(一)
- win 10系统搜索计算机,win10系统查找计算器的解决教程