zoukankan      html  css  js  c++  java
  • 基于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("这是取消");
        }
  • 相关阅读:
    [Spring开发]获取上下文对象
    [Dubbo开发]Dubbo日志插件实现(打包)
    [Dubbo开发]Dubbo日志插件实现(未打包)
    [Java开发]打印当前路径到控制台
    [Dubbo开发]Dubbo拦截器(Filter)初探
    [Dubbo开发]配置简单的生产者和消费者
    [Dubbo开发]Zookeeper配置
    [Dubbo开发]Maven安装与配置
    EL表达式的特性
    oracle中rownum的使用
  • 原文地址:https://www.cnblogs.com/chendc/p/6222490.html
Copyright © 2011-2022 走看看