bootstrap模态框 确认框/提示框 的常用实现

2019独角兽企业重金招聘Python工程师标准>>>

HTML 代码： 

<!-- 模态框（Modal）弹出层 -START -->
<!-- 万能确认框 -->
<div class="modal fade" id="delcfmModel">
    <div class="modal-dialog">
        <div class="modal-content message_align">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">×</span></button>
                <h4 class="modal-title">确认信息</h4>
            </div>
            <div class="modal-body">
                <p id="delcfmMsg">您确认要删除吗？</p>
            </div>
            <div class="modal-footer">
                <input type="hidden" id="submitUrl"/>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <a onclick="urlSubmit()" class="btn btn-success" data-dismiss="modal">确定</a>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<!-- 提示框 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="modalTitle" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">×</span></button>
                <h4 class="modal-title" id="modalTitle" style="text-align: center;">
                    提示框
                </h4>
            </div>
            <div id="modalText" class="modal-body">
                提示内容
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<!-- 模态框（Modal）弹出层 -END -->

javascript 函数 

  /**
     * @Description:   同意或拒绝审核确认框
     * @Author:        张颖辉(yh)
     * @Date:          2018/9/14 16:18
     * @param:
     * @return:
     * @Version:       1.0
     */
    function auditSubmit(agree) {
        //提交审核结果url
        var submitUrl = "companyLoanEx/submitAudit.html?agree="+agree;
        $('#submitUrl').val(submitUrl);//给会话中的隐藏属性URL赋值
        var flag = "";
        if (agree) {
            flag = " [通过] "
        } else {
            flag = " [拒绝] "
        }
        $('#delcfmMsg').html("您确认审核" + flag + "吗?")
        $('#delcfmModel').modal();
    }


   /**
     * @Description:   提交信息确认框
     * @Author:        张颖辉(yh)
     * @Date:          2018/7/4 18:20
     * @param:
     * @return:
     * @Version:       1.0
     */
    function urlSubmit() {
        var submitUrl = $.trim($("#submitUrl").val());//获取会话中的隐藏属性URL
        // window.location.href = submitUrl;
        alert("使用ajax异步调用提交审核 url=" + submitUrl)
    }


    /**
     * @Description:   提示框
     * @Author:        张颖辉(yh)
     * @Date:          2018/9/14 16:14
     * @param:
     * @return:
     * @Version:       1.0
     */
    var showModal = function (title, text) {
        $("#modalTitle").html(title);
        $("#modalText").html(text);
        $("#myModal").modal();
    }
    

 

转载于:https://my.oschina.net/iyinghui/blog/2051533