zoukankan      html  css  js  c++  java
  • JQuery自写alert弹窗


    复制代码

    var str = "<div id="zhezhao" style="display:none;   100%; height: 100%; position: fixed; top: 0px; left: 0px; z-index: 9999;">";
    str += "<div id="tanchuang" style=" 300px; margin: auto; top:-500px; position: relative;  box-shadow: 0px 0px 10px black; border-radius: 5px; font-family: 微软雅黑;">";
    str += "<div id="tc-title" style=" 100%; height: 40px; position: relative; text-indent: 15px; line-height: 40px; "></div>";
    str += "<div id="tc-context" style=" 100%; height: 30px; position: relative; margin-top: 20px; text-align: center; line-height: 30px; font-size: 1.3em;"></div>";
    str += "<div id="tc-btns" style=" 100%; height: 30px; position: relative; margin-top: 20px;">";
    str += "<div id="tc-btn1" style=" 80px; height: 30px; position: relative; left: 110px;  text-align: center; line-height: 30px; color: white; font-size: 1.2em; border-radius: 5px;cursor:pointer;">确 定</div>";
    str += "</div><div style=" 100%; height: 30px; position: relative;"></div></div></div>";
    document.getElementsByTagName("body")[0].innerHTML += str;
    
    
    function SelfAlert(t, c) {
        $("#tc-title").text(t);
        $("#tc-context").text(c);
        $("#zhezhao").css("display", "block");
        $("#tanchuang").animate({ top: "200px" }, 300).animate({ top: "150px" }, 100).animate({ top: "200px" }, 200);
    }
    
    $("#tc-btn1").live("click", function () {
        $("#tanchuang").animate({ top: "250px" }, 200).animate({ top: "-500px" }, 300, function () {
            $("#zhezhao").css("display", "none");
        });
    });
    
    $("#tc-btn1").live("mouseover", function () {
        $(this).animate({ backgroundColor: "#890606" }, 300);
    });
    $("#tc-btn1").live("mouseout", function () {
        $(this).animate({ backgroundColor: "red" }, 300);
    });
    复制代码
  • 相关阅读:
    (转)6 个重构方法可帮你提升 80% 的代码质量
    (转)卸载和安装LINUX上的JDK
    (转)一些国外优秀的elasticsearch使用案例
    (转)Redis 集群方案
    (转)理想化的 Redis 集群
    (转)Hprose与WCF在云计算平台Azure上的对决
    (转).NET技术+25台服务器怎样支撑世界第54大网站
    Hbase split的过程以及解发条件
    test
    HTTP和HTTPS详解
  • 原文地址:https://www.cnblogs.com/baimangguo/p/6554268.html
Copyright © 2011-2022 走看看