（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. centos 6 安装

    centos 6 安装步骤  说明: 1.install or upgrade an existing system安装或升级现有系统 2.install system with basic vide ...

  2. python 安装包总结

    PIL安装(Centos6.6) 1. 安装PIL所需的系统库 (centos6.6)yum install zlib zlib-devel -yyum install libjpeg libjpeg ...

  3. web中异步和同步的理解

    普通的B/S模式就是同步,而AJAX技术就是异步,当然XMLHttpReques有同步的选项. 同步:提交请求->等待服务器处理->处理完毕返回.这个期间客户端浏览器不能干任何事. 异步: ...

  4. SVN cleanup操作反复失败解决办法

    今天在更新项目的时候遇到一个问题,按惯例要cleanup才能重新更新.但是很不幸,在cleanup的时候又遇到了问题! 1    svn cleanup failed–previous operati ...

  5. 转：Python K-means代码

    #coding: UTF-8 import pearson_distance from pearson_distance import pearson_distance from math impor ...

  6. ASP------如何使界面布局具有一致外观

    使用布局页或布局块的方法 转载: http://www.runoob.com/aspnet/webpages-layout.html

  7. scrapy1_官网教程

    https://scrapy-chs.readthedocs.io/zh_CN/0.24/intro/tutorial.html 本篇文章主要介绍如何使用编程的方式运行Scrapy爬虫. 在开始本文之 ...

  8. Foundation框架--字典( NSDictionary NSMutableDictionary )

    基础知识 1.字典不允许相同的key,但允许有相同的value. 2,字典是无序的,字典不能排序. 3.字典里的内容是成对存在的,不会出现单数. 4.快速创建的方式只适合不可变字典. 不可变字典 #i ...

  9. Javascript权威指南——第二章词法结构，第三章类型、值和变量，第四章表达式和运算符，第五章语句

    第二章 词法结构 一.HTML并不区分大小写(尽管XHTML区分大小写),而javascript区分大小写:在HTML中,这些标签和属性名可以使用大写也可以使用小写,而在javascript中必须小写 ...

  10. Robot Framework--13 RFS+AutoItLibrary测试web上传下载

    转自:http://blog.csdn.net/tulituqi/article/details/21888059 Selenium2library在我们实际测试web页面的时候基本上已经够用了,不过 ...