layer web 弹窗

1.layer引入

<script src="../../Scripts/jquery.min.1.9.1.js" type="text/javascript"></script>
    <script src="../../Scripts/common.js" type="text/javascript"></script>
    <script src="../../Scripts/layer-v2.2/layer/layer.js" type="text/javascript"></script>
    <link href="../../Scripts/layer-v2.2/layer/skin/layer.css" rel="stylesheet" />

2.弹窗

/*************主题与模板弹窗***************/
var num = 0;
function ShowThemeTempnExus()
{
    layer.open({
        type: 2,
        id: 'framTheme',//只允许弹出一个
        title: '主题与模板',
        area: ['618px', '417px'],
        fixed: false, //不固定
        maxmin: true,//最大最小化
        content: '/Admin/COM/ThemeTempnExusList.aspx',
        btn: ['确定', '取消'],
        yes: function (index, layero) {
            var body = layer.getChildFrame('body', index);
            var iframeWin = window[layero.find('iframe')[0]['framTheme']];
            var strThemeId = body.find('input:radio[name="themeID"]:checked').val();
            var strThemeName = body.find('input:radio[name="themeID"]:checked').next("span").text();
            var strReadNum = body.find('input:radio[name="userConfigID"]:checked').val();
            var strUserConfigName = body.find('input:radio[name="userConfigID"]:checked').next("span").text();
            var strIsDefatult = body.find('input:radio[name="IsDefault"]:checked').val() == "1" ? "是" : "否";

            var flag = 0, def = 0;
            $("#dataThemeTempTable tbody tr").each(function () {
                //主题ID与模板配置编号都相同时，不能重复添加
                if ($.trim($(this).find("td").eq(2).html()) == $.trim(strThemeId) && $.trim($(this).find("td").eq(5).html()) == $.trim(strReadNum)) {
                    flag = 1;
                }
                //默认模板与主题，只能有一个
                if ($.trim($(this).find("td").eq(6).html()) == $.trim("是") && $.trim(strIsDefatult) == $.trim("是")) {
                    def = 1;
                }
            });
            if (flag == 0 && def == 0) {//去重复
                if (strThemeName != "" && strUserConfigName != "") {
                    num++;
                    var ww = $("#dataThemeTempTable tbody");
                    var img = '<img src="../../Images/delete.png" alt="删除" id="imdDel0" name="imdDel0" onclick="DelUtm(this,0)" />';
                    ww.append("<tr><td>" + img + "</td><td>" + num + "<td>" + strThemeId + "</td><td>" + strThemeName + "</td><td>" + strUserConfigName + "</td><td>" + strReadNum + "</td><td>" + strIsDefatult + "</td></tr>");
                }
            }
            layer.close(index);
        }, btn2: function (index, layero) {
            layer.close(index);
        }
        });
}

3.调用

<table class="tableborderdetail" border="1" id="dataThemeTempTable">
                <thead><tr style="background-color: #edf1fa;">
                    <td class="detailsImg">
                        <img src="../../Images/Glyph-Add.png" onclick="ShowThemeTempnExus()" alt="" /><input
                            type="hidden" id="hisContractResponsible" value="" />
                    </td>
                    <td class="rowNum" nowrap="nowrap">序号</td><td>主题ID</td><td>主题名称</td><td>模板名称</td><td>模板配置编号</td><td>是否默认</td>
                </tr></thead>
                <tbody></tbody>
            </table>

4.删除行

//删除主题与模板配置关系行
        function DelUtm(obj, id) {
            num--;//序号
            var trs = $(obj).parent("td").parent("tr");
            $(trs).remove();
        }