利用bootStrap的模态框做web的提示框或者弹出框

话不多说，首先你得去bootStrap官网下载很基础的bootStrap包。（www.bootcss.com）引用“bootstrap.min.js”和“bootstrap.min.css”包到你的工程。
<bootStrapModal.html>

<button type="button" style="display: none" data-toggle="modal" data-target="#myModal_info"></button>
<!-- 模态框（Modal） -->
<div class="modal fade " id="myModal_info" tabindex="-1"  data-backdrop="static" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="color: #fff">×</button>
                <h4 class="modal-title" style="font-size: 16px;" >消息</h4>
            </div>
            <div class="modal-body">
                <div style="text-align: center;font-size: 20px;font-family: Microsoft YaHei;color: #333333;">
                    <img  style="margin-right:6px;width: 40px;height: 40px;vertical-align: middle;">
                    <span style="vertical-align: middle"></span>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">
                    <i class="fa fa-check"></i>
                    <span>确定</span>
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>


<button type="button" style="display: none" data-toggle="modal" data-target="#myModal_confirm"></button>
<!-- 模态框（Modal） -->
<div class="modal fade " id="myModal_confirm" tabindex="-1" role="dialog" data-backdrop="static" aria-labelledby="myModalLabel" aria-hidden="true" style="z-index: 1070;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="color: #fff">×</button>
                <h4 class="modal-title" style="font-size: 16px;" >确定</h4>
            </div>
            <div class="modal-body">
                <div style="text-align: center;font-size: 16px;font-family: Microsoft YaHei;color: #333333;">
                   ![](/images/icon/why_icon.png)
                   <span style="vertical-align: middle"></span>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">
                    <i class="fa fa-check"></i>
                    <span>确定</span>
                </button>
                <button type="button" class="btn btn-default form-control-nolabel" data-dismiss="modal">
                    <i class="fa fa-mail-reply"></i>
                    <span>取消</span>
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

将上面的html片段导入你整个工程的共同html里面，然后你们工程一定会有一个common.js。

function bootStrapDialog() {
    var me = this;
    me.info = function(msg,type,okCallback){
        if(type == 'success') {
            $("#myModal_info").modal('show');
            $("#myModal_info .modal-body").find('img').attr('src','/images/icon/success_icon.png');
            $("#myModal_info .modal-body").find('span').html(msg);
            $("#myModal_info .btn-primary").click(function(){
                if (okCallback && typeof okCallback === 'function') {
                    okCallback();
                    //移除当前的confirm方法
                    $(this).unbind('click');
                }
            })
        }else if(type == 'wrong') {
            $("#myModal_info").modal('show');
            $("#myModal_info .modal-body").find('img').attr('src','/images/icon/shanchu_icon.png');
            $("#myModal_info .modal-body").find('span').html(msg);
            $("#myModal_info .btn-primary").click(function(){
                if (okCallback && typeof okCallback === 'function') {
                    okCallback();
                    //移除当前的confirm方法
                    $(this).unbind('click');
                }
            })
        }else if(type == 'info') {
            $("#myModal_info").modal('show');
            $("#myModal_info .modal-body").find('img').attr('src','/images/icon/info_icon.png');
            $("#myModal_info .modal-body").find('span').html(msg);
            $("#myModal_info .btn-primary").click(function(){
                if (okCallback && typeof okCallback === 'function') {
                    okCallback();
                    //移除当前的confirm方法
                    $(this).unbind('click');
                }
            })
        }

    };
    me.confirm = function(msg,type,okCallback){
        if(type == 'choose') {
            $("#myModal_confirm").modal('show');
            $("#myModal_confirm .modal-body").find('img').attr('src','/images/icon/why_icon.png');
            $("#myModal_confirm .modal-body").find('span').html(msg);
            $("#myModal_confirm .btn-primary").click(function(){
                if (okCallback && typeof okCallback === 'function') {
                    okCallback();
                    //移除当前的confirm方法
                    $(this).unbind('click');
                }
            });
            $("#myModal_confirm .btn-default").click(function(){
                //移除当前的confirm方法
                $("#myModal_confirm .btn-primary").unbind('click');
            })
        }else if(type == 'noImg') {
            $("#myModal_confirm").modal('show');
            $("#myModal_confirm .modal-body").find('img').css('display','none');
            $("#myModal_confirm .modal-body").find('span').html(msg);
            $("#myModal_confirm .btn-primary").click(function(){
                if (okCallback && typeof okCallback === 'function') {
                    okCallback();
                    //移除当前的confirm方法
                    $(this).unbind('click');
                }
            });
            $("#myModal_confirm .btn-default").click(function(){
                //移除当前的confirm方法
                $("#myModal_confirm .btn-primary").unbind('click');
            })
        }

    };

    me.error = function(msg,ele,ele_label) {
        $(ele).addClass('has-error');
        $(ele_label).addClass('has-error-label');
        $(ele).attr('data-toggle','tooltip');
        $(ele).attr('data-placement','top');
        //$(ele).attr('aria-required',true);
       // $(ele).attr(' data-trigger','manual');
        $(ele).attr('data-original-title',msg);
        $(ele).tooltip({
            trigger:'manual'
        });
        $(ele).tooltip('show');
       /* $(ele).focus();*/
        $(ele).change(function(){
            $(ele).removeClass('has-error');
            $(ele_label).removeClass('has-error-label');
            $(ele).tooltip('destroy');

        })
    };
}
var bootStrapDialog = new bootStrapDialog();

当然上面的那些图标可以自己设置，主要是为了美观。引用只要在自己定义的js里面

bootStrapDialog.info('msg','success',function(){});
bootStrapDialog.info('msg','wrong',function(){});
bootStrapDialog.confirm('msg','choose',function(){});

下面放截图：

info_wrong.png
 ](https://img.haomeiwen.com/i4252197/476338779ccfc116.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)