Bootstrap模态框的基本使用（复制可用）

Bootstrap模态框的基本使用

前言：bootstrap基本的增删改案例，代码直接复制可用。

注意：如果没效果，可能是引用的js地址已改变。

1、效果预览

总览：

新增：

编辑：

删除：

查看视频：

2、代码

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --><title>Bootstrap基本增删改</title><!-- Bootstrap --><link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"><!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) --><script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 --><script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script><style></style>
</head>
<body><!-- 内容都放在这个里面 --><nav class="navbar navbar-default"><div class="container-fluid"><!-- Collect the nav links, forms, and other content for toggling --><div class="collapse navbar-collapse"><ul class="nav navbar-nav"><li class="active"><a href="#">Bootstrap案例</a></li></ul><form class="navbar-form navbar-right"><div class="form-group"><input type="text" name="keyword" class="form-control" placeholder="请输入关键字"></div><button class="btn btn-default" onclick="vmt_form_search()">查询</button></form></div><!-- /.navbar-collapse --></div><!-- /.container-fluid --></nav><div style="margin:20px;"><!-- 新增按钮 --><div style="margin:10px;"><button class="btn btn-primary saveModal">新增</button><button class="btn btn-primary" onclick=output_excel()>查看视频</button></div><!-- 表格 START --><table class="table table-striped table-bordered"><tr class="active"><th>标题</th><th>图片</th><th>类型</th><th width=200px>创建时间</th><th width=150px>操作</th></tr><tr class="success"><th>来日方长</th><th><a href="#" target="_blank">查看</a></th><th>无限</th><th>2018-07-31</th><th><button class="btn btn-primary btn-sm saveModal" id="1">编辑</button><button class="btn btn-primary btn-sm"  id="1" onclick=" _confirm('确定要删除[来日方长]吗? ','_delete',1) ">删除</button></th></tr><tr class="info"><th>来日并不方长</th><th><a href="#" target="_blank">查看</a></th><th>有限</th><th>2018-07-31</th><th><button class="btn btn-primary btn-sm saveModal" id="2">编辑</button><button class="btn btn-primary btn-sm"  id="2" onclick=" _confirm('确定要删除[来日并不方长]吗? ','_delete',2) ">删除</button></th></tr><tr class="warning"><th>来日方长2号</th><th><a href="# target="_blank">查看</a></th><th>无限</th><th>2018-07-31</th><th><button class="btn btn-primary btn-sm saveModal" id="3">编辑</button><button class="btn btn-primary btn-sm"  id="3" onclick=" _confirm('确定要删除[来日并不方长]吗? ','_delete',3) ">删除</button></th></tr><tr class="danger"><th>来日并不方长2号</th><th><a href="#" target="_blank">查看</a></th><th>有限</th><th>2018-07-31</th><th><button class="btn btn-primary btn-sm saveModal" id="4">编辑</button><button class="btn btn-primary btn-sm"  id="4" onclick=" _confirm('确定要删除[来日并不方长]吗? ','_delete',4) ">删除</button></th></tr><tr class="active"><th>并不方长</th><th><a href="#" target="_blank">查看</a></th><th>其他</th><th>2018-07-31</th><th><button class="btn btn-primary btn-sm saveModal" id="5">编辑</button><button class="btn btn-primary btn-sm"  id="5" onclick=" _confirm('确定要删除[来日并不方长]吗? ','_delete',5) ">删除</button></th></tr></table><!-- 表格 END --><!-- 展示页数 --><div style="text-align:center;"><nav aria-label="Page navigation"><ul class="pagination"> <li></li><li class="active"><a>1</a></li><li></li><li><span>共 5 行 第1/1  页</span></li></ul></nav>   </div>
</div><!--模态框 弹出[新增|编辑]界面 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"aria-labelledby="myModalLabel" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal"aria-hidden="true">&times;</button><h4 class="modal-title" id="myModalLabel">新增</h4></div><!-- 内容 --><div class="modal-body"><!-- 表单 --><form id="adduser" class="form-horizontal" role="form"><div class="form-group"><label for="username" class="col-sm-2 control-label">标题</label><div class="col-sm-10"><input type="text" class="form-control" id="title" name="title" placeholder="标题"></div></div><div class="form-group"><label for="username" class="col-sm-2 control-label">地址</label><div class="col-sm-10"><input type="text" class="form-control" id="url" name="url" value="http://" placeholder="图片地址"></div></div><div class="form-group"><label for="mobile" class="col-sm-2 control-label">类型</label><div class="col-sm-10"><div class="radio"><label><input type="radio" name="type" value="1" checked/>有限</label>&nbsp;<label class="margin-left-2em"><input type="radio" name="type"  value="2"/>无限</label>&nbsp;<label class="margin-left-2em"><input type="radio" name="type"  value="3"/>其他</label></div></div></div><!-- 创建时间后台直接获取  --><!-- 隐藏表单，接收ID --><div class="form-group"><div class="col-sm-10"><input type="hidden" class="form-control" id="id" name="id"></div></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 saveBtn">确定</button></div></div><!-- /.modal-content --></div>
</div><!--模态框 弹出视频界面 -->
<div class="modal fade" id="vmt_video_detail" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"><div class="modal-dialog"><div class="modal-content" style="width:900px;height:450px"><!-- 在这设置modal的宽高 --><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button><h4 class="modal-title" id="myModalLabel">视频详情</h4></div> <!-- 内容 --><div class="modal-body"><div><div style="float:left;width:500px;height:300px;"><video class="vmt_video_src_class" id="vmt_video_src_id" width="500px" height="300px" src="" controls="controls"></video></div><div style="margin-left:510px;"><h3 class="vmt_template_name_class"></h3><ul style="margin-top:30px"><li><p><i class='glyphicon glyphicon-picture'></i>&nbsp;最多30张图片</p></li><li><p><i class='glyphicon glyphicon-time'></i>&nbsp;最长10分钟</p></li><li><p><i class='glyphicon glyphicon-object-align-right'></i>&nbsp;不限横竖版</p></li><li><p><i class='glyphicon glyphicon-fire'></i>&nbsp;已有181人使用</p></li></ul><div style="margin-top:75px;margin-left:80px"><a type="button" class="btn btn-info col-md-8 vmt_choose_temp_calss">创建视频</a></div></div></div></div><!-- <div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">取消</button><button type="button" class="btn btn-primary" onclick=vmi_saveVideoName(this)>确定</button></div>--></div><!-- /.modal-content --></div>
</div><!-- 模态框 END --><script>$(function () { //关闭视频模态框时，视频停止播放$('#vmt_video_detail').on('hide.bs.modal', function () {var this_video = $('#vmt_video_src_id')[0];this_video.currentTime = 0;    //属性设置或返回音频/视频播放的当前位置（以秒计）。当设置该属性时，播放会跳跃到指定的位置。this_video.pause();});});//弹出视频模态框操作，并根据class动态显示模态框中的数据function output_excel(){$('#vmt_video_detail').modal('show')$('#vmt_video_detail').find('.vmt_template_name_class').text('动态显示头');   //动态显示头$('#vmt_video_detail').find('.vmt_video_src_class').attr('src', 'http://d.itheima.com:81//dd/Python/Scrapy%E7%88%AC%E8%99%AB%E6%A1%86%E6%9E%B6/00.Scrapy%E6%9E%B6%E6%9E%84%E6%B5%81%E7%A8%8B%E4%BB%8B%E7%BB%8D.mp4');    //动态显示url地址//$('#vmt_video_detail').find('.vmt_choose_temp_calss').attr('href', '#');$('#vmt_video_detail').find('.vmt_choose_temp_calss').click(function(){ _alert('点我干嘛！'); });}//新增，编辑操作，根据 class saveModal确定$('.saveModal').click(function(){var str = $(this).text();//新增或编辑var id = $(this).attr('id');var modalObj = $('#myModal');//弹出框对象modalObj.find('#myModalLabel').text(str);//moda 头部_reset( modalObj.find('form') );//重置表单$('#upid').removeAttr("disabled");//menu 特殊处理 可选择父级$('.buttonsDiv').remove();//menu 特殊处理 移除buttons$("#ausername,#apassword").removeAttr('disabled');//user 特殊处理if( str == "编辑" ){//编辑时Ajax后台请求数据，这里前端直接写死/* $.ajax({url:'/module/controller/action',cache:false,type:'get',dataType:'json',//async:false,//同步data:{ id : id},success:function(data){if( data.status == 'error' ){_alert( data.message );return false;}else{renderDataToHtml( data );//  渲染数据$('#myModal').modal('show');//显示出弹出层}},error:function(){_alert('系统出现问题，请联系管理员！');}}); *///START js获取数据，模拟数据请求var data = getEditJsonDataById(id);renderDataToHtml( data );//  渲染数据$('#myModal').modal('show');//显示出弹出层//END 模拟数据请求}else{$('#myModal').modal('show');//显示出弹出层}});/**@todo 点击保存按钮,添加，编辑确认按钮*/$('.saveBtn').click(function(){var modalObj = $(this).parents('#myModal');//弹出框对象var str = modalObj.find( '#myModalLabel' ).text();//moda 头部var url = ( str == "新增" ? 'add':'edit' );var data = modalObj.find('form').serialize();//把这里与后台交互的Ajax直接改为弹出框操作/*$.ajax({url:url,data:data,cache:false,dataType:'json',type:'post',success:function(result){//成功提示模态框if( result === false )_alert( '系统出现问题，请联系管理员！' )if(result.status=='success'){_alert(result.message,1);$('#myModal').modal('hide');//隐藏}else{//失败提示模态框_alert(result.message)}},error:function(){_alert('系统出现问题，请联系管理员！');}});*///START 模拟成功_alert( '模拟'+str+'成功！',1);$('#myModal').modal('hide');//隐藏//END 模拟成功});/*** @todo 表单重置* @params obj  可传对象  也可以传class或id名 示例  _reset($('#id')) _reset('#id')  _reset('.class')  _reset( this )*/function _reset( obj ){if(!(  obj instanceof jQuery )){//如果不是对象的话obj = $( obj )}obj[0].reset();//重置表单obj.find( 'input[type="hidden"]').val('');//解决不支持隐藏表单reset的浏览器}//在公共的js页面中加入此段代码，即可禁止所有modal加载缓存的内容！/*$('body').on('hidden.bs.modal', '.modal', function () {$(this).removeData('bs.modal');});*//*** @todo 弹出提示框 2秒后消失* content 提示内容* url 跳转链接  1本地刷新  链接跳转 可不传 不传不跳转*/function _alert(content,url){var str = '<div class="modal fade" id="modalTip" tabindex="-1" role="dialog"   aria-labelledby="myModalLabel" aria-hidden="true">'+ '<div class="modal-dialog">'+ '<div class="modal-content">'+ '<div class="modal-body">'+ content+ '</div>'+ '</div>'+ '</div>'+ '</div>';$('body').append(str);$('#modalTip').modal('show');setTimeout(function(){$('#modalTip,.modal-backdrop').remove();if( url != null ){//暂时注释页面刷新操作/* if(  url == 1 )location.reload();elselocation.href = url; */}},2000)}//如果是编辑操作，数据回显操作function renderDataToHtml(data){$("#id").val(data['id']);    //给隐藏表单主键ID赋值$("#title").val(data['title']);$("#url").val(data['url']);$('input[type="radio"][name="type"][value="'+ data['type'] +'"]').prop("checked",'checked');//$('#myModal').find("#ausername,#apassword").attr('disabled','disabled');//admin与其他用户的不同//不能更改超管的角色(隐藏方框)/* if(data['username']=='admin'){$('#changeStatus,#roleChoose').hide();}else{$('#changeStatus,#roleChoose').show();} */     }/**@todo 删除一行数据* @params params id 数据id*/function _delete( id ){$.ajax({url : 'delete',data:{ id :  id },type:'get',dataType:'json',cache:false,success:function(result){if(result.status=='success'){_alert( result.message ,1);}else{_alert( result.message );}},error:function(){_alert('系统出现问题，请联系管理员！');}});}//删除操作/**@todo 确认框* content内容* callbackFun 点击确认 回调函数名称* params回调函数的参数值 可不填  多参数可用数组形式 例如  _confirm('确定要删除该菜单吗? ','delMenu',['1','del'])*/function _confirm(content,callbackFun,params){var str = '<div class="modal fade" id="modalConfirm" tabindex="-1" role="dialog"    aria-labelledby="myModalLabel" aria-hidden="true">'+'<div class="modal-dialog">'+'<div class="modal-content">'+'<div class="modal-header">'+'<button type="button" class="close" data-dismiss="modal"   aria-hidden="true">&times;</button>'+'<h4 class="modal-title" id="myModalLabel">温馨提示</h4>'+'</div>'+'<div class="modal-body"> ' + content + '</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').append(str);$('#modalConfirm').modal('show');$('#modalConfirm .btn-primary').click(function(){if( callbackFun != null )window[ callbackFun ](params);$('#modalConfirm,.modal-backdrop').remove();});}//前端写死数据用于数据回显function getEditJsonDataById(id){var data = [     '{"id":1,"title":"来日方长","url":"http://1","type":2,"create_time":"2018-07-31"}','{"id":2,"title":"来日并不方长","url":"http://2","type":1,"create_time":"2018-07-31"}', '{"id":3,"title":"来日方长2号","url":"http://3","type":2,"create_time":"2018-07-31"}', '{"id":4,"title":"来日并不方长2号","url":"http://4","type":1,"create_time":"2018-07-31"}', '{"id":5,"title":"并不方长","url":"http://5","type":3,"create_time":"2018-07-31"}', ];var  dataStr =  data[id-1];var dataObj = eval('(' + dataStr + ')');  //字符串转json对象return dataObj;}
</script>
</body>
</html>

Bootstrap模态框的基本使用（复制可用）相关推荐

html遮罩层模态提示,页面遮罩层，并且阻止页面body滚动。bootstrap模态框原理，.bootstrap模态...
页面遮罩层,并且阻止页面body滚动.bootstrap模态框原理,.bootstrap模态实现思路: 1.需要有一个层将body遮住,放在body上方. 2.修改body的overflow属性值为 ...
html拖拽模态框,bootstrap模态框实现拖拽效果
本文实例为大家分享了bootstrap模态框实现拖拽效果,供大家参考,具体内容如下项目中用的有点乱,jquery和angularjs一起搞,有些插件用的jquery版本的,有的插件用的ng版本的.搞 ...
Bootstrap模态框使用WebUploader点击失效问题解决
Bootstrap模态框使用WebUploader点击失效问题解决参考文章: (1)Bootstrap模态框使用WebUploader点击失效问题解决 (2)https://www.cnblogs. ...
bootstrap 模态框满屏_如何设置Bootstrap模态框modal的高度和宽度?
以下图片是Bootstrap4模态框默认大小,一般情况Bootstrap模态框有两个默认大小,一个是"modal-sm" 小模态框,一个是"modal-lg"大 ...
bootstrap 模态框满屏_解决Ueditor在bootstarp 模态框中全屏问题
基本的一些配置就不说了.先说一下要注意的问题:首先是zIndex的设置.记住最好都显示设置模态框和ueditor的zIndex.理清他们的层叠关系. 特别是用到ueditor里面的图片上传功能的更要设 ...
前端之bootstrap模态框
简介:模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. Modal简介 Modal实现弹出表单 M ...
bootstrap模态框垂直居中显示
在用bootstrap模态框时,特别是小尺寸的模态框时,其显示位置接近屏幕顶端,在网上查找之后,找到了让模态框居中显示的实现.代码如下 function centerModals(){$('.moda ...
Bootstrap 模态框插件Modal 的事件
事件 Bootstrap模态框插件modal提供了 4 个事件,通过监听这些事件,可以对特定操作阶段的用户行为作出响应.这些事件及含义见表 5‑2. 表 5‑2 Bootstrap模态框插件modal ...
Bootstrap 模态框插件Modal 的方法
方法 Bootstrap模态框插件Modal的方法主要用来打开.关闭.隐藏Bootstrap模态框插件Modal: 1..modal(options) 使用一个可选的对象参数 options 调用 B ...
Bootstrap 模态框插件Modal 的选项
选项 Bootstrap模态框插件modal提供了 4 个选项,所有的选项都可以通过 data 属性或 JavaScript 进行设置.见表 5‑1: 表 5‑1 Bootstrap模态框插件moda ...

Bootstrap模态框的基本使用（复制可用）

Bootstrap模态框的基本使用（复制可用）相关推荐

最新文章

热门文章