首页 > 代码库 > JQuery 遮罩层弹窗
JQuery 遮罩层弹窗
var str = "<div id=\"zhezhao\" style=\"display:none; background-color: rgba(0,0,0,0.3); width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; z-index: 9999;\">"; str += "<div id=\"tanchuang\" style=\"width: 300px; margin: auto; top:-500px; position: relative; background-color: white; box-shadow: 0px 0px 10px black; border-radius: 5px; font-family: 微软雅黑;\">"; str += "<div id=\"tc-title\" style=\"width: 100%; height: 40px; position: relative; text-indent: 15px; line-height: 40px; background-color: #808080;\"></div>"; str += "<div id=\"tc-context\" style=\"width: 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=\"width: 100%; height: 30px; position: relative; margin-top: 20px;\">"; str += "<div id=\"tc-btn1\" style=\"width: 80px; height: 30px; position: relative; left: 110px; background-color: red; text-align: center; line-height: 30px; color: white; font-size: 1.2em; border-radius: 5px;cursor:pointer;\">确 定</div>"; str += "</div><div style=\"width: 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); });
JS代码
JQuery 遮罩层弹窗
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。