`
huibin
  • 浏览: 754115 次
  • 性别: Icon_minigender_1
  • 来自: 郑州
社区版块
存档分类
最新评论

jqmodal遮罩层的实现

阅读更多

前些天公司的项目中,为了一些特效,要用到遮罩效果。了解了一下,据说jqModal这个插件不错,于是花了一些工夫,学习了一下jqModal这个插件,最终在项目中得到了应用。现在就将jqModal这个插件的使用方法总结一下,希望能够帮助到以后的使用者,^-^。

本篇主要说明一下插件使用中几个要注意的地方。首先看看最简单的html代码,以下就是我们要弹出的遮罩层。

<div class="pop_box" id="pop">
</div>

接下来简单的看看jqModal遮罩层的样式:

.pop_box { 
        background-color:#79A5D1; 
        display:none; 
        height:342px !important; 
        left:50%; 
        margin-left:-250px; 
        padding:5px; 
        position:fixed; 
        top:150px; 
        width:500px; 
        z-index:9999; 
    }

其中比较重要的为jqModal遮罩层的position和z-index属性。为了保证遮罩层在最上边,建议将z-index值设置大些。

最后看下怎么使用jqModal插件

jQuery(document).ready(function() {
    jQuery("#pop").jqm({
        modal: true,
        overlay: 40,
        onShow: function(h) {
            h.w.fadeIn(500);
        },
        onHide: function(h) {
            h.o.remove();
            h.w.fadeOut(500)
        }
    }).jqmAddClose("#close");
    jQuery("#show").click(function() {
        jQuery("#pop").jqmShow();
    });
});

.jqm()初始化遮罩,modal:true时,一直显示遮罩层。overlay为遮罩程度,大家可以自己试试。onShow为遮罩层显示方式,本例中为fadeIn(),onHide为关闭遮罩层。jqmAddClose()添加关闭遮罩层的选择器,可以为ID选择器,也可以为样式选择器。

.jqmShow()为执行遮罩,本例中当点击“显示遮罩层”链接时,显示遮罩。

http://dev.iceburg.net/jquery/jqModal/ 为jqModal官方的示例,更多详细的说明和更多的应用都可以找到。jqModal文件小, 速度快, 可定制性非常好,推荐大家使用。

分享到:
评论

相关推荐

    jqModal弹窗插件

    它通过在页面上覆盖一个半透明的遮罩层来实现这一效果,对话框则位于遮罩层之上,确保用户注意力集中在弹窗内容上。 **3. 初始化和配置** 使用jqModal首先需要在HTML中创建一个隐藏的div,作为弹窗的内容容器。...

    jqModal - jQuery模式窗口插件

    jqModal - jQuery模式窗口插件 。

    jqModal 插件的js文件

    jqModal 插件的js和css样式文件;配合博客文章:http://blog.csdn.net/yangkai_hudong/article/details/46051149使用

    jQuery+jqmodal弹出窗口实现代码分明

    在本篇文章中,我们将详细探讨如何使用jQuery及其扩展插件jqmodal来实现一个功能完备、样式美观的弹出窗口。首先,要实现这一功能,需要先了解几个关键知识点:jQuery基础、jqmodal插件的工作机制、以及CSS样式的...

    jqModal.css

    jqModal所需要的CSS源码,这是一个非常强大有助的源码,希望大家喜欢。

    前端项目-jqModal.zip

    jqModal的核心是其基于jQuery的设计,这使得它能够无缝地与jQuery库集成,利用jQuery的强大功能来实现复杂的交互效果。它通过简单的API和CSS样式控制,可以轻松地自定义模态窗口的外观和行为。 ### 2. 安装与引入 ...

    一个可以取代jqmodal的弹出框插件

    轻量级的弹出窗口jQuery插件,压缩后仅仅3.65Kb,基于jQuery1.4.2开发,主要实现弹出框的效果,并且加入了很多有趣的功能,比如callback函数,显示隐藏层,Ajax页面,iframe嵌入页面……

    jquery jqmodal demo 示例 例子 使用

    jquery jqmodal demo 示例 例子 包含了官居网站所能运行例子的源码 本文非原创..压缩包中已注明出处.. 5分共享.望各位理解.. 里边已经带了样式图片..直接运行即可..具体开发自行参照

    java弹出框效果

    综上所述,jqModal控件为JavaWeb应用提供了一种优雅的方式来实现弹出框效果,无论是简单的信息提示还是复杂的表单填写,都能轻松应对。通过灵活的配置和与Java后端的交互,可以创建出满足各种需求的弹出框功能。在...

    jQuery 弹出窗口 模式窗口 模式层

    jqmodal是一款轻量级的jQuery模态对话框插件,它创建了一个浮动在网页内容之上的透明层,用于显示弹出内容。jqmodal允许开发者自定义弹出框的样式,同时支持设置弹出框的位置、大小和透明度。此外,它还提供了关闭...

    一些网站模板以及jqeury弹窗

    4. `jqModal.js`:jqModal是一个基于jQuery的弹出框插件,用于创建模态对话框,可以实现弹出窗口的效果。 此外,还有两个CSS文件: 1. `jqModal.css`:这是jqModal插件的样式表,定义了弹窗的外观和布局,如边框、...

    jqGrid 简体中文包 for v3.6+

    5. 根据需求实现编辑、添加、删除等操作的事件处理。 **最佳实践:** - 在服务器端处理数据操作以确保安全性。 - 使用 JSON 或 XML 格式传递数据,提高效率和兼容性。 - 优化性能,避免一次性加载大量数据,利用...

    flexigrid+struts2+json+jquery实例

    在这个实例中,jQuery被用来增强用户界面的交互性,如实现表格的动态加载、右键菜单功能以及jqModal的弹出对话框。 右键事件的添加扩展了Flexigrid的功能,用户可以通过右键点击表格中的行来执行查看、删除或编辑...

    JQuery的插件

    - **删除数据**:可以通过点击表格中的“删除”按钮来实现,这通常会触发一个确认对话框,确保用户确实想要删除这条记录。 - **修改数据**:可以直接在表格中双击某一行的数据来编辑它,或者通过弹出一个模态对话框...

    强大的jQuery

    1. **导入jqGrid包**:在项目中引入必要的JS和CSS文件,如`jquery.js`、`jquery.jqGrid.js`、`jqModal.js`等,同时加载主题样式。 - 示例代码: ```html ...

    jpolite使用文档

    Jpolite 框架是基于 jQuery 开发的一个轻量级门户框架,它的设计目标是实现内容、展示和事件的分离,从而使得开发者能够更加便捷地构建和管理门户应用。框架的核心特性在于其灵活的内容模块展示方式,允许将内容以...

    jquery弹出框

    在本例中,开发者提到已经使用过jqModal,但感觉不够灵活,因此自行编写了一个jQuery弹出框插件。 首先,我们来看看`aa.html`文件,这很可能是包含HTML结构和jQuery弹出框使用示例的网页。HTML是超文本标记语言,...

    强大的JQuery的插件jqGrid

    jqGrid是一款基于jQuery的开源...&lt;link rel="stylesheet" type="text/css" media="screen" href="/SedSoft/jqGrid/themes/jqModal.css"&gt; &lt;script type="text/javascript" src="/sedsoft/jqGrid/jquery.js"&gt;&lt;/script&gt; ...

    jqGrid使用帮助

    - **jquery.js**:这是 jQuery 库的核心文件,所有的 jqGrid 功能都基于此库实现。 - **jquery.jqGrid.js**:这是 jqGrid 的核心文件,包含了 jqGrid 的主要功能和逻辑。 - **grid.basic.js**:这是一个重要的基础...

    JQuery插件jqGrid常用属性说明.pdf

    jqGrid是一款基于jQuery的开源数据网格插件,用于在网页上动态展示数据并提供丰富的交互功能,如增、删、改、查、分类显示...jqGrid提供了丰富的配置选项,可以根据实际需求进行定制,实现复杂的数据展示和交互效果。

Global site tag (gtag.js) - Google Analytics