microbee-http 丨 软件开发框架
microbee-http 丨 软件开发框架 > 快速开始 > MICROBEE-FRONT > 框架工具组件 > 弹窗

弹窗

McrbHttpClient.popup.msg()提示弹窗

常用于主动操作后的反馈提示。

基础用法：

从中间出现，2 秒后自动消失。

不同状态：用来显示「成功、失败、提示」类的操作反馈。

设置icon字段可以定义不同的状态，默认为null。

（1:成功提示信息，2:错误或警告提示信息，3:蓝色提示信息，4:橙色提示信息，5：绿色提示信息）

McrbHttpClient.popup.msg(content,{icon:1})；

参数说明：

参数说明类型可选值
content消息文字string文字内容
icon图标Number1:成功提示，2:错误或警告提示，3:蓝色提示，4:橙色提示，5：绿色提示

应用实例：

//使用方法：可在当前页面的js中使用下面的方法 
McrbHttpClient.popup.msg('操作中断!') McrbHttpClient.popup.msg('操作成功!',{icon:1})
McrbHttpClient.popup.msg('操作失败!',{icon:2}) McrbHttpClient.popup.msg('操作成功!',{icon:3})
McrbHttpClient.popup.msg('操作失败!',{icon:4}) McrbHttpClient.popup.msg('操作成功!',{icon:5})

效果展示：

McrbHttpClient.popup.confirm()询问弹窗

提示用户确认其已经触发的动作，并询问是否进行此操作时会用到此对话框。

基础用法：

居中显示，提示询问是否进行操作“确定”或者“取消”。

仅传入文字提示，如实例1；

传入options作为第一个参数，它是一个字面量对象。icon字段表明消息类型，可以为1:成功提示，2:错误或警告提示，3:蓝色提示，4:橙色提示，5：绿色提示。参数title必须定义为String类型，如实例2；

如需设置两个默认按钮的文字显示，则可添加第二个参数设置（若未设置则显示默认），或需设置点击两个按钮后的后续响应，如实例3；

McrbHttpClient.popup.confirm(options1,options2,cb1,cb2)

参数说明：

参数说明类型可选值
options1.title标题string——
options1.content消息文字string——
options1.icon图标Number1:成功提示，2:错误或警告提示，3:蓝色提示，4:橙色提示，5：绿色提示
options1.hideBtnClose是否隐藏关闭按钮Booleantrue隐藏，false显示
options2.btn按钮文字array设置两个按钮的文字提示
cb1回调函数Function点击第一个按钮后回调函数
cb2回调函数Function点击第二个按钮后回调函数

实例1：

//使用方法：可在当前页面的js中使用下面的方法 McrbHttpClient.popup.confirm('确定要删除吗？');

实例2：

//使用方法：可在当前页面的js中使用下面的方法 McrbHttpClient.popup.confirm({ title: '提示语', content: '确定要删除吗？', icon:2 })

实例3：

//使用方法：可在当前页面的js中使用下面的方法 McrbHttpClient.popup.confirm({ title: '提示', content: '请问确定要删除吗?', icon:2 },{ btn: ['删除' ,'取消'] },function(){ alert('ok') },function(){ alert('no') } )

McrbHttpClient.popup.prompt()输入框弹窗

当用户进行操作时会被触发，中断用户操作，提示用户进行输入的对话框。

基础用法：

居中显示，提示用户进行输入操作然后提交。

参数1输入内容的文字提示，参数2设置输入框input的name值，如实例1；

如需设置输入操作后点击‘提交’后的后续响应事件，设置第三个参数回调函数，如实例2；

如需设置输入操作后点击‘取消’后的后续响应事件，设置第四个参数回调函数，如实例3；

McrbHttpClient.popup.prompt(text,keyname,cb1,cb2)

参数说明：

参数说明类型可选值
text输入内容文字提示string必填
keyname输入框input的name值string必填
cb1点击“提交”后回调函数Function非必填
cb2点击“取消”后回调函数Function非必填

实例1：

//使用方法：可在当前页面的js中使用下面的方法 McrbHttpClient.popup.prompt("请输入你的名字","Keafmd")

实例2：

//使用方法：可在当前页面的js中使用下面的方法 McrbHttpClient.popup.prompt("请输入你的名字","Keafmd",function(e){ // console.log(e) McrbHttpClient.popup.msg('您提交的数据：'+e) })

实例3：

//使用方法：可在当前页面的js中使用下面的方法 McrbHttpClient.popup.prompt("请输入你的名字","Keafmd",function(e){ // console.log(e) McrbHttpClient.popup.msg('您提交的数据：'+e) },function(e){ // console.log(e) McrbHttpClient.popup.msg('您未完成提交') })

McrbHttpClient.popup.alert()确认语弹窗

当用户进行操作时会被触发，该对话框中断用户操作，直到用户确认知晓后才可关闭。

基础用法：McrbHttpClient.popup.alert(options)

居中显示，中断用户操作，直到用户确认关闭。

可只设置提示文字，如下:

 

// 实例1 - 使用方法：可在当前页面的js中使用下面的方法 McrbHttpClient.popup.alert('操作成功')

