基于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 ...
随机推荐
- 用python开发了一个简单apache web服务端范例,在win10 + apache2.4.9 + python3.5 测试成功
#!D:\Programs\Python\Python35-32\python.exe import cgi def htmlTop(): print("Content-type: ...
- [大数据入门] Cloudera-Hadoop 理论
Hadoop 发明者Doug Cutting Cloudera Hadoop 是基于Java 开发的集群环境,所以每个节点都需要安装Java 运行环境(即JDK),通过Cloudera Manager ...
- 《LeetBook》leetcode题解(12):Integer to Roman[M]
我现在在做一个叫<leetbook>的免费开源书项目,力求提供最易懂的中文思路,目前把解题思路都同步更新到gitbook上了,需要的同学可以去看看 书的地址:https://hk029.g ...
- linux mint 18.2 安装wireshark
Method 1: Via PPA Step 1: Add the official PPA sudo add-apt-repository ppa:wireshark-dev/stable Step ...
- Struts2 resulttype
本文章只介绍较为常用的三种result type 1.dispatcher 2.redirect 3.redirectAction 一.dispatcher 用于转向JSP页面,这个是默认的结果类型, ...
- C#(winform)设置窗体的启动位置
只需要设置窗体的StartPosition属性: registerForm.StartPosition = FormStartPosition.CenterScreen; FormStartPosit ...
- ReferenceError: “alert” is not defined
用Node.js单独运行js文件时,其中定义的alert不可用 alert is not part of JavaScript, it's part of the window object prov ...
- webbrowser控件使用时的注意事项
如果HtmlElement内的没有信息,则HtmlElement的OuterText属性值为null:OuterHtml属性值则为相应的html值 如果使用OuterText属性,使用前要判断下.
- iOS开源项目周报0223
由OpenDigg 出品的iOS开源项目周报第九期来啦.我们的iOS开源周报集合了OpenDigg一周来新收录的优质的iOS开源项目,方便iOS开发人员便捷的找到自己需要的项目工具等.panelkit ...
- DataGridView 隔行显示不同的颜色
两种方法 第一种 DataGridview1.Rows[i].DefultCellStyle.backcolor 第二种 AlternatingRowsDefutCellstyle 属性 获取或设置应 ...