jQuery simpleModal插件的使用介绍

SimpleModal是一个轻量级的jQuery插件，它提供了一个模式对话框发展强大的接口。是一个模态对话框的框架。 SimpleModal使您可以灵活地构建任何你可以设想，而屏蔽相关的跨浏览器问题。

（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> <br> <script><br>　　$(function() <br>　　{<br>　　　　$('#lol').modal(); <br>　　});<br>　</script>
</body>

　如果你看到lol元素在浏览器视口的位置是,左右居中，上下居中，点击关闭按钮隐藏，浏览器没报错，可以继续了。

（1）详细介绍

继续以往的观点，这里不是JQuery官网

说一些比较常见的，新鲜的东西，了解这些，你就可以完成大部分工作，并知道怎么找到自己不知道的

有兴趣的的小伙伴可以通过debug查看元素信息

(a) $.modal

$.modal("<div>123</div>");

自己看效果

(b)传递参数

可以这样使用

$('#lol').modal({<br>})

对象里可以放入以下参数，单不限于以下参数

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插件的使用介绍，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • jQuery simpleModal插件的使用介绍

    SimpleModal是一个轻量级的jQuery插件,它提供了一个模式对话框发展强大的接口.是一个模态对话框的框架. SimpleModal使您可以灵活地构建任何你可以设想,而屏蔽相关的跨浏览器问题. (0)写在前面 jquery.simpleModal.浏览器这三者的兼容性,不仅显示在报错上,还体现在所呈现的效果不是预期上. 说一下我的环境 jquery-1.8.3.js jquery.simplemodal.js 1.4.4 chrome49 去官网下载simpleModal,可以省去很多麻

  • Jquery 数据选择插件Pickerbox使用介绍

    Jquery 数据选择插件Pickerbox使用介绍

    该插件就是为此而生,所以就写了一个. 不过目前并不支持IE6浏览器. 希望大家能多多指教. :) pickerbox 1.0 介绍 pickerbox简称采摘盒子,是基于Jquery的插件,同时也依赖了Ztree3.2,Easyui1.26,及AsyncBox1.4.5.主要为了解决选择多条件的数据. -封装主要插件复杂的使用,关心主要的常用使用. -支持树,导航导向呈现数据. -支持跨iframe获取数据. -灵活支持记录数据. -提供重要事件回调. -兼容IE8以上浏览器. 由于多个插件集成

  • 常用的jquery模板插件——jQuery Boilerplate介绍

    在初次进行jquery插件开发时,我们往往无从下手,当然我们可以按照jquery官方提供的格式进行简单的插件开发,但是很多时候往往不尽完美,一不小心,就造出一个很"烂"的插件:难以维护.难以扩展.使用繁琐.性能不佳...当我们在不断的实践中,慢慢积累下来时,有些问题得到了有效的避免,但也带来了新的问题:在众多纷杂的jquery插件开发模式中,究竟哪一种模式才是最好的呢? 如果能提供一个模板,通过一定的约束和规范为开发者解决在jquery插件开发中的"迷惘"那该多好!

  • 30个最好的jQuery 灯箱插件分享

    30个最好的jQuery 灯箱插件分享

    jQuery 是非常流行的JS框架,其俨然已成了开发者的必备工具,其中的jQuery Lightbox插件更是为广大开发者所喜爱.它惊人的特征之一是jQuery Lightbox插件有很多变化. 下面介绍30个最好的jQuery Lightbox 插件,别忘了收藏它,以防未来的设计中错过它们中的一个. 1. Fancy Zoom (jQuery) 几天前,John重写了Cabel Sasser的FancyZoom,在Prototype和Scriptaculous程序库上.我将它引入到jQuery

  • jQuery的插件列表(2010-1-25更新)

    jQuery Scroll Follow   随屏幕滚动的层       点击查看Demo jScrollPane 自定义滚动条插件   点击查看Demo jQuery树状菜单插件 jqueryflexselect下拉框自动提示 jQuery id标签 - 8种不同的很酷的JQuery菜单例子 jQuery ContextMenu:轻量级JQuery插件,可以自定义右键弹出的菜单 jQuery Flash Plugin-这个 jQuery插件可以让你嵌入Flas***** jQuery Medi

  • jquery select插件异步实时搜索实例代码

    jquery select插件异步实时搜索实例代码

    一.先看看效果. 二.做此插件的原因. 1.数据量过大(几千.几万条),无法一次性全部加载. 2.现有插件各不相同,无法满足功能需求. 3.美观性,可控性不足. 三.如何使用. 1.html和js <select id="unit"></select> <script type="text/javascript" src="/demo/thirdparty/jquery/jquery-1.8.3.min.js">

  • jquery pagination插件实现无刷新分页代码

    jquery pagination插件实现无刷新分页代码

    先把要用到的文件依次进入进来: 复制代码 代码如下: <script src="common/jquery.js" type="text/javascript"></script> <script src="common/jquery.pagination.js" type="text/javascript"></script> <link href="commo

  • jQuery Form插件使用详解_动力节点Java学院整理

    jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地.无侵入地升级HTML表单以支持Ajax.jQuery Form有两个核心方法 -- ajaxForm() 和 ajaxSubmit(), 它们集合了从控制表单元素到决定如何管理提交进程的功能.另外,插件还包括其他的一些方法: formToArray().formSerialize().fieldSerialize().fieldValue().clearForm().clearFields() 和 resetForm()等.

  • 使用jQuery ajaxupload插件实现无刷新上传文件

    项目中会经常用到AJAX无刷新上传图片,但是iframe上传和flash插件都是比较复杂的,所以就找了一个jquery的插件. 代码如下 使用方法如下 <script type="text/javascript"> $(function () { var button = $('#upload'); new AjaxUpload(button, { action: '/upload/imagesAjaxUpload', name: 'upload', onSubmit: f

  • jQuery form插件的使用之处理server返回的JSON， XML，HTML数据

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>jQuery form插件的使用--处理server返回的JSON, XML,HTML数据</title> <meta http-equiv="Content-Type" cont

随机推荐