zoukankan      html  css  js  c++  java
  • jQuery遮罩弹窗

    HTML:

    <p id="ok">单击这里显示</p>

    JS:

    $(document).ready(function(){
    $(
    "#ok").click(function(){
    showBg();
    addBox();
    });
    });
    function showBg(){
    var _body = $("body").eq(0);
    $(
    "html,body").css("overflow","hidden");
    if($("#bg").length == 0){
    _body.append(
    "<div id=\"bg\"><iframe src=\"\" width=\"100%\" height=\"100%\" frameBorder=\"0\"></iframe></div>");
    $(
    "#bg").css({"background-color":"#000000","opacity":".5","filter":"alpha(opacity=50);","z-index":"100","position":"absolute","top":"0","width":_body.width(),"height":_body.height()});
    $(
    "#bg iframe").css({"opacity":"0","filter":"alpha(opacity=0);"});
    }
    else{
    $(
    "#bg").show();
    }
    }
    function hiddenBg(){
    $(
    "html,body").css("overflow","auto");
    $(
    "#bg").hide();
    $(
    "#dialog").hide();
    }
    function addBox(){
    var _body = $("body").eq(0);
    if($("#close").length == 0){
    _body.append(
    "<div id=\"dialog\"><span id=\"close\" style=\"float:right;cursor:pointer;border:#333 solid 1px;\">×</span></div>");
    $(
    "#dialog").css({500,height:200,position:"absolute","z-index":"101",top:(_body.height() / 2 - 100),left:(_body.width() / 2 - 250),"background-color":"#ffffff"});
    $(
    "#close").click(function(){
    hiddenBg();
    });
    }
    else{
    $(
    "#dialog").show();
    }
    }

    就是个备份

  • 相关阅读:
    IE6中overflow:hidden失效怎么办
    单例模式笔记
    linux 中的 "2>&1"含义
    linux 文件目录介绍
    centos 安装jdk
    SimpleDateFormat非线程安全
    Linux下Weblogic 11g R1安装和配置
    <meta>标签 的一些用法
    基于java的邮件群发软件
    史上最完整的集合类总结及hashMap遍历
  • 原文地址:https://www.cnblogs.com/ShepherdIsland/p/1808799.html
Copyright © 2011-2022 走看看