（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>

　　

JQuery simpleModal插件的使用-遁地龙卷风的更多相关文章

  1. JQuery data方法的使用-遁地龙卷风

    (-1)说明 我用的是chrome49,这个方法涉及到JQuery版本问题,我手里有3.0的,有1.9.1,后面将1.9.1及其以前的称为低版本,3.0称为高版本 测试例子用到的showMessage ...

  2. jQuery学习笔记（jquery.simplemodal插件）

    官网地址:http://www.ericmmartin.com/ SimpleModal是一个轻量级的jQuery插件,它为模式窗口的开发提供了一个强有力的接口,可以把它当作模式窗口的框架.Simpl ...

  3. jquery toggle方法使用出错?请看这里-遁地龙卷风

    这个函数在1.9之前和1.9之后的用法大不相同 1 1.9之间,用于点击元素时函数的轮流执行 toggle(function() { alert(1);//1,3,5,7... },function( ...

  4. 30个Jquery灯箱插件

    jQuery 是非常流行的JS框架,其俨然已成了开发者的必备工具,其中的jQuery Lightbox插件更是为广大开发者所喜爱.它惊人的特征之一是jQuery Lightbox插件有很多变化. 下面 ...

  5. 深入学习jQuery自定义插件

    原文地址:jQuery自定义插件学习 1.定义插件的方法 对象级别的插件扩展,即为jQuery类的实例增加方法, 调用:$(选择器).函数名(参数);      $(‘#id’).myPlugin(o ...

  6. [jQuery]jQuery DataTables插件自定义Ajax分页实现

    前言 昨天在博客园的博问上帮一位园友解决了一个问题,我觉得有必要记录一下,万一有人也遇上了呢. 问题描述 园友是做前端的,产品经理要求他使用jQuery DataTables插件显示一个列表,要实现分 ...

  7. 使用jQuery.form插件，实现完美的表单异步提交

    传送门:异步编程系列目录…… 时间真快,转眼一个月快结束了,一个月没写博客了!手开始生了,怎么开始呢…… 示例下载:使用jQuery.form插件,实现完美的表单异步提交.rar 月份的尾巴,今天的主 ...

  8. 为jQuery写插件

    很多场合,我们都会调用jQuery的插件去完成某个功能,比如slider. 如下图,做一个div,通过“$( "#slider" ).slider();”的方式直接将div变成sl ...

  9. bootstrap-简洁实用的jQuery手风琴插件

    前端 <html lang="zh"> <head> <meta charset="UTF-8"> <meta htt ...

随机推荐

  1. C++ STL中vector的内存机制和性能分析

    vecotr是动态数组,顾名思义他可以动态的增加自己的长度. 内存机制: 但是怎样的增加自己的长度? vector有两个函数一个是capacity()返回内存空间即缓冲区的大小,另一个是size()返 ...

  2. 日期String相互转换

    SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");Date endate = sdf.parse(endDate) ...

  3. 使用ultraiso制作启动盘

    1.以管理员方式运行Ultralso 2.点击菜单栏里的“启动”菜单下的“写入硬盘映像”命令,打开“写入硬盘映像”对话框. “硬盘驱动器”里就是选择你要刻录的U盘,这里演示用的是一张数码相机的内存卡. ...

  4. 9月23日JavaScript作业----日期时间选择

    作业二:日期时间选择 <div style="width:600px; height:100px;"> <select id="year"&g ...

  5. JavaWeb学习笔记——访问静态HTML网页

    基础知识: 1.一个标准 的WEB应用,在根目录下必须有一个WEB-INF文件夹,文件夹下必须有一个WEB.xml文件. 2.classes文件夹用来存放编译的class文件. 3.lib文件夹用来存 ...

  6. echosp 销量排行 新增实际价格

    找到lib_goods.php第147行,代码 $sql = 'SELECT g.goods_id, g.goods_name, g.shop_price,g.goods_thumb, SUM(og. ...

  7. OC-id、构造方法

    id 简介 万能指针,能指向任何OC对象,相当于NSObject * id类型的定义 typedef struct objc_object { Class isa; } *id; 使用 // 注意:i ...

  8. mysql]一次主从数据不一致的问题解决过程（）

    问题 要解决问题就是怎么对比不一致,然后在不影响业务的情况下,修复数据不一致的问题,把从库缺少的数据补上 下面是能想到和找到的几个方案 1 从新从0开始同步,虽然对主库的使用没有影响,但是那么大的数据 ...

  9. 【转】Kafka producer原理 (Scala版同步producer)

    转载自:http://www.cnblogs.com/huxi2b/p/4583249.html     供参考 本文分析的Kafka代码为kafka-0.8.2.1.另外,由于Kafka目前提供了两 ...

  10. rehat 出现GDB debuginfo-install 问题处理

    本人使用rhel 6    GDB 调试代码时,出现以下错误: Missing separate debuginfos, use: debuginfo-install glibc-2.12-1.166 ...