zoukankan      html  css  js  c++  java
  • 自定义提示信息弹出层

     自定义弹出层示例:

    标题: 内容: 自动关闭时间:

    ///自定义弹出层   alertTitle:弹出层标题      alertContent:弹出层内容    autoCloseSecond:弹出层默认自动关闭时间,默认3秒     contaierId:弹出层所在容易的ID,默认为body
    jQuery.extend({
        showAlertBox: function (alertTitle, alertContent, autoCloseSecond, contaierId) {
            stopTime(); //停止自动关闭弹出层的方法
            $("#alterBox").remove();  //移除已存在的弹出层
            if (contaierId == "" || contaierId == undefined || contaierId == null) contaierId = "body";
            if (alertTitle == "" || alertTitle == undefined || alertTitle == null) alertTitle = "提示信息";
            if (alertContent == "" || alertContent == undefined || alertContent == null) alertContent = "提示信息";
            if (autoCloseSecond == "" || autoCloseSecond == undefined || autoCloseSecond == null || isNaN(autoCloseSecond) || parseInt(autoCloseSecond) < 2) autoCloseSecond = 3;
            var strAlertBoxHtml = "<div id='alterBox' class='lightbox' style=' 180px; background: #FFFFFF; border: 1px solid #ccc;line-height: 25px; z-index: 1001; display: block; position: absolute; top: 40%;left: 50%; margin-left: 0px; margin-top: 0px; display: none;'>";
            strAlertBoxHtml += "<dl style='display: block; -webkit-margin-before: 1em; -webkit-margin-after: 1em;-webkit-margin-start: 0px; -webkit-margin-end: 0px; margin-top:0px;'>";
            strAlertBoxHtml += "<dt id='idBoxHead' style='height: 18px;background: #f4f4f4;padding: 5px;'><strong>" + alertTitle + "</strong>";
            strAlertBoxHtml += "<strong id='alertClose' style='float: right;padding-right: 7px; cursor: pointer; font-size:14px;'>X</strong> </dt>";
            strAlertBoxHtml += "<dd id='ddContent' style='text-align: center; height: 45px;'>" + alertContent + "</dd></dl></div>";
    
            if (contaierId == "body") {
                $(contaierId).append(strAlertBoxHtml);
            } else {
                $("#" + contaierId).append(strAlertBoxHtml);
            }
    
            //***********************弹出层显示位置  start
            var containerWidth = 0; //容器可用区域宽度
            var containerHeight = 0; //容器可用区域高度
            if (contaierId == "body") {
                containerWidth = window.screen.availWidth; //容器可用区域宽度
                containerHeight = window.screen.availHeight; //容器可用区域高度
            } else {
                containerWidth = $("#" + contaierId).width();
                containerHeight = $("#" + contaierId).height();
                if (containerWidth <= 180 || containerHeight < 45) {  //如果容器的大小小于弹出层的大小,自动以body作为容器
                    containerWidth = window.screen.availWidth;
                    containerHeight = window.screen.availHeight;
                    contaierId = "body";
                    $("#alterBox").remove();
                    $(contaierId).append(strAlertBoxHtml);
                }
            }
            var marginLeft = 0;  //弹出层距左边边距
            var marginTop = 0;  //弹出层距上边边距
            marginLeft = (parseInt(containerWidth) / 2) - 90;
            marginTop = (parseInt(containerHeight) / 2) - 50;
            $("#alterBox").css({ "left": marginLeft, "top": marginTop });
            //***********************弹出层显示位置  end
    
            $("#alterBox").show(); //显示弹出层
            $("#alertClose").click(function () { $("#alterBox").remove(); }); //关闭弹出层事件
    
            //*************************自动关闭弹出层 start
            getRTime(parseInt(autoCloseSecond));
            var setTime;
            function getRTime(m) {  //倒计时
                m--;
                if (m < 1) {
                    stopTime();
                    $("#alterBox").remove();
                    return false;
                }
                setTime = setTimeout(function () { getRTime(m); }, 1000);
            }
            function stopTime()//停止之前的倒计时
            {
                clearTimeout(setTime);  //停止之前的倒计时
            }
            //*************************自动关闭弹出层 end
        }
    });

    其他地方引用示例:

    $.showAlertBox("提示","这里是提示信息!",5,"contains_Id");   //弹出层在 id=“contains_Id”的容器中显示,如果该参数为空,则在body中显示,5秒后自动关闭弹出层
  • 相关阅读:
    $动态规划系列(1)——金矿模型的理解
    $Java HttpClient库的使用
    $Java-json系列(二):用JSONObject解析和处理json数据
    $百度应用引擎BAE的使用与应用部署
    利用ajax短轮询+php与服务器交互制作简易即时聊天网站
    MYSQL explain详解
    Redis 5种数据结构使用及注意事项
    Redis 存储机制
    memcache
    mysql分表和表分区详解
  • 原文地址:https://www.cnblogs.com/wangbogo/p/3759041.html
Copyright © 2011-2022 走看看