dialog实现弹出悬浮框，显示表格中所点击列的详细信息

框架

jsp+controller+lmp
jsp内容
表格中按钮的写法
根据自己所写的获取表单内容代码，给按钮函数设置一个可以定位表单第几列的参数
下面是我所写的生成表单

 function findBmsjcxByCondition() {
            var ksxm = $("#KSXM").val();
            var mhcx = "";
            $('input[name="mhcx"]:checked').each(function () {
                if ($(this).prop("checked") == true) {
                    mhcx = $(this).val();            //动态拼取选中的checkbox的值，用“|”符号分隔
                }
            });
            var zjhm = $("#zjhm").val().toString();

            var kmdm = $("#kmdm").val();
            var zkzh = $("#zkzh").val();
            var kqh = $("#kqh").val();
            var kdh = $("#kdh").val();
            var kch = $("#kch").val();
            var zwh = $("#zwh").val();
            var jkmzt = $('input[name="jkmzt"]:checked').val();
            var sfcrj = $('input[name="sfcrj"]:checked').val();

            jQuery.ajax({
                type: "POST",
                data: {
                    'condition': '',
                    'pageNo': '1',
                    'totalCount': '-1',
                    'ksxm': ksxm,
                    'mhcx': mhcx,
                    'zjhm': zjhm,
                    'kmdm': kmdm,
                    'zkzh': zkzh,
                    'kqh': kqh,
                    'kdh': kdh,
                    'kch': kch,
                    'zwh': zwh,
                    'jkmzt': jkmzt,
                    'sfcrj': sfcrj
                },
                url: "<%=request.getContextPath()%>/statisticykm/findAjax.htm",
                contentType: "application/x-www-form-urlencoded",
                dataType: "json",
                success: function (data) {
                    if (data == null || data == undefined || data.result == undefined || data.result == null) {
                        return;
                    }
                    jQuery("#bmsjcxTable tr").remove();
                    var bmsjcxList = data.result;
                    var strTr = "";
                    var strTd = "";
                    for (var i = 0; i < bmsjcxList.length; i++) {
                        strTr = "<tr class=\"table_border_cell_bg\">";
                        for (var j = 0; j <= 16; j++) {
                            strTd += "<td align=\"center\" class=\"tdNormal\">" + bmsjcxList[i][j] + "</td>";
                        }

                        strTd += "<td align='center'><input type='button' class='form-buttun' value='详细信息'  οnclick='openDetails(" + i+ ")' /> </td>"
                        strTr += "</tr>";
                        $("#bmsjcxTable").append(strTr + strTd);
                        strTr = "";
                        strTd = "";
                    }
                    $("#page").text(data.pageNo);
                    $("#count").text(data.totalPages);
                    $("#totalCount").text(data.totalCount);
                }
            });
        }

按钮所在的列

strTd += "<td align='center'><input type='button' class='form-buttun' value='详细信息'  οnclick='openDetails(" + i+ ")' /> </td>"

下面是点击按钮是要弹出的dialog悬浮框

<div id="dialog-user" title="详细信息" >
    <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" class="table">
        <tr>
            <td width="27%" height="22" align="right" class="tdNormal">考生姓名：</td>
            <td width="73%" height="22" class="tdNormal">

                <input id="jkm_ksxm" name="jkm_ksxm" readonly>
            </td>
        </tr>
        <tr>
            <td width="27%" height="22" align="right" class="tdNormal">证件号码：</td>
            <td width="73%" height="22" class="tdNormal">
                <input id="jkm_zjhm" name=jkm_zjhm" readonly>

            </td>
        </tr>
        <tr>
            <td height="22" align="right" class="tdNormal">是否为红码：</td>
            <td height="22" class="tdNormal">
                <input id="jkm_sfhm" name="jkm_sfhm" maxlength="20">

            </td>
        </tr>
        <tr>
            <td height="22" align="right" class="tdNormal">健康码颜色：</td>
            <td height="22" class="tdNormal">
                <input type="text" id="jkm_ys" name="jkm_ys" maxlength="25">*
            </td>
        </tr>
        <tr>
            <td height="22" align="right" class="tdNormal">红码原因：</td>
            <td height="22" class="tdNormal">
                <input type="text" id="jkm_hmyy" name="jkm_hmyy" maxlength="50">*
            </td>
        </tr>
        <tr>
            <td height="22" align="right" class="tdNormal">详细红码原因：</td>
            <td height="22" class="tdNormal">
                <textarea rows="2" cols="17" id="jkm_xxhmyy" name="jkm_xxhmyy" maxlength="50"></textarea>*
            </td>
        </tr>

        <tr>
            <td height="22" align="right" class="tdNormal">核酸检测结果：</td>
            <td height="22" class="tdNormal">
                <input type="text" id="jkm_hsjcjg" name="jkm_hsjcjg" maxlength="50">

            </td>
        </tr>
        <tr>
            <td height="22" align="right" class="tdNormal">核酸检测结果填报时间：</td>
            <td height="22" class="tdNormal">
                <input type="text" id="jkm_hsjcjgsj" maxlength="50">*
            </td>
        </tr>

    </table>

下面对dialog悬浮框进行初始化设置

 $(document).ready(function() {
   $("#dialog-user").dialog({
                hide:true, //点击关闭是隐藏,如果不加这项,关闭弹窗后再点就会出错.
                autoOpen: false,//设置点开页面时不自动弹出.
                height: 450,
                width: 400,
                modal: true,
                buttons: {
                    "保 存": function() {
                    },
                     '关闭': function() {
                        jQuery("#dialog-user").dialog('close');
                    },
       
});

下面是具体效果图

注意

使用dialog悬浮框是，需要引用相应的js与css，
其次引用时，要先引用js再引用css，要不然就会出现dialog设置的div不隐藏直接显示在页面中等问题

另外本人在实际开发中将 script type=“text/javascript”>放置到了body标签后面，也导致dialog无法正常隐藏与弹出，后来将顺序调整
后可以正常运行

下面是我所引用的js与css，仅供参考

<script type="text/javascript" src="<%=request.getContextPath()%>/js/common.js"></script>
    <script type="text/javascript" src="<%=request.getContextPath()%>/js/page_init.js"></script>
    <script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-3.4.1.min.js"></script>
    <script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-ui-1.12.1/jquery-ui.js"></script>
    <script type="text/javascript" src="<%=request.getContextPath()%>/js/ztree3.5/jquery.ztree.all-3.5.min.js"></script>
    <script src="<%=request.getContextPath()%>/js/ztree3.5/jquery-migrate-1.2.1.js" type="text/javascript"></script>
    <script src="<%=request.getContextPath()%>/js/ztree3.5/jquery.ztree.exhide-3.5.min.js" type="text/javascript"></script>
    <link href="<%=request.getContextPath()%>/css/slide.css" rel="stylesheet" type="text/css">
    <link href="<%=request.getContextPath()%>/skin/blue/css/style.css" rel="stylesheet" type="text/css">
    <link href="<%=request.getContextPath()%>/skin/blue/css/logo.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="<%=request.getContextPath()%>/js/ztree3.5/css/zTreeStyle/zTreeStyle.css" type="text/css">
    <link href="<%=request.getContextPath()%>/js/jquery-ui-1.12.1/themes/redmond/jquery-ui.css" rel="stylesheet" type="text/css">

这篇文章仅代表自己意见，本人算是编程路上的小白，如有错误欢迎指正