zoukankan      html  css  js  c++  java
  • jqmodal遮罩层的实现

    jqmodal遮罩层的实现

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

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

    <divclass="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文件小, 速度快, 可定制性非常好,推荐大家使用。

  • 相关阅读:
    信息领域热词分类分析03
    虚拟机Linux联网问题
    每日学习
    第七章 Centos下搭建Maven私有仓库
    第六章 Maven-profile及插件
    第五章 Maven-构建生命周期、阶段、目标
    第四章 Maven-依赖管理
    第三章 Maven-pom.xml文件
    第二章 Maven-Repository存储库
    第一章 Maven入门
  • 原文地址:https://www.cnblogs.com/coxsoft/p/2343132.html
Copyright © 2011-2022 走看看