完成的效果如下:

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("这是取消");
}

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

  1. 基于bootstrap的模态框使用

    使用步骤两步 1:按顺序引入以下三个文件 <link rel="stylesheet" href="../css/bootstrap.min.css"&g ...

  2. 基于bootstrap模态框的alert弹窗

    完成的效果如下: html代码: <!-- 弹出框 --> <div class="modal fade" id="alert_like" t ...

  3. Bootstrap使用模态框modal实现表单提交弹出框

    Bootstrap 模态框(Modal)插件 模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等.如果 ...

  4. Bootstrap 3 模态框播放视频

    Bootstrap 3 模态框播放视频 I'm trying to use the Modal feature from Bootstrap 3 to show my Youtube video. I ...

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

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  6. bootstrap的模态框

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  7. Bootstrap -- 插件: 模态框、滚动监听、标签页

    Bootstrap -- 插件: 模态框.滚动监听.标签页 1. 模态框(Modal): 覆盖在父窗体上的子窗体. 使用模态框: <!DOCTYPE html> <html> ...

  8. Bootstrap中模态框多层嵌套时滚动条问题

    在使用Bootstrap中模态框过程中,如果出现多层嵌套的时候,如打开模态框A,然后在A中打开模态框B,在关闭B之后,如果A的内容比较多,滚动条会消失,而变为Body的滚动条,这是由于模态框自带的遮罩 ...

  9. 黄聪:bootstrap中模态框modal在苹果手机上会失效

    bootstrap中模态框在苹果手机上会失效 可将代码修改为<a  data-toggle="modal" data-target="#wrap" hre ...

随机推荐

  1. C#面试:委托

    面试常见题: 1.委托是什么?★☆ 2.为什么需要委托?★☆ 3.委托能用来做什么?★☆ 4.如何自定义委托★☆ 5..NET默认的委托类型有哪几种?★☆ 6.怎样使用委托?★★★ 7.多播委托是什么 ...

  2. (转)OpenStack各服务所用端口号总结

    参考:Firewalls and default ports 注:可执行 sudo netstat -tnlp 查看 端口 服务描述 22 SSH 3306 MariaDB(MySQL) 27017 ...

  3. vSphere虚拟主机安装Centos7系统

    经过上一帖的主机设置,这一步就可以开始安装系统了,本次详细记录各个过程并分析结果. Centos7 1.右键点击列表中的虚拟主机,打开控制台. 点击绿色开机键,开始安装. 这里有一个很关键的点,就是上 ...

  4. ES6 rest参数和扩展运算符

    rest参数 ES6引入了rest参数(形式为“…变量名”).其中rest参数搭配的变量是一个数组可以使用数组的一切操作. 例: function rest(...values){ let sum=0 ...

  5. js解决千分符问题

    js脚本function: //js数字千分符处理 function commafy(num) { num = num + ""; var re = /(-?\d+)(\d{3}) ...

  6. Mysql命令行访问

    mysql -h localhost  -u root -p12345 mysql -h 192.168.1.100  -u root -p12345 mysql -h 192.168.1.100  ...

  7. Ruby(1):入门

    安装: 一般来说linux会自动装ruby,可以通过: ruby -v 来查看ruby版本 直接使用ruby命令的话,是用来执行ruby文件的.如果要打开交互式ruby解释器.只需要在控制台输入:ir ...

  8. 撩课-Java每天5道面试题第10天

    撩课Java+系统架构 视频 点击开始学习 81.Servlet的会话机制? HTTP 是一种无状态协议, 这意味着每次客户端检索网页时, 都要单独打开一个服务器连接, 因此服务器不会记录下 先前客户 ...

  9. 找到链表中倒数第k个数

    本文来源于翁舒航的博客,点击即可跳转原文观看!!!(被转载或者拷贝走的内容可能缺失图片.视频等原文的内容) 若网站将链接屏蔽,可直接拷贝原文链接到地址栏跳转观看,原文链接:https://www.cn ...

  10. 工作经验:Java 系统记录调用日志,并且记录错误堆栈

    前言:现在有一个系统,主要是为了给其他系统提供数据查询接口的,这个系统上线不会轻易更新,更不会跟随业务系统的更新而更新(这也是有一个数据查询接口系统的原因,解耦).这时,这个系统就需要有一定的方便的线 ...