一种基于Bootstrap的动态对话框的实现方法技术

本发明专利技术涉及Bootstrap技术领域，特别涉及一种无限层级显示并能直接提交表单的对话框的实现方法：一、在项目中引入所需脚本与样式并创建脚本工具类；二、创建对话框调用方法；三、在方法体中获取当前对象，定义层级索引并初始化；四、判断对象中modeId是否存在，不存在则创建；五、定义按钮及事件；六、定义扩展选项；七、在打开事件中计算层级索引及拼装按钮显示内容；八、在关闭事件中销毁对象；九、绑定扩展选项到modeId上，还原层级索引值。本发明专利技术解决了网页对话框弹出相互冲突、不能重复利用且不能直接提交表单的问题。

A realization method of dynamic dialog box based on Bootstrap

【技术实现步骤摘要】
一种基于Bootstrap的动态对话框的实现方法
本专利技术涉及Bootstrap
，特别涉及一种无限层级显示并能直接提交表单的对话框的实现方法。
技术介绍
随着网页技术的不断发展，网页设计中的简约之美也随之应运而生，扁平化、响应式、视觉差滚动、卡片式等给设计师带来了更多的发挥空间。简约的设计，也以其简洁直观、轻薄美观等特点，越来越受到设计师的追捧和大众的喜爱。简约设计是将设计回归本质的一种设计理念。简约并是对内容的简单删减，而是提炼设计精华，满足美观实用的本质诉求。在网页中，简约的设计，往往具清晰的页面结构、简单的交互操作等特征，在满足传递信息的同时，从视觉体验的角度，为用户带来轻松、愉悦的美感。专利技术的模态对话框，就是在Bootstrap扁平化的技术基础之上，对对话框中常用的的内容进行提炼，封装成可重复利用的方法。
技术实现思路
本专利技术解决的技术问题在于提供一种无限层级显示并能直接提交表单的对话框的实现方法；本专利技术解决了网页对话框弹出相互冲突、不能重复利用且不能直接提交表单的问题。本专利技术解决上述技术问题的技术方案是：一、在项目中引入所需脚本与样式并创建脚本工具类；二、创建对话框调用方法；三、在方法体中获取当前对象，定义层级索引并初始化；四、判断对象中modeId是否存在，不存在则创建；五、定义按钮及事件；六、定义扩展选项；七、在打开事件中计算层级索引及拼装按钮显示内容；八、在关闭事件中销毁对象；九、绑定扩展选项到modeId上，还原层级索引值。所述的方法具体包括如下步骤：步骤一、在项目中引入所需脚本与样式并创建脚本工具类，所述主要脚本与样式有jquery.js与jquery.css，bootstrap.js与boostrap.css；步骤二、创建对话框调用方法，所需参数有提交表单的Url、弹窗标题、回调函数等信息，其它可自行扩展；步骤三、在方法体中获取当前对象，定义层级索引并初始化；步骤四、判断对象中modeId是否存在，如果存在，根据对象取得；不存在则按时间值进行创建生成，并将其置于modalDiv中的id中，而modalDiv则附加到body对象中，最后把modeId添加到当前的对象中；步骤五、定义按钮及事件，所述的事件主要是进行表单验证，根据ajax提交表单以及返回的结果处理等;步骤六、定义扩展选项，所述的扩展选项基本属性有标题、窗口颜色、宽度、关闭按钮等，所述的扩展选项事件有正在打开、已打开及关闭等；步骤七、在选项中的onOpening中计算层级索引及拼装按钮显示内容；步骤八、在onClosed方法中销毁对象；步骤九、最后绑定扩展选项到modeId上，并还原层级索引值。本专利技术的有益效果：通过对模态对话框中的内容进行封装，自行计算弹出框索引值，实现了模态对话框可重复利用及能提交表单的目的。有效地解决了网页对话框弹出相互冲突、不能重复利用且不能直接提交表单的问题。附图说明下面结合附图对本专利技术进一步说明：图1为本专利技术的流程图。具体实施方式如图1所示，本专利技术采用如下步骤：步骤一、在项目中引入所需脚本与样式并创建脚本工具类，所述主要脚本与样式有jquery.js与jquery.css，bootstrap.js与boostrap.css；步骤二、创建对话框调用方法，所需参数有提交表单的Url、弹窗标题、回调函数等信息，其它可自行扩展；如：functionmsgDialog(submitUrl,title,handleFun,...){}三、在方法体中获取当前对象，定义层级索引并初始化；如：functionmsgDialog(submitUrl,title,handleFun,...){var$this=$(this);vardialog_zindex=999;}四、判断对象中modeId是否存在，如果存在，根据对象取得；不存在则按时间值进行创建生成，并将其置于modalDiv中的id中，而modalDiv则附加到body对象中，最后把modeId添加到当前的对象中；如：functionmsgDialog(submitUrl,title,handleFun,...){var$this=$(this);vardialog_zindex=999;varmodalId='';if($this.data("modalid")){modalId=$this.data("modalid");}else{modalId="modal-"+(newDate().getTime());varmodalDiv=$('<divid="'+modalId+'"></div>')$("body").append(modalDiv);modalId='#'+modalId;$this.data("modalid",modalId);}}五、定义按钮及事件，所述的事件主要是进行表单验证，根据ajax提交表单以及返回的结果处理等；如：varbuttons=[];if(submitUrl&&!initOptions.buttons){buttons=[{text:'保存',class:'buttonbSuccess',icon:'icon-baocun',handler:function(event){varmodal=event.data.modal;varform=$('#'+modal.id+'form');//如果验证没通过if(!form.Validform()){}if(form.valid()){varpara=form.serializeArray();$(".loadding-btn").removeClass("hide")$.ajax({url:submitUrl,data:para,type:"POST",success:function(json){$(".loadding-btn").addClass("hide")json=json||{};if(json.statusCode==200){if(handleFun){handleFun(json);}}});}}];}步骤六、定义扩展选项，所述的扩展选项基本属性有标题、窗口颜色、宽度、关闭按钮等，所述的扩展选项事件有正在打开、已打开及关闭等；如：varoptions=$.extend({title:'',he本文档来自技高网...

【技术保护点】
1.一种无限层级显示并能直接提交表单的对话框的实现方法，其特征在于：一、在项目中引入所需脚本与样式并创建脚本工具类；二、创建对话框调用方法；三、在方法体中获取当前对象，定义层级索引并初始化；四、判断对象中modeId是否存在，不存在则创建；五、定义按钮及事件；六、定义扩展选项；七、在打开事件中计算层级索引及拼装按钮显示内容；八、在关闭事件中销毁对象；九、绑定扩展选项到modeId上，还原层级索引值；从而本专利技术解决了网页对话框弹出相互冲突、不能重复利用且不能直接提交表单的问题。/n

【技术特征摘要】
1.一种无限层级显示并能直接提交表单的对话框的实现方法，其特征在于：一、在项目中引入所需脚本与样式并创建脚本工具类；二、创建对话框调用方法；三、在方法体中获取当前对象，定义层级索引并初始化；四、判断对象中modeId是否存在，不存在则创建；五、定义按钮及事件；六、定义扩展选项；七、在打开事件中计算层级索引及拼装按钮显示内容；八、在关闭事件中销毁对象；九、绑定扩展选项到modeId上，还原层级索引值；从而本发明解决了网页对话框弹出相互冲突、不能重复利用且不能直接提交表单的问题。


2.根据权利要求1所述的基于Bootstrap平台的一种无限层级显示并能直接提交表单的对话框的实现方法，其特征在于：对话框中的常见内容及提交事件在扩展选项中都进行了封装，自动计算弹出框之间的层级关系；所述的方法具体包括如下步骤：
步骤一、在项目中引入所需脚本与样式并创建脚本工具类，所述主要脚本与样式有jquery.js与jquery.css，boots...

【专利技术属性】
技术研发人员：陈林，张来卿，庞严冬，
申请(专利权)人：珠海横琴盛达兆业科技投资有限公司，
类型：发明
国别省市：广东;44