FreezeJ' Blog

模态框html与js代码

2020-05-20

模态框html与js代码

HTML

<!--方法结果模态框-->
<div class="modal fade" id="fun_result" tabindex="-1" role="dialog" aria-labelledby="fun_result_ModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="fun_result_ModalLabel" align="center">查看结果</h4>
            </div>
            <div class="modal-body">
                <div class="modal-body">
                    <div><span style="font-weight: bold">sls检查项名:&nbsp</span>
                        <pre id="fun_result_name"></pre>
                    </div>

                    <div><span style="font-weight: bold">执行命令:</span>
                        <pre id="fun_result_cmd"></pre>
                    </div>

                    <div><span style="font-weight: bold">执行描述:</span>
                        <pre id="fun_comment"></pre>
                    </div>

                    <div><span style="font-weight: bold">错误信息:</span>
                        <pre id="fun_result_err_message" style="color: #ff463f"></pre>
                    </div>

                    <div><span style="font-weight: bold">返回信息:</span>
                        <pre id="fun_result_message" style="color: #ff463f"></pre>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-success" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

JS

$('#fun_result').modal({
    show: true,
})

模态框的详细

http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html