(第一步)引入bootstrap所需要样式与js。
<!-- Bootstrap --> <!-- 新 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css"> <!-- 可选的Bootstrap主题文件(一般不用引入) --> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap-theme.min.css"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <![endif]--> <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
(第二步)HTML定义一个DIV。
<div class="modal fade" id="myModal"> <div class="modal-dialog modal-sm"> <img alt="" src="data:image/gif;base64,R0lGODlhGQAZAJECAK7PTQBjpv///wAAACH/C05FVFNDQVBFMi4wAwEAAAAh/wtYTVAgRGF0YVhNUDw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo5OTYyNTQ4Ni02ZGVkLTI2NDUtODEwMy1kN2M4ODE4OWMxMTQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RUNGNUFGRUFGREFCMTFFM0FCNzVDRjQ1QzI4QjFBNjgiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RUNGNUFGRTlGREFCMTFFM0FCNzVDRjQ1QzI4QjFBNjgiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjk5NjI1NDg2LTZkZWQtMjY0NS04MTAzLWQ3Yzg4MTg5YzExNCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo5OTYyNTQ4Ni02ZGVkLTI2NDUtODEwMy1kN2M4ODE4OWMxMTQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4B//79/Pv6+fj39vX08/Lx8O/u7ezr6uno5+bl5OPi4eDf3t3c29rZ2NfW1dTT0tHQz87NzMvKycjHxsXEw8LBwL++vby7urm4t7a1tLOysbCvrq2sq6qpqKempaSjoqGgn56dnJuamZiXlpWUk5KRkI+OjYyLiomIh4aFhIOCgYB/fn18e3p5eHd2dXRzcnFwb25tbGtqaWhnZmVkY2JhYF9eXVxbWllYV1ZVVFNSUVBPTk1MS0pJSEdGRURDQkFAPz49PDs6OTg3NjU0MzIxMC8uLSwrKikoJyYlJCMiISAfHh0cGxoZGBcWFRQTEhEQDw4NDAsKCQgHBgUEAwIBAAAh+QQFCgACACwAAAAAGQAZAAACTpSPqcu9AKMUodqLpAb0+rxFnWeBIUdixwmNqRm6JLzJ38raqsGiaUXT6EqO4uIHRAYQyiHw0GxCkc7l9FdlUqWGKPX64mbFXqzxjDYWAAAh+QQFCgACACwCAAIAFQAKAAACHYyPAsuNH1SbME1ajbwra854Edh5GyeeV0oCLFkAACH5BAUKAAIALA0AAgAKABUAAAIUjI+py+0PYxO0WoCz3rz7D4bi+BUAIfkEBQoAAgAsAgANABUACgAAAh2EjxLLjQ9UmzBNWo28K2vOeBHYeRsnnldKBixZAAA7" /> </div><!-- /.modal-dialog --> </div><!-- /.modal -->
(第三步)定义显示/隐藏函数。
function hideModal(){ $('#myModal').modal('hide'); } function showModal(){ $('#myModal').modal({backdrop:'static',keyboard:false}); }
(第四步)测试。
function initCalendar(){ if(window.confirm('确定初始化?')){ var moment = cal.fullCalendar('getDate'); var y = moment.format(); var sp = y.split("-"); $.ajax({ url: "./FullCanlendarInit", async:false, type:"POST", data:{year:sp[0]}, beforeSend:function (){ showModal(); }, success: function(data){ if(data.success==='init'){ alert("init ok"); hideModal(); }else{ alert("init error"); hideModal(); } } }); window.location.reload(); } }
OK,测试完成,好用。
以上代码,在工作日历当中使用。
相关推荐
Laravel-Bootstrap-Modal-Form, 使用AJAX提交模式中的Bootstrap 表单,使用 Laravel 验证 Laravel-Bootstrap-Modal-Form你的Laravel 应用程序的表单验证扩展插件。 在将 Bootstrap 窗体嵌入到 Bootstrap/jquery模式...
在实现基于Bootstrap的动态表单时,我们通常会借助一些工具或库,如本例中提到的"Bootstrap Form Builder"。这个工具可能是一个基于GitHub的项目,版本为20160522(根据压缩包文件名推测)。它允许用户通过拖放方式...
在这款基于Bootstrap 3的提交按钮特效中,我们重点关注的是其内置的loading指示器,这是一种增强用户体验的有效手段,尤其是在用户提交表单时提供反馈。 加载指示器(Loading Indicator)是网页设计中一种常见的...
8. **AJAX**:为了提升用户体验,可以使用AJAX技术在不刷新页面的情况下提交表单数据或加载新步骤,这需要对JSON和服务器端接口有基本了解。 9. **错误处理和验证**:表单向导的每一步都应包含有效的数据验证,确保...
Bootstrap表单验证是一种在网页开发中常用的技术,用于确保用户在提交表单前输入的数据有效、完整且符合预设规则。Bootstrap,一个流行的前端开发框架,提供了美观的UI组件和强大的交互功能,其中包括表单验证功能。...
标题中的“基于Bootstrap.3的文件上传效果, 可拖拽上传、预览的HTML5文件上传插件.zip”指的是一个使用Bootstrap 3框架和HTML5技术实现的高级文件上传功能。这个插件允许用户通过拖放操作上传文件,并且在上传前可以...
在MVC框架与Bootstrap框架结合之后,进行Ajax表单验证成为了一项常见且有用的实践。通过这种方式,我们可以在客户端与服务器之间实现无缝的数据交互和表单验证,同时也能利用Bootstrap提供的美观样式来改善用户界面...
Bootstrap 3、JQuery、RegExp 表单验证功能的实现知识点: Bootstrap 3 是一款广泛使用的前端框架,提供了一套响应式的栅格系统、预设的样式和基于HTML的模板,使得网页设计更加简洁和高效。Bootstrap 3 默认包含了...
这个基于Bootstrap4的Material Design风格表单插件,主要目标是提供一种方式,让开发者能够轻松地将Bootstrap4的默认样式转换为Material Design风格。表单元素,特别是输入框和文本框,会呈现出Material Design的...
最后,表单提交时,通常会使用AJAX技术将数据发送到服务器进行验证。在上述示例中,表单的`action`属性指向`Admin_ChkLogin_G.asp`,但实际的登录验证应通过异步方式处理,以提供更好的用户体验。 总结来说,创建一...
4. **表单提交处理**:jQuery可以监听表单的提交事件,阻止默认的表单提交行为,而是通过Ajax发送请求到服务器进行验证和处理。 5. **错误提示**:如果登录失败,jQuery可以用来显示错误信息,指导用户修正错误。 ...
公共ajax,动态bootstraptable生成,表单赋值,时间转换,单位转换 基于前端公用js功能
Bootstrap的表单控件可以帮助快速创建这些元素,并且可以进行自定义样式调整,如边框、圆角和悬停效果。 5. **用户状态和头像**:聊天应用中常常包含用户头像和在线状态指示。Bootstrap的图像组件和自定义CSS可以...
6. **AJAX提交表单**:使用jQuery的$.ajax()方法无刷新地提交表单,实现实时数据交互,同时处理成功和失败的回调函数。 7. **JSON数据交互**:可能涉及到将表单数据转换为JSON格式,以便于与服务器进行数据交换。 ...
BootstrapValidator还可以与AJAX提交表单结合,通过验证后异步提交数据,提供无刷新的用户体验。 综上所述,BootstrapValidator是Web开发中一个强大的工具,它使得在Bootstrap3环境下创建功能完善的、具有验证功能...
在本项目中,jQuery可能被用于触发弹出框的显示和隐藏,处理用户输入验证,以及在表单提交时发送Ajax请求,实现无刷新的用户体验。 2. **Bootstrap**:Bootstrap提供了响应式布局,意味着页面可以根据设备屏幕尺寸...
从标签“bootstrap”我们可以推断,这个设计器完全兼容Bootstrap的样式和结构,因此创建的表单将自然地融入到采用Bootstrap构建的网页中,保持一致的视觉效果和用户体验。 在提供的压缩包子文件名称列表中,“css3-...
SSM+Bootstrap+Ajax项目OA系统是一个基于Java技术栈,结合前端Bootstrap框架和Ajax技术构建的企业级办公自动化(OA)系统。在这个系统中,开发者利用了Spring、Spring MVC(SSM)三大框架的优势,实现了后端业务逻辑...
BootstrapValidator是一款强大的表单验证插件,它基于前端框架Bootstrap设计,可以轻松地为你的HTML表单添加验证功能。这个插件提供了丰富的验证规则和灵活的配置选项,以确保用户输入的数据符合预设条件,从而增强...
8. **异步上传**:通常配合Ajax或Fetch API实现无刷新的后台上传,提供更好的用户体验。 9. **插件集成**:Bootstrap的上传工具可能已经集成了像jQuery这样的库,或者与其他流行库(如jQuery UI或Vue.js)兼容,...