初始化配置项

modalType

title

tools

attr

initShow

destroy

content

footer

beforeShowCallBack

showCallBack

beforeHideCallBack

hideCallBack

应用程序接口

modal

body

footer

show()

hide()

destroy()

Sweet UI模态框组件支持面向对象的组件化调用方式,内置了丰富的配置项和交互方法,进一步化操作dom为操作对象,加强了组件使用规范,提升了页面开发效率。我们强烈推荐这种组件化的开发方式,并且已经集成了更强大的页面生成组件 pageWidget。与此同时,我们并不尽弃以 dom元素调用模态框的方式。
初始化配置项

● sweet.modalCreate({})通过多种配置项,可实现模态框样式与内容的多元化定义。

参数 是否必传 类型 默认值 作用
target 非必传 String,必须是css选择器 body 渲染的目标元素
modalType 非必传 String( basic/ full/ screen) basic 模态框类型。默认值为 basic,即小模态框;
其值为 full时,渲染为全屏模态框,占满页签视窗;
其值为 screen时,渲染为超级全屏模态框,直接占满浏览器视窗。
title 非必传 String 模态框标题,支持html元素
tools 非必传 String <a class="wj_close"></a> 模态框缩工具按钮,这里定义dom元素模板
默认提供了关闭按钮<a class="wj_close"></a>
也提供了缩放按钮<a class="wj_restore"></a>;
可以自定义模板元素。
attr 非必传 object 模态框自定义属性和样式,常用于定义宽高
initShow 非必传 Boolean false 模态框初始化是否显示
destroy 非必传 Boolean false 关闭是否销毁,设为true,则允许模态框重复初始化,关闭模态框时直接将其移除。
content 非必传 String/ Function 模态框主体区域内容
footer 非必传 Boolean/ String/ Array 模态框主体底部内容
beforeShowCallBack 非必传 Function 前调--显示之前
showCallBack 非必传 Function 回调--显示之后
beforeHideCallBack 非必传 Function 前调--关闭之前
hideCallBack 非必传 Function 回调--关闭之后
modalType-模态框大小控制

● modalType默认值为basic,即小模态框,支持通过 attr属性定义大小,初始化居中显示在视窗。
● 模态框的初始化一般绑定在按钮的事件方法里,首次点击调用初始化,再次点击可直接调用模态框的开启方法。

● modalType值为full时,渲染为全屏模态框。此时如果是在页签中,即iframe子页面中,则只占满页签视窗,保留父页面视窗。

● modalType值为screen时,渲染为超级全屏模态框。此时如果是在页签中,即iframe子页面中,则占满浏览器视窗,遮挡父页面视窗。

title-模态框标题

● title用于控制模态框的标题,支持html元素,默认为空字符。

tools-模态框工具

● tools用于控制模态框的标题,支持html元素,默认为空字符。

attr-自定义属性和样式

● attr为一个object类型的配置项,可以定义classidstyle以及其他自定义属性等,与html语法一致。
我们可以通过style定义模态框的宽高,与css语法一致。
这里添加的自定义属性,将会被渲染在模态框最外围的容器上。

initShow-模态框初始化是否显示

● 有时候我们会需要在页面加载完成后而不是在按钮的点击事件中初始化模态框,却又不能使它直接显示。这时,我们可以把initShow设为false,即模态框初始化完成单并不立即开启显示。

destroy-模态框即时销毁

● destroy属性设为true时,允许模态框组件重复初始化。每次关闭模态框时将不再是隐藏而是移除。每次开启模态框时,也不再是显示而是创建

content-模态框主体区域内容

● content配置模态框的主体区域内容,可以传输 String类型(支持html元素)或者 Function类型。

● content设置为Function时,可以接受一个参数modalNode作为模态框节点,用于渲染内容元素。

beforeShowCallBack-前调-显示之前

● modalCreate组件提供了一个模态框开启之前的前调方法beforeShowCallBack

showCallBack-回调-显示之后

● modalCreate组件提供了一个模态框开启之后的回调方法showCallBack

beforeHideCallBack-前调-关闭之前

● modalCreate组件提供了一个模态框关闭之前的前调方法beforeHideCallBack

hideCallBack-回调-关闭之后

● modalCreate组件提供了一个模态框关闭之后的回调方法hideCallBack

应用程序接口

● 调用modalCreate初始化方法,将会生成相应的模态框实例,可以通过对象内的方法操作该模态框实例。

接口 类型 参数 作用 调用方法
modal Object 已构造的模态框jq对象 .modal
body Object 已构造的模态框主体区域jq对象 .body
footer Object 已构造的模态框底部区域jq对象 .footer
show Function 显示模态框 .show()
hide Function 隐藏模态框 .hide()
destroy Function 销毁模态框实例 .destroy()
body-模态框外围容器节点对象
show()-模态框开启方法
hide()-模态框关闭方法
destroy()-模态框销毁方法