如传入参数为options对象，title为标题string类型，icon为图标对应的值为int类型（1:成功提示，2:错误或警告提示，3:蓝色提示，4:橙色提示，5：绿色提示），content为描述内容；如实例2或实例3；callback回调函数

参数说明：

参数说明类型可选值
title标题string——
content消息文字string——
icon图标Number1:成功提示，2:错误或警告提示，3:蓝色提示，4:橙色提示，5：绿色提示
hideBtnClose是否隐藏关闭按钮Booleantrue隐藏，false显示
callback回调函数function——

实例2：

//使用方法：可在当前页面的js中使用下面的方法 McrbHttpClient.popup.alert({ title: '敬请期待!', icon:3 }) McrbHttpClient.popup.alert({ title: '敬请期待!', icon:3, callback:function(){ console.log('pppp'); } })

实例3：

//使用方法：可在当前页面的js中使用下面的方法 McrbHttpClient.popup.alert({ title: '审核通过！', content: '您申请的信息已通过审核！', icon:1 }) McrbHttpClient.popup.alert({ title: '审核未通过！', content: '您申请的信息未通过审核！', icon:2 })

McrbHttpClient.popup.open()打开自定义html窗体

当用户进行操作时会被触发，中断用户操作，弹出自定义html内容。

基础用法：

默认居中显示，中断用户操作，弹出自定义html内容，知道用户触发相应事件触发关闭。

设置content自定义html的dom元素；

设置标题title显示自定义标题内容，如实例1；

如需多层弹出，必须设置id参数，如实例2；

options选填，如需特殊设置可使用；

McrbHttpClient.popup.open(content,title,id,options)

参数说明：

参数说明类型可选值
content自定义html内容——自定义内容的dom元素
title标题string必填
id弹窗idstring必填
options.position弹出初始位置String选填（默认center）center居中，left-top左上角，left-bottom左下角，right-top右上角，right-bottom右下角
options.isdrag是否可拖拽String选填（默认0）0:不可拖动，1：可拖动

实例1：

//使用方法：可在当前页面的js中使用下面的方法
// 自定义html窗体内容
<table id="opendiv">
    <tr>
        <td>参数</td>
        <td>说明</td>
        <td>类型</td>
        <td>可选值</td>
    </tr>
    <tr>
        <td>title</td>
        <td>标题</td>
        <td>string</td>
        <td>非必填</td>
    </tr>
    <tr>
        <td>content</td>
        <td>自定义html内容</td>
        <td>——</td>
        <td>自定义内容的dom元素</td>
    </tr>
</table>
// 打开自定义html窗体
var title = "标题";
var content = document.getElementById('opendiv');
var options = {
    position:'right-bottom' ,
    isdrag:1,
}
McrbHttpClient.popup.open(content,title,'msid',options);

实例2：
 

//使用方法：可在当前页面的js中使用下面的方法
// 自定义html窗体内容
<table id="opendiv">
    <tr>
        <td>参数</td>
        <td>说明</td>
        <td>类型</td>
        <td>可选值</td>
    </tr>
    <tr>
        <td>title</td>
        <td>标题</td>
        <td>string</td>
        <td>非必填</td>
    </tr>
    <tr>
        <td>content</td>
        <td>自定义html内容</td>
        <td>——</td>
        <td>自定义内容的dom元素</td>
    </tr>
</table>
// 打开自定义html窗体
var title = "标题";
var content = document.getElementById('opendiv');
McrbHttpClient.popup.open(content,title,'ccid');
$('#opendiv').click(function(){
    var content2 = document.createElement('div');
    content2.innerText = '222222';
    content2.onclick = function(e){
        var content3 = document.createElement('div');
        content3.innerText = '333333';
        content3.onclick = function(e){
             McrbHttpClient.popup.alert('tttttt');
        }
        McrbHttpClient.popup.open(content3,    'ee','ccid3');
    }
    McrbHttpClient.popup.open(content2,'','ccid2');
});

 

McrbHttpClient.popup.ifream()打开ifream 嵌套页面窗体

基础用法：McrbHttpClient.popup.ifream(url, t, w, h)

url 嵌套路径；t 设置窗体标题；w 设置窗体宽度；h 设置窗体高度

var url = 'http://manager.ixiera.com/issue/main?sys_filter=assignee_mine';

McrbHttpClient.popup.ifream(url, 'ifream标题', '500px', '500px')

McrbHttpClient.popup.notice()打开通知提醒窗体

基础用法：McrbHttpClient.popup.notice(type, icon, w, d)

type(1:成功消息，2:错误消息，3:提示消息，4:警告消息)；icon(true显示，false不显示)；t 标题；d 描述

McrbHttpClient.popup.notice(1, true, '通知提醒', '描述描内容')

McrbHttpClient.popup.notice(2, true, '通知提醒')

McrbHttpClient.popup.notice(3, false, '通知提醒', '描述描内容')

McrbHttpClient.popup.notice(4, false, '通知提醒')

本文档来自—microbee-http 丨 软件开发框架平台