（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. matlab和C/C++混合编程--调用opencv

    最近的我们已经将整个项目搭起来了,项目比较复杂.由于我们做的是检索系统,所以我们用asp.net(c#)做了网页,但是算法的实现是在matlab下,所以我们不得不用matlab生成动态链接库dll,然 ...

  2. php实现文件上传下载功能小结

    文件的上传与下载是项目中必不可少的模块,也是php最基础的模块之一,大多数php框架中都封装了关于上传和下载的功能,不过对于原生的上传下载还是需要了解一下的.基本思路是通过form表单post方式实现 ...

  3. 9月13日JavaScript语句循环（100以备奇偶数、100以内与7先关的数、100以内整数的和、10以内阶乘、乘法口诀、篮球弹起高度、64格子放东西）

    3.循环 循环是操作某一个功能(执行某段代码). ①循环四要素: a 循环初始值 b 循环的条件 c 循环状态 d 循环体 ②for循环 a 穷举:把所有的可能性的都一一列出来. b 迭代:每次循环都 ...

  4. Java多线程系列

    一.参考文献 1.:Java多线程系列目录 (一) 基础篇 01. Java多线程系列--“基础篇”01之 基本概念 02. Java多线程系列--“基础篇”02之 常用的实现多线程的两种方式 03. ...

  5. header的安全配置指南

    0x00 背景 在统计了Alexa top 100万网站的header安全分析之后(2012年11月 - 2013年3月 - 2013年11月),我们发现其实如何正确的设置一个header并不是一件容 ...

  6. Nginx环境下http和https可同时访问方法

    给nginx配置SSL证书之后,https可以正常访问,http访问显示400错误,nginx的配置如下: server { listen 80 default backlog=2048; liste ...

  7. 【经典】C++&RPG对战游戏

    博文背景: 还记大二上学期的时候看的这个C++&RPG游戏(博主大一下学期自学的php,涵盖oop内容),一个外校的同学他们大一学的C++,大二初期C++实训要求做一个程序填空,就是这个 RP ...

  8. dedecms标签的sql语句

    {dede:sql sql='Select content from dede_arctype where id=1' titlelen='40′} [field:content/] {/dede:s ...

  9. JAVA数组的典型操作

  10. ElasticSearch之二——集群

    ElasticSearch 集群 首先看下ElasticSearch(ES)的架构: 术语解释: cluster:代表一个集群,集群中有多个节点,其中有一个master节点,master通过选举自动产 ...