弹出窗口--Jquery

来源:互联网 发布:mac 全角半角切换 编辑:程序博客网 时间:2024/06/08 18:45

CSS:

body {background-color:#fff;}html, body {height:100%;}html body{font:12px Arial, Helvetica, sans-serif;color:#333333}html>body{font:12px Arial, Helvetica, sans-serif;color:#333333}#TB_overlay {position: absolute;top: 0;left: 0;z-index:100;width: 100%;height: 100%;background-color:#CCC;filter:alpha(opacity=60);-moz-opacity: 0.6;opacity: 0.6;}#TB_window {top: 0px;left: 0px;position: fixed;_position: absolute;background: #fff;z-index: 102;color:#000000;display:none;border: 1px solid #666;}#TB_caption{ height:30px;padding:10px 30px 10px 25px;}#TB_closeWindow{height:27px;padding:10px 25px 10px 0;float:right;}#TB_closeAjaxWindow{padding:5px 10px 7px 0;margin-bottom:1px;text-align:right;background-color:#e8e8e8;}#TB_ajaxContent{padding:2px 15px 15px 15px;overflow:auto;}#TB_load{text-align: center;position: absolute;top: 50%;left: 0px;width: 100%;overflow: visible;visibility: visible;display: block;z-index:101;}#TB_loadContent{margin-left: -125px;position: absolute;top: -50px;left: 50%;width: 250px;height: 100px;visibility: visible;}      
JavaScript:

//参数说名:caption--弹出窗口页面的标题   url--页面地址(例:“consult_Add.htm?height=350;width=450”)  key--要传递的参数 多个参数以","或"|"等字符分隔  单个值:$("#keyValue").val()   多个值:$("#keyValue").val().split(",")function TB_show(caption, url, key) {    try {        if ($("#TB_window").length > 0) $("#TB_window").html("");        $("body").append("<div id='TB_overlay'></div><div id='TB_window'></div>");        $("#TB_overlay").css("opacity", "0.6");        $("#TB_overlay").css("filter", "alpha(opacity=60)");        $("#TB_overlay").css("-moz-opacity", "0.6");        $(window).resize(TB_position);        $("body").append("<div id='TB_load'><div id='TB_loadContent'></div></div>");        $("#TB_overlay").show();        var urlString = /.jpg|.jpeg|.png|.gif|.html|.htm|.aspx/g;        var urlType = url.match(urlString);        if (urlType == '.htm' || urlType == '.html'||urlType=='.aspx') {            var queryString = url.replace(/^[^\?]+\??/, '');            var params = parseQuery(queryString);            TB_WIDTH = (params['width'] * 1) + 30;            TB_HEIGHT = (params['height'] * 1) + 40;            ajaxContentW = TB_WIDTH - 30;            ajaxContentH = TB_HEIGHT - 45;            $("#TB_window").append("<div id='TB_closeAjaxWindow' style=\"background-image:url(Images/bgx.gif) \"><span id=\"span_CPName\" style=\"margin-left:10px;  font-size:11pt; float:left; color:#FFF\">" + caption + "</span><span  style=\"display:none\"><input id='keyValue'  type=\"text\" value='" + key + "'  /></span><a href='#' id='TB_closeWindowButton'><img width=\"15\" border=\"0\" height=\"15\" src=\"Images/close02.gif\" /></a></div><div id='TB_ajaxContent' style='width:" + ajaxContentW + "px;height:" + ajaxContentH + "px;'></div><div style=\"height:35px;text-align:right;background-image:url(Images/bgxB.gif); margin-top:-38px; \"></div>");                $("#TB_closeWindowButton").click(TB_remove);            $("#TB_ajaxContent").load(url, function () {                TB_position();                $("#TB_load").remove();                $("#TB_window").slideDown("normal");            });        }    } catch (e) {        alert(e);    }}function TB_remove() {    $("#TB_window").fadeOut("fast", function () { $('#TB_window,#TB_overlay,#TB_load').remove(); });    return false;}function TB_position() {    var de = document.documentElement;    var w = self.innerWidth || (de && de.clientWidth) || document.body.clientWidth;    var h = self.innerHeight || (de && de.clientHeight) || document.body.clientHeight;    if (window.innerHeight && window.scrollMaxY) {        yScroll = window.innerHeight + window.scrollMaxY;    } else if (document.body.scrollHeight > document.body.offsetHeight) {         yScroll = document.body.scrollHeight;    } else {        yScroll = document.body.offsetHeight;    }    $("#TB_window").css({ width: TB_WIDTH + "px", height: TB_HEIGHT + "px",        left: ((w - TB_WIDTH) / 2) + "px", top: ((h - TB_HEIGHT) / 2) + "px"    });    $("#TB_overlay").css("height", yScroll + "px");}function parseQuery(query) {    var Params = new Object();    if (!query) return Params;     var Pairs = query.split(/[;&]/);    for (var i = 0; i < Pairs.length; i++) {        var KeyVal = Pairs[i].split('=');        if (!KeyVal || KeyVal.length != 2) continue;        var key = unescape(KeyVal[0]);        var val = unescape(KeyVal[1]);        val = val.replace(/\+/g, ' ');        Params[key] = val;    }    return Params;}//-----------------------end---------------------------------------------------------//