基于BootStarp的Dailog

BootStrip简介

Bootstrap,来自 Twitter,是目前很受欢迎的前端框架。

Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。 它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。

Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目。 国内一些移动开发者较为熟悉的框架,如WeX5前端开源框架等,也是基于Bootstrap源码进行性能优化而来。

1.1. 帮助文档关键字

boostrap模态框oaoDailog

1.2. 使用场景

当网页上点击某个按钮需要给予用户提示确认,用户点击确认按钮才能继续执行,或者用户点击取消按钮则取消执行操作;

当网页上点击查看,展示的数据需要使用弹出框展示的情况下,可以使用oaoDailog

1.3. 原理图

基于boostrap3.0的modal,jquery1.9

1.4. 使用说明

为什么需要oaoDailog?

a.由于boostrap3.0提供的modal,必须要在页面上先定义一个modal的div隐藏代码用户将需要展示的内容写到该div中,如果一个页面有多种模态框,则需要写多个隐藏的模态框div隐藏代码,无疑这是多余的。

b.由于默认的modal是没有确认和取消按钮的,当然我们可以写两个button在模态框的隐藏div中,但是我们同时需要写js去监控确认按钮点击后执行的操作,同时确认按钮执行的操作,跟弹出时用户点击的数据有关系,数据如何传递,bootstrap没有给我们提供。

c. oaoDailog1.0.0版本主要就是解决bootstrap的模态框使用不方便,代码冗余的问题。

效果图:

开始使用

1、 引入oaoDailog.js

Code:

2、 调用展示弹出框的代码

Code:

删除提示框",content:"请确认是否真的删除删除后将无法恢复!",ok:function(){ oao.dialog.close(); } });

这就是一个基本也是使用最常见的确认弹出框的使用方法

1.5. API

oao.dialog():这个方法生成弹出框的方法,传入的参数是一个json对象,当然你也可以什么都不传,那样会弹出一个空白的弹出框,这是没有问题的。下面分别介绍每个参数的意思以及默认值。

属性名

属性类型

title

String

弹出框标题

提示

content

String

弹出框的主要内容,可以是文本和HTML代码

okVal

String

确认按钮的自定义文字

确认

ok

Function/boolean

点击确认执行的方法

关闭功能

cancelVal

String

取消按钮的自定义文字

取消

cancal

Function/boolean

点击取消执行的方法

关闭功能

•oao.dialog.close():关闭模态框

1.6. 待支持功能 1.目前弹出框的内容支持文字和静态html,不支持url请求

2.目前最多只能显示两个按钮,不支持自定义按钮,后续支持

3.目前弹出框的位置和大小不支持自定义

4.目前的弹出框一次只能弹出一个,不支持弹出框中再弹出一个模态框(bootstrap modal底层不支持)

敬请期待,下个版本见。

提示",content:"",okVal:"确认",cancalVal:"取消",ok:function(){ $("#oaoModal").modal('hide'); },cancel:function(){ $("#oaoModal").modal('hide'); },close:false } oao.settings = $.extend({},defaultSettings,settings || {}); return oao.settings; } oao.initContent = function(){ var modelHtml = "
"+ "
"+ "

"+ "

"+ "
"+ "
"+ "
"+ "
"+ "
"+ "
"; var $modelHtml = $(modelHtml); $(".modalOK",$modelHtml).text(oao.settings.okVal); $(".modalCancel",$modelHtml).text(oao.settings.cancalVal); $(".modal-title",$modelHtml).text(oao.settings.title); $(".modal-body",$modelHtml).html(oao.settings.content); if(!oao.settings.ok){ $(".modalOK",$modelHtml).remove(); } if(!oao.settings.cancel){ $(".modalCancel",$modelHtml).remove(); } $("body").append($modelHtml); } //弹出对话框的方法 oao.dialog = function(settings){ settings = oao.init(settings); oao.initContent(); //关闭的时候调用方法 $('#oaoModal').on('hidden.bs.modal',function (e) { if(oao.settings.close){ oao.settings.close(); } $("#oaoModal").remove(); }) if(oao.settings.ok){ $("#oaoModal .modalOK").click(settings.ok); } if(oao.settings.cancel){ $("#oaoModal .modalCancel").click(settings.cancel); } $("#oaoModal").modal('show') .css({ "margin-top": function () { return ($(this).height() / 2-200); } });; } //关闭对话框的方法 oao.dialog.close = function(){ $("#oaoModal").modal('hide'); }

相关文章

事件冒泡和事件捕获 起因:今天在封装一个bind函数的时候,发现el.addEventListener函数支持第三个参数...
js小数运算会出现精度问题 js number类型 JS 数字类型只有number类型,number类型相当于其他强类型语言...
什么是跨域 跨域 : 广义的跨域包含一下内容 : 1.资源跳转(链接跳转,重定向跳转,表单提交) 2.资源...
@ "TOC" 常见对base64的认知(不完全正确) 首先对base64常见的认知,也是须知的必须有...
搞懂:MVVM模式和Vue中的MVVM模式 MVVM MVVM : 的缩写,说都能直接说出来 :模型, :视图, :视图模...
首先我们需要一个html代码的框架如下: 我们的目的是实现ul中的内容进行横向的一点一点滚动。ul中的内容...