基于BootStarp的Dailog

Bootstrap——现代Web开发的一股清泉

Bootstrap，一个来自Twitter的流行前端框架，为Web开发者提供了简洁灵活的解决方案。由Twitter的设计师Mark Otto和Jacob Thornton联手打造，Bootstrap是一个CSS/HTML框架，基于HTML、CSS和JavaScript构建。自从推出以来，Bootstrap一直是GitHub上的热门开源项目，被众多知名网站如NASA的MSNBC采用。

今天，我们要聚焦于Bootstrap的一个关键组件——基于Bootstrap的Dailog（我们称之为oaoDailog）。

一、关于oaoDailog

oaoDailog是为了解决Bootstrap模态框使用不便、代码冗余的问题而诞生的。在Web开发中，我们经常需要用到模态框，比如点击按钮需要用户确认，或者展示数据时需要使用弹出框。而Bootstrap自带的modal虽然功能强大，但在某些使用场景下显得不够灵活。

二、使用场景

oaoDailog适用于以下场景：

1. 当网页上点击某个按钮需要给予用户提示确认，只有用户点击确认按钮才能继续执行操作。

2. 当网页上点击查看，需要展示的数据通过弹出框展示时。

三、使用说明

为什么需要oaoDailog？

Bootstrap的modal需要预先在页面上定义隐藏的模态框div代码，如果一个页面有多种模态框，就需要写多个这样的div，这无疑是不方便的。默认的modal没有确认和取消按钮的功能，要实现这一功能需要写额外的JavaScript代码。oaoDailog就是为了解决这些问题而诞生的，它让模态框的使用更加便捷。

四、如何使用？

使用oaoDailog非常简单：

1. 引入oaoDailog.js文件。

2. 调用oao.dialog()方法展示弹出框。

例如：

```javascript

```

调用代码：

```javascript

oao.dialog({

title: "删除提示框",

content: "请确认是否真的删除，删除后将无法恢复!",

ok: function(){

oao.dialog.close();

}

});

```

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

五、API介绍

oao.dialog()方法是生成弹出框的方法，你可以传入一个json对象作为参数，也可以不传参数，那样会弹出一个空白的弹出框。每个参数都有默认值，你可以根据需求自定义参数，如标题、内容、确认按钮的回调函数等。

oaoDailog是基于Bootstrap的模态框进行优化的产物，它解决了Bootstrap模态框使用不便、代码冗余的问题，让模态框的使用更加便捷。无论你是Web开发的初学者还是资深开发者，oaoDailog都会为你带来便捷的开发体验。属性介绍

属性名称与类型

弹出框标题（title）：String类型。表示弹出框的标题。

提示：为弹出框提供一个醒目的标题，吸引用户的注意力。

默认值：提示

弹出框主要内容（content）：String类型。表示弹出框中显示的内容，可以是纯文本或HTML代码。

说明：为用户提供必要的信息或操作指引。

默认值：空

确认按钮自定义文字（okVal）：String类型。用于自定义确认按钮上显示的文字。

默认值：确认

点击确认执行的方法（ok）：Function/boolean类型。当点击确认按钮时，会执行相应的方法。

说明：提供确认操作的功能，并允许用户自定义点击确认后执行的操作。

取消按钮的自定义文字（cancelVal）：String类型。用于自定义取消按钮上显示的文字。

默认值：取消

点击取消执行的方法（cancal）：Function/boolean类型。当点击取消按钮时，会执行相应的方法。

说明：为用户提供取消操作的功能，并允许用户自定义点击取消后执行的操作。

oao.dialog.close()：关闭模态框的方法。调用此方法将关闭当前打开的模态框。

待支持功能说明：

目前弹出框的内容仅支持文字和静态HTML，暂不支持通过URL请求获取动态内容。我们将在后续版本中添加此功能，以提供更丰富的弹出框内容。

目前弹出框最多仅支持两个按钮，无法进行自定义。我们将在后续版本中添加更多自定义按钮的选项，以满足不同需求。

目前弹出框的位置和大小无法自定义。我们将在后续版本中加入更多样式和布局定制的选项，以提升用户体验。

目前弹出框一次只能弹出一个，暂不支持在弹出框中再弹出一个模态框（由于bootstrap modal底层不支持）。我们将努力研发，争取在后续版本中实现此功能。

oaoDialog 1.0.0 诞生记

作者：许飞

版权 © 2014 .oaoera Inc. 保留所有权利 沪ICP备13024515号-1 上海义信电子商务有限公司

本软件遵循GNU LGPL版本2.1或更高版本的许可协议。更多详情，请访问：[

oao命名空间的构建

oao，一个充满魅力的命名空间悄然诞生。它以简洁的方式承载着诸多功能，期待着在您的网页中展现风采。

oao的核心初始化函数是 `init`。当您传递设置参数时，它会默认采用以下配置：标题为“提示”，内容为空白，确认按钮为“确认”，取消按钮为“取消”。它还提供了 `ok` 和 `cancel` 回调函数，以及一个 `close` 标志用于控制模态框的关闭行为。

内容的初始渲染

oao的 `initContent` 函数负责渲染模态框的HTML结构。它创建了一个带有标题、正文和按钮的模态对话框，并根据设置的文本和按钮状态进行定制。您可以根据需要选择显示或隐藏确认和取消按钮。

弹出对话框的魅力展现

oao的 `dialog` 函数是展现对话框的关键。它首先初始化设置，然后渲染内容。当对话框隐藏时，它会执行关闭回调并移除模态框。对话框的显示还伴随着一个优雅的动画效果，确保其居中显示。您可以通过点击确认或取消按钮来触发相应的操作。

轻松关闭对话框

无需担心如何优雅地结束对话，oao提供了一个简单的 `dialog.close` 函数来隐藏模态框。只需调用这个函数，即可轻松关闭对话框。

在这背后，还有一段不为人知的代码 `cambrian.render('body')`，或许它正在默默地为整个页面的渲染贡献力量。我们期待它在未来的表现，为网页开发带来更多的便利与惊喜。