（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. 常见linux命令释义（第四天）——bash部分

    学linux的时候,我跳过了一些很重要的东西.比如分区.还有vim的深入学习.分区没有学习是因为我装的是虚拟机,不知道是什么原因,格式化分区不能正常显示.至于vim,简单的增删改查我已经了解了.能够顺 ...

  2. 初识JSLint及建议JS编码风格

    可能都或多或少的知道JSLint是一个JavaScript的代码质量工具,一个JavaScript语法检查器和校验器,它能分析JavaScript问题并报告它包含的缺点. 被发现的问题往往是语法错误, ...

  3. js004-变量、作用域和内存问题

    js004-变量.作用域和内存问题 4.1 基本类型和引用类型的值 基本类型:简单的数据段 引用类型:可能由多个值构成的对象 五种基本数据类型:undefined.null.boolean.Numbe ...

  4. IP-Address TextBox

    http://www.codeproject.com/Articles/4693/IP-Address-TextBox 可以下载试用效果.个人感觉功能很强大,但输入时让人不太舒服.可以参考. ntro ...

  5. Java——按钮组件：JButton

    import java.awt.Color; import java.awt.Dimension; import java.awt.Font; import java.awt.Point; impor ...

  6. Jetty 简单使用

    Jetty与Tomcat类似,也是一种Servlet引擎,可以用来运行Java Web项目. 其常被嵌入到项目中,以便于开发.测试,以及Demo等项目的运行. 1.作为插件——作为开发.测试时项目运行 ...

  7. Linux下非root用户如何安装软件

    Linux下非root用户如何安装软件 从windows转移到Linux的用户最开始总会有各种不适,因为这种不适最终放弃linux的不在少数.对于这类人只能说可惜,还没有领略到linux的美好就过早放 ...

  8. Ubuntu用作Server时出现乱码的解决方法

    下面给出解决办法: 1.用vi编辑器修改/etc/default/local文件 2.把原来的中文编码替换成下面的 LANG="en_US.UTF-8" LANGUAGE=&quo ...

  9. MVC中的@section

    在前文<MVC中 _ViewStart _Layout Index三个页面中的加载顺序> 中另外指定母版页 Layout.cshtml时...遇到了这个问题.. 报错: 以下各节已定义,但 ...

  10. C#中(int)a和Convert.ToInt32(a)有什么区别

    首先,在 C# 中,int 其实就是 System.Int32,即都是32位的. 其次,(int) 和 Convert.ToInt32 是两个不同的概念,前者是类型转换,而后者则是内容转换,它们并不总 ...