组件

Modal 弹窗

模态对话框组件,内置了各种提示信息弹窗 API文档 组件问题反馈和讨论

使用方法

  • 复制你想要使用的弹窗html到页面,通过js调用即可使用
  • 对关闭和确认按钮均可传递回调函数,高度自定义

不同尺寸弹窗#

弹窗有三个尺寸(lg、sm、normal):
  • nv-modal节点加上class名为nv-modal-lg即为大弹窗,宽度为800px
  • nv-modal节点加上class名为nv-modal-normal即为适中弹窗,宽度为600px
  • nv-modal节点加上class名为nv-modal-sm即为小弹窗,宽度为400px(默认显示nv-modal-sm)
<code>
显示代码

消息提示 #

消息提示的弹窗
<code>
显示代码

确认消息 #

确认消息框,主要是用于相关操作的确认
<code>
显示代码

提交信息 #

提交信息的弹窗,用于和表单控件组合使用
<code>
显示代码

信息提示 #

nv弹窗组件提供了4个状态的提示弹窗,分别为,info、success、warning、error
<code>
显示代码

异步关闭#

弹窗提供了点击确定按钮之后进行的一个回调函数操作
<code>
显示代码

自定义位置#

弹窗初始默认屏幕垂直居中,可通过参数配置垂直距离
<code>
显示代码

可拖拽的模态框#

鼠标长按模态框即可对模态框进行拖拽
<code>
显示代码

配置 #

modal组件可以通过传递不同的参数来配置你所需要的业务场景

参数配置 #

modal.init("触发弹窗的按钮",{})
属性
类型(是否必要)
描述
top
number(选填)
值为number类型数字,不填或者为""默认垂直居中
openCallback
function(选填)
弹窗打开时触发的回调函数
closeCallback
function(选填)
弹窗关闭时触发的回调函数
move
Boolean (选填)
配置move属性为true时,开启模态框的拖拽,默认为false不不开启

Title

Here is the content Here is the content Here is the content Here is the content

Title

Here is the content Here is the content Here is the content Here is the content

Title

Here is the content Here is the content Here is the content Here is the content

Title

Here is the content Here is the content Here is the content Here is the content

Title

Do you want to delete these items?

Title

This is a normal message

balabalabalabalabalabalabalabalabalabalabalabalabalabalabalabalabalabalabalabalabalab

This is a success message

balabalabalabalabalabalabalabalabalabalabalabalabalabalabalabalabalabalabalabalabalab

This is a warning message

balabalabalabalabalabalabalabalabalabalabalabalabalabalabalabalabalabalabalabalabalab

This is a error message

balabalabalabalabalabalabalabalabalabalabalabalabalabalabalabalabalabalabalabalabalab

Title

Title

Here is the content Here is the content Here is the content Here is the content

Title

Here is the content Here is the content Here is the content Here is the content