bootstrap删除模态框弹出并询问是否删除【通用删除模态框】
普通的询问是否删除的对话框比较low,可以利用bootstrap的模态框代替普通的对话框来实现删除。
效果:
点删除的时候弹出模态框询问是否删除,点确认的时候将需要删除的ID传到后台进行删除。
过程:
1.界面准备删除模态框:
模态框中隐藏需要删除的ID
<!-- 模态框 信息删除确认 -->
<div class="modal fade" id="delcfmOverhaul">
<div class="modal-dialog">
<div class="modal-content message_align">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">提示</h4>
</div>
<div class="modal-body">
<!-- 隐藏需要删除的id -->
<input type="hidden" id="deleteHaulId" />
<p>您确认要删除该条信息吗?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary"
id="deleteHaulBtn">确认</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
2.删除按钮:
<a href="javascript:void(0)" onclick="showDeleteModal(this)">删除</a>
结构:
3. 删除按钮点击事件:
根据传下来的obj获取到ID并设置到删除模态框中的隐藏域,同时打开询问是否删除的模态框
// 打开询问是否删除的模态框并设置需要删除的大修的ID
function showDeleteModal(obj) {
var $tds = $(obj).parent().parent().children();// 获取到所有列
var delete_id = $($tds[0]).children("input").val();// 获取隐藏的ID
$("#deleteHaulId").val(delete_id);// 将模态框中需要删除的大修的ID设为需要删除的ID
$("#delcfmOverhaul").modal({
backdrop : 'static',
keyboard : false
});
}
4. 删除模态框确定按钮的点击事件
获取到隐藏域的ID并传到后台进行删除,删除成功重新加载页面
function deleteHaulinfo() {
alert("你即将删除的大修ID" + $("#deleteHaulId").val())
}
$(function() {
// 删除大修模态框的确定按钮的点击事件
$("#deleteHaulBtn").click(function() {
// ajax异步删除
deleteHaulinfo();
});
});
bootstrap删除模态框弹出并询问是否删除【通用删除模态框】的更多相关文章
- bootstrap中popover.js(弹出框)使用总结+案例
bootstrap中popover.js(弹出框)使用总结+案例 *转载请注明出处: 作者:willingtolove: http://www.cnblogs.com/willingtolove/p/ ...
- Js实例——模态框弹出层
1.描述 百度登录就是一个模态框弹出层.思路分析:先将灰色大背景和登陆盒子设为不可见,利用JS将其动态加载可见. 2.代码 <!DOCTYPE html> <html> < ...
- Bootstrap历练实例:弹出框(popover)事件
事件 下表列出了弹出框(Popover)插件中要用到的事件.这些事件可在函数中当钩子使用. 事件 描述 实例 show.bs.popover 当调用 show 实例方法时立即触发该事件. $('#my ...
- Bootstrap Modal多个弹出层顺序
Bootstrap Modal多个弹出层顺序与div的顺序关联.后来者居上:即div靠后的modal层弹出的时候会在上层. 比如上图所示,模态框2弹出的时候会在模态框1上面.
- android 弹出的软键盘遮挡住EditText文本框的解决方案
1.android 弹出的软键盘遮挡住EditText文本框的解决方案: 把Activit对应的布局文件filename.xml文件里的控件用比重设置布局.(例如:android:layout_wei ...
- 原生js日期时间插件鼠标点击文本框弹出日期时间表格选择日期时间
原文出处 (这是我从互联网上搜来的,感觉能满足各方面的需求.个人感觉挺不错的,所以后期修改了一下向大家推荐!) 效果图: html代码: <!DOCTYPE html PUBLIC " ...
- 原生Js封装的弹出框-弹出窗口-页面居中-多状态可选
原生Js封装的弹出框-弹出窗口-页面居中-多状态可选 实现了一下功能: 1.title可自定义 可拖拽 2.width height可以自定义 3.背景遮罩和透明度可以自定义 4.可以自己编辑弹出 ...
- 点击Input框弹出日期选项
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Win7电脑无法安全删除硬件并弹出媒体的解决方法
有很多用户经常会在win7系统中使用移动硬盘或U盘来拷贝数据,而当使用完了之后,一般为了数据能够更安全,都会右击选择安全删除硬件进行退出,可是有win7系统用户却发现要弹出设备的还好无法安全删除硬件并 ...
随机推荐
- [书目20140902]实战Windows Azure——微软云计算平台技术详解 --徐子岩
目录第1章 云计算技术简介 1.1 云计算所要解决的问题 1.2 云计算平台的分类 1.3 微软云计算平台Windows Azure 1.3.1 高可用性 ...
- IO流的原理和概念
在程序中如何读写文件?不同的编程语言有不同的方式,而 JAVA 则提出了“流”的概念,通过“流”来读写文件 什么是流: 流(Stream)是指一连串的数据(字符或字节),是以先进先出的方式发送信息的通 ...
- 第二章 TCP/IP 基础知识
第二章 TCP/IP 基础知识 TCP/IP transmission control protocol and ip internet protocol 是互联网众多通信协议中最为著名的. ...
- ubuntu个人初始配置记录
1.安装vim编辑器 sudo apt-get install vim vim-gnome. vim有vim(vim-basic),vim-tiny,vim-gnome(gvim)等多个版本,安装ub ...
- [转]1小时内打造你自己的PHP MVC框架
简介 MVC框架在现在的开发中相当流行,不论你使用的是JAVA,C#,PHP或者IOS,你肯定都会选择一款框架.虽然不能保证100%的开发语言都会使用框架,但是在PHP社区当中拥有*多数量的MVC框架 ...
- 15年第六届蓝桥杯第七题_手链样式_(stl_string)
手链样式 小明有3颗红珊瑚,4颗白珊瑚,5颗黄玛瑙.他想用它们串成一圈作为手链,送给女朋友.现在小明想知道:如果考虑手链可以随意转动或翻转,一共可以有多少不同的组合样式呢? 请你提交该整数.不要填写任 ...
- vue 写一个聊天工具
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue 表单操作
<form class="mian__form" @submit.prevent="submit"> <ul> ...
- django显示图片
dirctory vickey_django vickey(projectname) vickey __init__.py __pycache__ settings.py urls.py wsgi.p ...
- Python入门之类(class)
面向对象三大特性 面向对象的三大特性是指:封装.继承和多态. 一.封装 封装,顾名思义就是将内容封装到某个地方,以后再去调用被封装在某处的内容. 所以,在使用面向对象的封装特性时,需要: 将内容封装到 ...