完成的效果如下:

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. springboot: mybatis的使用

    第一步:引入mybatis依赖 <dependency> <groupId>org.mybatis.spring.boot</groupId> <artifa ...

  2. 关于c#中委托与事件的一些理解

    文章目的:作者(初学者)在学习c#的过程中,对事件.委托及其中的“object sender,EventArgs e”一直感觉理解不透,因此在网上找了一些资料,学习并整理出了该篇笔记,希望能将自己的心 ...

  3. PHPStorm操作小技巧

    1.围绕选中字符输入引号或者括号 2.设置服务器部署 3.隐藏Project快捷键 Shift + Esc 4.IDE内窗口切换 Ctrl + TAB 5.关闭当前项目 File -> Clos ...

  4. cors允许的方法和contype-type

    https://fetch.spec.whatwg.org/#cors-safelisted-request-header get head post text/plain multipart/for ...

  5. Window10安装Django,并创建第一个Django项目

    1.在cmd中输入pip install Django==1.11.7,安装的版本为:1.11.7. 2.安装完成后输入: >>> import django >>> ...

  6. 使用gdb进行写操作

    使用gdb调试程序,读写操作是很普遍的事情.其中,读操作包括: 读取某个变量的值 读取某个内存地址里的内容 读取某个寄存器的值 对应地,写操作包括: 修改某个变量的值 修改某个内存地址里的内容 修改某 ...

  7. HTML5学习笔记:HTML5基于本地存储SQLite的每日工作任务清单程序.[只支持chrome]

    使用环境:Chrome 36.0...+ 技术:HTML5 目的:习练HTML5 功能概述:记录管理每天工作内容,便签清单 HTML5+CSS3呈现UI,JavaScript操作数据库,SQLite存 ...

  8. [PY3]——内置数据结构(2)——元组及其常用操作

    定义和初始化 #tuple() 使用工厂函数tuple定义一个空元组 #() 使用圆括号定义一个空元组 #(1,2,3) 使用圆括号定义有初始值的元组 #tuple(可迭代对象) 把可迭代对象转换为一 ...

  9. MySQL---3、常用命令大全

    一.连接MySQL 格式: mysql -h主机地址 -u用户名 -p用户密码 1.例1:连接到本机上的MYSQL. 首先在打开DOS窗口,然后进入目录 mysqlbin,再键入命令mysql -ur ...

  10. nodejs的gridfs基本操作

    var mongoose = require('mongoose'); var Schema = mongoose.Schema; mongoose.connect('mongodb://127.0. ...