（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. css012 css布局简介

    css012  css布局简介 一.    网页布局的类型 网页布局的类型 1.固定宽度 2.流式 3.相应式web设计 二.    如何进行css布局 1.强大的<div>标签 网页的h ...

  2. rdesktop in linux

    rdesktop -f -a 16 -u administrator -p passwrod feelamcheung 192.168.0.2:8080

  3. zabbix搭建

    首先创建zabbix组和用户 groupadd zabbix useradd -g zabbix zabbix mkdir -p /app/local/zabbix#然后创建zabbix编译安装目录 ...

  4. easyUI datagrid view扩展

    //扩展easyuidatagrid无数据时显示界面 var emptyView = $.extend({}, $.fn.datagrid.defaults.view, { onAfterRender ...

  5. eclipse自动部署问题

    1. 使用myeclipse自动部署的方法(使用myeclipse 2015自动部署有问题,待解决)(换成2014的便可以自动部署): 1.Window->preferences->Mye ...

  6. Java数据结构——链表-单链表

    <1>链表 <2>引用和基本类型 <3>单链表 //================================================= // Fil ...

  7. fcc的中级算法题

    核心提示:这是网上开源编程学习项目FCC的javascript中级编程题(Intermediate Algorithm Scripting(50 hours)),一共20题.建议时间是50个小时,对于 ...

  8. 一种nodejs的MVC框架

    mvc会针对请求进行分发,分发一般有controller(针对模块),action(针对模块中的方法),args(请求的参数). 1.先对http请求的url进行设置,解析url中的各种参数: //c ...

  9. GLSL Debugger的姿势

    https://developer.apple.com/library/mac/documentation/GraphicsImaging/Conceptual/OpenGLShaderBuilder ...

  10. HighCharts学习笔记（一）HighCharts入门

    一.HighCharts简介 Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学习.个人网站 ...