bootstrap实现点击删除按钮弹出确认框的实例代码


Posted in Javascript onAugust 16, 2018

具体代码如下所示:

<%@ page language="java" import="com.student.servlet.*" contentType="text/html; charset=UTF-8"
  pageEncoding="UTF-8"%>
<%@page import="java.util.*" import="com.student.vo.User"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="bootstrap/bootstrap.min.css" rel="external nofollow" />
 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
 <script src="bootstrap/bootstrap.min.js"></script>
</head>
<body>
<script type="text/javascript">
$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').focus()
 })
</script>
<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">删除</button>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
 <div class="modal-dialog" role="document">
  <div class="modal-content">
   <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" id="exampleModalLabel">确认框</h4>
   </div>
   <div class="modal-body">
    <form>
    <div class="form-group">
      <label for="message-text" class="control-label">确定要删除联系人?</label>
     </div>
    </form>
   </div>
   <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">返回</button>
    <button type="button" class="btn btn-primary">确认</button>
   </div>
  </div>
 </div>
</div>
</body>
</html>

bootstrap实现点击删除按钮弹出确认框的实例代码bootstrap实现点击删除按钮弹出确认框的实例代码

总结

以上所述是小编给大家介绍的bootstrap实现点击删除按钮弹出确认框的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Javascript的一种模块模式
Mar 22 Javascript
jQuery EasyUI API 中文文档 - DataGrid数据表格
Nov 17 Javascript
如何制作浮动广告 JavaScript制作浮动广告代码
Dec 30 Javascript
解析使用js判断只能输入数字、字母等验证的方法(总结)
May 14 Javascript
jquery dialog open后,服务器端控件失效的快速解决方法
Dec 19 Javascript
js中scrollTop()方法和scroll()方法用法示例
Oct 03 Javascript
JavaScript中localStorage对象存储方式实例分析
Jan 12 Javascript
简单易懂的天气插件(代码分享)
Feb 04 Javascript
简单实现js进度条加载效果
Mar 25 Javascript
React Form组件的实现封装杂谈
May 07 Javascript
Vuex模块化应用实践示例
Feb 03 Javascript
webpack的 rquire.context用法实现工程自动化的方法
Feb 07 Javascript
浅谈Vue.js路由管理器 Vue Router
Aug 16 #Javascript
layui问题之模拟select点击事件的实例讲解
Aug 15 #Javascript
深入理解Vue router的部分高级用法
Aug 15 #Javascript
JS打印彩色菱形的实例代码
Aug 15 #Javascript
layui点击按钮添加可编辑的一行方法
Aug 15 #Javascript
layui 优化button按钮和弹出框的方法
Aug 15 #Javascript
jQuery实现参数自定义的文字跑马灯效果
Aug 15 #jQuery
You might like
如何获得PHP相关资料
2006/10/09 PHP
浅析php中如何在有限的内存中读取大文件
2013/07/02 PHP
WordPress自定义时间显示格式
2015/03/27 PHP
PHP连接MySQL数据库并以json格式输出
2018/05/21 PHP
PHP单例模式应用示例【多次连接数据库只实例化一次】
2018/12/18 PHP
PHP+mysql实现的三级联动菜单功能示例
2019/02/15 PHP
javascript 类定义的4种方法
2009/09/12 Javascript
jQuery .tmpl(), .template()学习资料小结
2011/07/18 Javascript
js正则表达式的使用详解
2013/07/09 Javascript
js实现照片墙功能实例
2015/02/05 Javascript
用svg制作富有动态的tooltip
2015/07/17 Javascript
JavaScript检测上传文件大小的方法
2015/07/22 Javascript
6种javascript显示当前系统时间代码
2015/12/01 Javascript
浅析Bootstrap组件之面板组件
2016/05/04 Javascript
Bootstrap table使用方法详细介绍
2016/12/09 Javascript
JavaScript实现短暂提示框功能
2018/04/04 Javascript
vue.js轮播图组件使用方法详解
2018/07/03 Javascript
vue 组件中添加样式不生效的解决方法
2018/07/06 Javascript
详解从NodeJS搭建中间层再谈前后端分离
2018/11/13 NodeJs
浅谈Webpack多页应用HMR卡住问题
2019/04/24 Javascript
微信小程序引入VANT组件的方法步骤
2019/09/19 Javascript
如何使用webpack打包一个库library的方法步骤
2019/12/18 Javascript
jstree中的checkbox默认选中和隐藏示例代码
2019/12/29 Javascript
JavaScript函数重载操作实例浅析
2020/05/02 Javascript
python中from module import * 的一个坑
2014/07/20 Python
Python装饰器使用示例及实际应用例子
2015/03/06 Python
使用Python来开发微信功能
2018/06/13 Python
Django中ORM外键和表的关系详解
2019/05/20 Python
俄罗斯隐形眼镜和眼镜在线商店:Cronos
2020/06/02 全球购物
人事科岗位职责范本
2014/03/02 职场文书
教师反腐倡廉演讲稿
2014/09/03 职场文书
2014普法依法治理工作总结
2014/12/18 职场文书
感谢信范文大全
2015/01/23 职场文书
总经理检讨书范文
2015/02/16 职场文书
2015年教导处教学工作总结
2015/07/22 职场文书
python获取对象信息的实例详解
2021/07/07 Python