完成的效果如下：

html代碼如下：

        <button id="btn">點擊彈出彈框</button>
        <!-- 彈出框 -->
        <div class="modal fade" id="confirm_like" tabindex="-1">
            <!-- 窗口聲明 -->
            <div class="modal-dialog modal-sm">
                <!-- 內容聲明 -->
                <div class="modal-content">
                    <div class="modal-header">
                        <button class="close" data-dismiss="modal">
                            <span>&times;</span>
                        </button>
                        <h4 class="modal-title" id="myModalLabel"></h4>
                    </div>
                    <div class="modal-body">
                        <div id="modal_con"></div>
                        <div id="firstDiv"></div>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-sm btn-success" data-dismiss="modal" id="ok_btn">確 定</button>
                        <button class="btn btn-sm btn-success" data-dismiss="modal" id="cancel_btn">取 消</button>
                    </div>
                </div>
            </div>
        </div>

js代碼如下：

    $("#btn").click(function(){
        //調用
        show_confirm('提示', '數(shù)據(jù)提交中',certain,cancel);
    });
    //顯示彈窗函數(shù)
    function show_confirm(title, msg ,ok_callback,cancel_callback) {
        $("#isConfirm").val('false');
        $("#myModalLabel").text(title);//這里設置彈窗的標頭
        $("#modal_con").text(msg);//設置提示的信息
        $("#confirm_like").modal({//顯示彈窗
            show : true,
            //backdrop : true,去掉遮罩層
        });
        //確定按鈕事件函數(shù)
        $("#ok_btn").click(function(){
            if($.isFunction(ok_callback)){
                $('#confirm_like').off('hidden.bs.modal');        //解綁事件，防止多次綁定
                $('#confirm_like').on('hidden.bs.modal', function(){ok_callback("這是確定");});        
            }
        });
        //取消按鈕事件函數(shù)
        $("#cancel_btn").click(function(){
            if($.isFunction(cancel_callback)){
                $('#confirm_like').off('hidden.bs.modal');
                $('#confirm_like').on('hidden.bs.modal', function(){cancel_callback();});        
            }
        });
        //彈窗的關閉按鈕事件函數(shù)
        $("#confirm_like .close").click(function(){
            if($.isFunction(cancel_callback)){
                $('#confirm_like').off('hidden.bs.modal');
                $('#confirm_like').on('hidden.bs.modal', function(){cancel_callback();});        
            }            
        });
    }
    function certain(str){
        alert(str);
    }
    function cancel(){
        alert("這是取消");
    }

總結

以上是生活随笔為你收集整理的基于bootstrap的模态框的comfirm弹窗的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。