基于bootstrap的模态框的comfirm弹窗

完成的效果如下:

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" style="padding-top: 10px; padding-bottom: 10px;">
                        <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" style="text-align: center;"></div>
                        <div id="firstDiv"></div>
                    </div>
                    <div class="modal-footer" style="text-align: center; padding-top: 10px; padding-bottom: 10px;margin-top:0;">
                        <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(‘提示‘, ‘数据提交中‘,certain,cancel);
    });
    //显示弹窗函数
    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,去掉遮罩层
        });
        //确定按钮事件函数
        $("#ok_btn").click(function(){
            if($.isFunction(ok_callback)){
                $(‘#confirm_like‘).off(‘hidden.bs.modal‘);        //解绑事件,防止多次绑定
                $(‘#confirm_like‘).on(‘hidden.bs.modal‘, function(){ok_callback("这是确定");});
            }
        });
        //取消按钮事件函数
        $("#cancel_btn").click(function(){
            if($.isFunction(cancel_callback)){
                $(‘#confirm_like‘).off(‘hidden.bs.modal‘);
                $(‘#confirm_like‘).on(‘hidden.bs.modal‘, function(){cancel_callback();});
            }
        });
        //弹窗的关闭按钮事件函数
        $("#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("这是取消");
    }
时间: 2024-12-28 20:36:05

基于bootstrap的模态框的comfirm弹窗的相关文章

Bootstrap 实例 - 模态框(Modal)插件

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 实例 - 模态框(Modal)插件</title> <link rel="stylesheet" href="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.m

Bootstrap 的模态框类

Bootstrap 的模态框类提供了一些事件用于监听并执行你自己的代码. 事件类型 描述 show.bs.modal show 方法调用之后立即触发该事件.如果是通过点击某个作为触发器的 元素,则此元素可以通过事件的relatedTarget 属性进行访问. shown.bs.modal 此事件在模态框已经显示出来(并且同时在 CSS 过渡效果完成)之后被触 发.如果是通过点击某个作为触发器的元素,则此元素可以通过事件 的 relatedTarget 属性进行访问. hide.bs.modal

bootstrap 嵌套模态框 二级模态框关闭导致一级模态框滚动条消失

一.问题描述 实际开发中遇到bootstrap嵌套模态框,关闭次模态框后主模态框滚动条消失. 二.解决办法 在主模态框上加属性:(先凑合着用,回头再看看源码) style="overflow-y: auto;" 问题:在使用Bootstrap时,有时候会用到模态框中再嵌套模态框.这样就会出现一个问题,就是在关闭第二个模态框时,会导致第一个模态框的滚动条消失,这样就会使得屏幕太小而模态框太大看不到底部信息,而没法进行操作. 解决方法:就是在第二个模态框的关闭hide 方法调用之后立即触发

Bootstrap model模态框与百度地图API发生冲突时的解决办法

在使用百度地图API的过程中,当我需要在infoWindow的按钮点击触发modal模态框时,就会发现bootstrap的模态框会失效.弄清modal的原理就可以通过自定义modal的css样式和modal方法来解决这个问题.Bootstrap modal模态框的原理是通过控制modal框div的visibility属性来变化来实现的,在初始状态modal div的visibility属性值为hidden,在页面上隐藏,当点击按钮触发(或别的事件)一个方法使div的visibility值变为vi

bootstrap删除模态框弹出并询问是否删除【通用删除模态框】

普通的询问是否删除的对话框比较low,可以利用bootstrap的模态框代替普通的对话框来实现删除. 效果: 点删除的时候弹出模态框询问是否删除,点确认的时候将需要删除的ID传到后台进行删除.  过程: 1.界面准备删除模态框: 模态框中隐藏需要删除的ID <!-- 模态框 信息删除确认 --> <div class="modal fade" id="delcfmOverhaul"> <div class="modal-dia

WebUploader 上传插件结合bootstrap的模态框使用时选择上传文件按钮无效问题的解决方法

由于种种原因(工作忙,要锻炼健身,要看书,要学习其他兴趣爱好,谈恋爱等),博客已经好久没有更新,为这个内心一直感觉很愧疚,今天开始决定继续更新博客,每周至少一篇,最多不限篇幅. 今天说一下,下午在工作中遇到的一个问题:公司的后端同事用bootstrap的模态框,结合WebUploadder做后台上传文件的功能的时候,发现上传按钮点击无效.同事过来请求我支援,我研究了下,发现了三种解决方案,下面具体说说是这三种方法是怎么解决的. 我们先来分析一下解决这个问题的思路: 为什么上传控件放到模态框里面就

bootstrap的模态框的使用

bootstrap的模态框 如果只想单独使用模态框功能,可以单独引入modal.js,和bootstrap的css,在bootstrap的包中,可引入bootstrap.js. 用法 通过data属性,比如设置某个butto的data-toggle=’“modal”,同时设置 data-target="#myModal" 选择器内容,通过js直接用代码 $(’#myModal’).modal(options)模态框主要为三部分,model-head,modeal-body,model-

Bootstrap.之模态框 显示在遮罩层后面

Bootstrap.之模态框 显示在遮罩层后面 问题描述: 在使用bootstrap模态框,弹出的窗口在遮罩层后面,见图: 解决方案: 保证模态框的代码,所在的上一级(父元素)是body标签,即可.例如: 原文地址:https://www.cnblogs.com/Charles-Yuan/p/11976302.html

bootstrap中模态框的大小设置;

bootstrap模态框调节大小: 大尺寸:黑体加大的字体,是更改的代码 <!-- 大模态框的调节 --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button> <div class="m