基于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>×</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弹窗的更多相关文章
- 基于bootstrap的模态框使用
使用步骤两步 1:按顺序引入以下三个文件 <link rel="stylesheet" href="../css/bootstrap.min.css"&g ...
- 基于bootstrap模态框的alert弹窗
完成的效果如下: html代码: <!-- 弹出框 --> <div class="modal fade" id="alert_like" t ...
- Bootstrap使用模态框modal实现表单提交弹出框
Bootstrap 模态框(Modal)插件 模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等.如果 ...
- Bootstrap 3 模态框播放视频
Bootstrap 3 模态框播放视频 I'm trying to use the Modal feature from Bootstrap 3 to show my Youtube video. I ...
- Bootstrap 实例 - 模态框(Modal)插件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- bootstrap的模态框
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- Bootstrap -- 插件: 模态框、滚动监听、标签页
Bootstrap -- 插件: 模态框.滚动监听.标签页 1. 模态框(Modal): 覆盖在父窗体上的子窗体. 使用模态框: <!DOCTYPE html> <html> ...
- Bootstrap中模态框多层嵌套时滚动条问题
在使用Bootstrap中模态框过程中,如果出现多层嵌套的时候,如打开模态框A,然后在A中打开模态框B,在关闭B之后,如果A的内容比较多,滚动条会消失,而变为Body的滚动条,这是由于模态框自带的遮罩 ...
- 黄聪:bootstrap中模态框modal在苹果手机上会失效
bootstrap中模态框在苹果手机上会失效 可将代码修改为<a data-toggle="modal" data-target="#wrap" hre ...
随机推荐
- android中画弧函数canvas.drawArc()之理解
在学习android中图形图像处理技术这部分内容时,对绘制圆弧函数canvas.drawArc()的用法.参数含义及画图原理很是不理解,在网上搜索了一些,加上自己的理解,在此做个小总结,作为学习过程中 ...
- spring使用@Value注解读取.properties文件时出现中文乱码问题的解决
解决办法 在spring中我们常常使用.properties对一些属性进行一个提前配置, spring 在读取*.properties文件时, 默认使用的是asci码, 这时 我们需要对其编码进行转换 ...
- python-fork聊天室
服务端 #!/usr/bin/python from socket import * import sys import os class Node(object): def __init__(sel ...
- WPF设置动画在控件载入时就立刻执行
<YourControl.Triggers> <EventTrigger RoutedEvent="YourControl.Loaded"><!--这 ...
- 11 java 线程池 实现原理
一 关键类的实现 1 ThreadPoolExecutor类 java.uitl.concurrent.ThreadPoolExecutor类是线程池中最核心的一个类,因此如果要透彻地了解Java中的 ...
- Django models python3搭载mysql
1 django默认支持sqlite,mysql, oracle,postgresql数据库. <1> sqlite django默认使用sqlite的数据库,默认自带sqlite ...
- Nginx Open File Cache
Nginx 的 open_file_cache 相关配置可以缓存静态文件的元信息,在这些静态文件被频繁访问时可以显着提升性能. 被缓存的文件元信息包括: fd,文件被打开一次后,fd保留使用 size ...
- 使用FileSystemWatcher监视指定目录
使用 FileSystemWatcher 监视指定目录中的更改.可监视指定目录中的文件或子目录的更改. 以下是一个简单的实例,用来监控指定目录下文件的新增.删除.重命名等情况(文件内容更改会触发多次, ...
- [javaSE] 集合工具类(Collections-sort)
java为我们提供了一个集合的工具类,方便我们对集合进行操作,里面的方法都是静态方法. Collections.sort()方法,参数:List<T>集合对象,这个对象带着泛型,是为了保证 ...
- memcached 细究(二)
{ CentOS ping命令 分布式部署服务器时用到ping命令 #ping -c 4 192.168.16.1 //ping4次后结束. } 使用telnet 查看memcached 运行状态 ...