前端小结（2）---- 弹出新页面

$(function () {
        var elem;
        $("#mytable").on('click', 'td.CommTopic', function (event) {
            elem = $(this).closest('tr');
            var row = table.api(true).row(elem);
            var ruleId = row.data().CusRuleID;

            var url = '/CustomerTurn/CommContent?ruleId=' + ruleId;

            //隐藏搜索框
            $(".task-item").hide();
            //点击行变色
            elem.css("background-color", "#D7FFDA");

            elem.prevAll().hide();
            elem.nextAll().hide();

            //点击行切至最后一行
            $(elem).appendTo("#mytable");

            $(".dataTables_scrollBody").css("height", "auto");
            $(".widget").css({ "z-index": 9, "left": 2000, "top": -38 })
                        .animate({ "left": 0 }, "slow");

            //弹出窗口
            showWin($(".widget"), url);
        });

        showWin = function (item, url) {
            //添加并显示遮罩层
            $("<div id='mask'></div>").addClass("mask")
                            .width("100%")
                            .height("100%")
                            .appendTo("body")
                            .fadeIn(200);
            html = '<div class="widget-body detailwin"><div class="close" onclick="hide(event)">X</div><div class="content"></div></div>';

            item.after(html).css({ "position": "relative" })
                            .parent().find(".detailwin")
                            .show()
                            .css({ "left": "0", "top": 2000, "margin-right": "1.7%" })
                            .animate({ "top": "45%" }, "slow")
                            .end()

            item.parent().find(".content").css({ "overflow-y": "scroll", "height": "640px" })
            if (url != "") {
                $(".content").load(url);
            }
        };

        hide = function (event) {
            //elem.addClass("finger");
            $(".detailwin").remove();
            $(".task-item").show("slow");
            $(".mask").remove();
            $("#mytable tr").show();
            $(".widget").css({ "top": 0, "z-index": 0 });

            $("#mytable").DataTable().ajax.reload();
        };
    });