点击 某个字段 ----------弹出div

/**
 * 打开modal
 * @param modalSelector modal选择器
 * @param backdropClose 是否允许点击背景关闭modal
 * @param escClose 是否允许按ESC键关闭modal
 */
function openModal(modalSelector, backdropClose, escClose) {
    if (typeof(backdropClose) != "boolean") {
        backdropClose = true;
    }
    if (typeof(escClose) != "boolean") {
        escClose = true;
    }

    if (backdropClose && escClose) {
        $(modalSelector).modal('show');
    } else if (backdropClose && !escClose) {
        $(modalSelector).modal({keyboard: false});
    } else if (!backdropClose && !escClose) {
        $(modalSelector).modal({backdrop: "static", keyboard: false});
    } else if (!backdropClose && escClose) {
        $(modalSelector).modal({backdrop: "static"});
    }

}

$('#queryGroup').on('click', function(){
                openModal("#modal-add1", false, false);
            });

   
    <div id="modal-add1" class="modal fade">
        <div class="modal-dialog" style="width:600px">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">×</button>
                    <h4 class="modal-title" id="modal-add-label">新增共享组</h4>
                </div>
                <div class="modal-body">
                    <form id="select-form1">
                        <table>
                            <tr>
                                <td align="right" width="100">共享组名：</td>
                                <td>
                                    <input id="name" name="name" placeholder="共享组名" class="form-control required" type="text" style="width:100px"/>
                                </td>
                                <td>
                                    <div id="btns1" class="btn-group btn-group-sm" style="padding-left: 20px;">
                                        <button id="btn-query1" type="button" class="btn btn-default btn-common btn-common-green">查询</button>
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </form>
                </div>
                
                <div style="margin-top: 20px;margin-left: 10px;margin-right: 10px; ">                
                <table id="tb_groups" class="tb_groups" style="border: 1px solid; width:99%;margin:0 auto;" >
                    <tr><th rowspan="" colspan=""></th></tr>
                </table>
                <div id="pg1" style="text-align: right;"></div>
                </div>
                <div class="modal-footer">
                    <a id="group-save" href="#" class="btn btn-modal">确认</a>
                    <a href="#" class="btn btn-modal" data-dismiss="modal">关闭</a>
                </div>
            </div>
        </div>
    </div>