普通的询问是否删除的对话框比较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删除模态框弹出并询问是否删除【通用删除模态框】的更多相关文章

  1. bootstrap中popover.js(弹出框)使用总结+案例

    bootstrap中popover.js(弹出框)使用总结+案例 *转载请注明出处: 作者:willingtolove: http://www.cnblogs.com/willingtolove/p/ ...

  2. Js实例——模态框弹出层

    1.描述 百度登录就是一个模态框弹出层.思路分析:先将灰色大背景和登陆盒子设为不可见,利用JS将其动态加载可见. 2.代码 <!DOCTYPE html> <html> < ...

  3. Bootstrap历练实例:弹出框(popover)事件

    事件 下表列出了弹出框(Popover)插件中要用到的事件.这些事件可在函数中当钩子使用. 事件 描述 实例 show.bs.popover 当调用 show 实例方法时立即触发该事件. $('#my ...

  4. Bootstrap Modal多个弹出层顺序

    Bootstrap Modal多个弹出层顺序与div的顺序关联.后来者居上:即div靠后的modal层弹出的时候会在上层. 比如上图所示,模态框2弹出的时候会在模态框1上面.

  5. android 弹出的软键盘遮挡住EditText文本框的解决方案

    1.android 弹出的软键盘遮挡住EditText文本框的解决方案: 把Activit对应的布局文件filename.xml文件里的控件用比重设置布局.(例如:android:layout_wei ...

  6. 原生js日期时间插件鼠标点击文本框弹出日期时间表格选择日期时间

    原文出处 (这是我从互联网上搜来的,感觉能满足各方面的需求.个人感觉挺不错的,所以后期修改了一下向大家推荐!) 效果图: html代码: <!DOCTYPE html PUBLIC " ...

  7. 原生Js封装的弹出框-弹出窗口-页面居中-多状态可选

    原生Js封装的弹出框-弹出窗口-页面居中-多状态可选   实现了一下功能: 1.title可自定义 可拖拽 2.width height可以自定义 3.背景遮罩和透明度可以自定义 4.可以自己编辑弹出 ...

  8. 点击Input框弹出日期选项

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. Win7电脑无法安全删除硬件并弹出媒体的解决方法

    有很多用户经常会在win7系统中使用移动硬盘或U盘来拷贝数据,而当使用完了之后,一般为了数据能够更安全,都会右击选择安全删除硬件进行退出,可是有win7系统用户却发现要弹出设备的还好无法安全删除硬件并 ...

随机推荐

  1. [书目20140902]实战Windows Azure——微软云计算平台技术详解 --徐子岩

    目录第1章  云计算技术简介    1.1  云计算所要解决的问题    1.2  云计算平台的分类    1.3  微软云计算平台Windows Azure        1.3.1  高可用性   ...

  2. IO流的原理和概念

    在程序中如何读写文件?不同的编程语言有不同的方式,而 JAVA 则提出了“流”的概念,通过“流”来读写文件 什么是流: 流(Stream)是指一连串的数据(字符或字节),是以先进先出的方式发送信息的通 ...

  3. 第二章 TCP/IP 基础知识

    第二章 TCP/IP 基础知识   TCP/IP  transmission control protocol and ip internet protocol 是互联网众多通信协议中最为著名的.   ...

  4. ubuntu个人初始配置记录

    1.安装vim编辑器 sudo apt-get install vim vim-gnome. vim有vim(vim-basic),vim-tiny,vim-gnome(gvim)等多个版本,安装ub ...

  5. [转]1小时内打造你自己的PHP MVC框架

    简介 MVC框架在现在的开发中相当流行,不论你使用的是JAVA,C#,PHP或者IOS,你肯定都会选择一款框架.虽然不能保证100%的开发语言都会使用框架,但是在PHP社区当中拥有*多数量的MVC框架 ...

  6. 15年第六届蓝桥杯第七题_手链样式_(stl_string)

    手链样式 小明有3颗红珊瑚,4颗白珊瑚,5颗黄玛瑙.他想用它们串成一圈作为手链,送给女朋友.现在小明想知道:如果考虑手链可以随意转动或翻转,一共可以有多少不同的组合样式呢? 请你提交该整数.不要填写任 ...

  7. vue 写一个聊天工具

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. vue 表单操作

    <form class="mian__form" @submit.prevent="submit">     <ul>         ...

  9. django显示图片

    dirctory vickey_django vickey(projectname) vickey __init__.py __pycache__ settings.py urls.py wsgi.p ...

  10. Python入门之类(class)

    面向对象三大特性 面向对象的三大特性是指:封装.继承和多态. 一.封装 封装,顾名思义就是将内容封装到某个地方,以后再去调用被封装在某处的内容. 所以,在使用面向对象的封装特性时,需要: 将内容封装到 ...