bootstrap-modal

模态框表单自动获取焦点

$(document).ready(function () {
  ...
$('.modal').on('shown.bs.modal', function () {
        $(this).find('[autofocus]').focus();
    });
  ...
})

关闭事件

// 关闭重置
$('#procurementApplyAddModal').on('hidden.bs.modal', function () {
    // # 可以设置下拉框为初始值
    $("#quantityApply").val('');
    // # 清空表单校验信息
    $('#procurement_apply_record').datagrid('loadData', {"total":0,"rows":[]});
});

js显示模态框

// 解除绑定，show的时候会有重复绑定，导致重复触发。
$(this).off('shown.bs.modal');

 function openDevConfigModal(row) {
    $('#devConfigTerminalCellphone').val(row.cellphone);
    $("#devConfigPlateId").val(row.plate);

    setTimeout(function () {
        $('#devConfigModal').modal('show');
    }, 230);
}

html代码

<!-- backdrop:避免点击空白自动关闭； 操作单个设备对话框，远程命令下发-->
<div class="modal fade " id="devOperateModal" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog modal-lg animated">
        <div class="modal-content">
            <div class="modal-header">
                <h2 class="modal-title">远程操作设备</h2>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            </div>
            <div class="modal-body">
                <div class="error"></div>

            </div>
            <div class="modal-footer">
                <button type="button" id="btnDevRegSave" class="btn btn-primary">保&nbsp&nbsp&nbsp&nbsp存</button>
                <button type="button" id="btnGenTerminalSms" class="btn btn-secondary" data-dismiss="modal">
                    生成终端配置短信
                </button>
            </div>
        </div>
    </div>
</div>

js提交表单

$("#btnDevRegSave").click(function (e) {
        e.preventDefault();
        var title = $('.modal-title').html();
        var jsonData = $("#devRegForm").form2Json();
        $.ajax(
            {
                url: "/admin/api/v1.0/devices",
                method: "POST",
                data: jsonData,
                dataType: 'json',
                contentType: "application/json; charset=utf-8",
                success: function (data, textStatus, jqXHR) {
                    //data: return data from server
                    if (data['code'] == 0) {
                        // login success
                        hideLoginForm();
                        $(".profile").show();
                        $(".tpb-msg").hide();
                        // reload the user data
                        $('#dg').datagrid('reload');
                        // get dashboard page
                        //window.location.href = "dashboard";
                    } else {
                        shakeModal(data['msg']);
                    }
                    console.log(data, textStatus, jqXHR);
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    //if fails
                    console.log(jqXHR, textStatus, errorThrown);
                }
            });
    });