// 功能提示弹框
function messageBox ( option ) {
var html = '';
html += '<div class="message-box-head">' + option.title;
html += '<i class="icon iconfont message-close"></i></div>'; if ( option.type == 'using' ) {
html += '<div class="message-box-body">';
html += '<p class="message-prompt">' + option.content + '</p>';
html += '</div>';
}
else if ( option.type == 'disable' ) {
html += '<div class="message-box-body">';
html += '<p class="message-prompt">' + option.content + '</p>';
html += '</div>';
}
else if ( option.type == 'confirm' ) {
html += '<div class="message-box-body reset-pwd">';
html += '<p class="message-prompt">' + option.content + '</p>';
html += '<div class="message-btn por">';
html += '<button class="btn-common btn-gray cancel-btn poa">取消</button>';
html += '<button class="btn-common btn-blue yes-btn poa">确定</button>';
html += '</div>';
html += '</div>';
}
else if ( option.type == 'confirm2' ) {
html += '<div class="message-box-body confirm-spec">';
html += '<div class="message-prompt">';
html += '<p>'+ option.contentTitle +'</p>';
html += '<p>'+ option.content +'</p>';
html += '</div>';
html += '<div class="message-btn por">';
html += '<button class="btn-common btn-gray cancel-btn poa">取消</button>';
html += '<button class="btn-common btn-blue yes-btn poa">确定</button>';
html += '</div>';
html += '</div>';
} $(".message-box-main").empty().append(html);
$(".message-box").addClass('show'); // 点击取消事件
$(".cancel-btn").click(function () {
$(".message-box").removeClass('show');
if ( option.cancel ) {
option.cancel();
}
}); // 点击确定事件
$(".yes-btn").click(function () {
$(".message-box").removeClass('show');
if ( option.sureFun ) {
option.sureFun();
}
}); // 点击图标取消事件
$(".message-close").click(function () {
$(".message-box").removeClass('show');
if ( option.callBack ) {
option.callBack();
}
}); }

  

  

JS 功能弹框封装的更多相关文章

  1. JS 信息提示弹框封装

    // 功能提示弹框 function tipsBox ( option ) { var html = ''; if ( option.type == 'success' ) { html += '&l ...

  2. js实现弹框及自动关闭

    <SCRIPT LANGUAGE="javascript"> < !-- window.open (''page.html'',''newwindow'',''h ...

  3. Js仿弹框

    收藏一个简单实用的JS弹框,通过隐藏和显示div来实现,代码来自脚本之家! <html> <head> <title> LIGHTBOX EXAMPLE </ ...

  4. js 简单弹框toast

    新建toast.js文件 function Toast(msg,duration){ duration=isNaN(duration)?3000:duration; var m = document. ...

  5. js创建弹框(提示框,待确认框)

    ;;} html,body{text-size-adjust:none;-webkit-text-size-adjust:none;-webkit-user-select:none;} a{color ...

  6. svelte组件:Svelte自定义弹窗Popup组件|svelte移动端弹框组件

    基于Svelte3.x自定义多功能svPopup弹出框组件(组件式+函数式) 前几天有分享一个svelte自定义tabbar+navbar组件,今天继续带来svelte自定义弹窗组件. svPopup ...

  7. 鼠标滚轮图片放大缩小功能,使用layer弹框后不起作用

    今天在项目中遇到的一个问题:点击按钮使用layer弹框弹出一张图片,需要加一个鼠标滚轮放大缩小,图片也跟着放大缩小的功能.于是在网上找了一个demo. DEMO: <!DOCTYPE html ...

  8. js登录弹出框插件

    第一步:页面引入css:<link rel="stylesheet" type="text/css"" href="common/cs ...

  9. JS浏览器的三种弹框:

    1.alert:使用alert弹框提示信息,最后都会被转化为字符串输出(因为调用了toString这个方法).比如alert(1+1)弹出的结果应该是字符串形式的“2”. 2.Confirm:在ale ...

随机推荐

  1. 随机获取数据库中的某一条数据(基于yii2框架开发)

    注意: 使用PHP函数array_rand()得到的是这个数组中的那个值相对应的下标键值,需要配合原来的数组进行,例如: $rand_keys = array_rand($ids,1); $id = ...

  2. 关于ifram之间的相互调用

    window.iframeId.btnClose.click(); 父调子 window.parent.FatherFunciton(); 子调父

  3. Android跨进程通信的四种方式

    由于android系统中应用程序之间不能共享内存.因此,在不同应用程序之间交互数据(跨进程通讯)就稍微麻烦一些.在android SDK中提供了4种用于跨进程通讯的方式.这4种方式正好对应于andro ...

  4. Javascript学习笔记:6种实现继承的方式

    ①原型链式继承 function Person(name){ this.name=name; } Person.prototype.getName=function(){ return this.na ...

  5. 《BI项目笔记》历年的初烟水分均值变化分析Cube的建立

    主要维度: 班组班次检测项质检日期(时间维度)加工客户加工类型收购类型生产线产地烟叶级别 主要指标:慢速测定_平均值快速测定_平均值红外测定_平均值ETL设计 需要抽取的维度表: 序号 表名 说明 备 ...

  6. linux详细redis安装和php中redis扩展

    第一部分:安装redis 希望将redis安装到此目录 1 /usr/local/redis 希望将安装包下载到此目录 1 /usr/local/src 那么安装过程指令如下: 1 2 3 4 5 6 ...

  7. Maven3简介

    Maven3简介 百度百科 maven官网: http:\/\/maven.apache.org\/ Maven下载安装 Maven 下载:http:\/\/maven.apache.org\/dow ...

  8. 位域 unsigned int a : 4;

    位域 有些信息在存储时,并不需要占用一个完整的字节, 而只需占几个或一个二进制位.例如在存放一个开关量时,只有0和1 两种状态, 用一位二进位即可.为了节省存储空间,并使处理简便,C语言又提供了一种数 ...

  9. 你真的会写单例模式吗-------Java实现

    转载: 你真的会写单例模式吗--Java实现 单例模式可能是代码最少的模式了,但是少不一定意味着简单,想要用好.用对单例模式,还真得费一番脑筋.本文对Java中常见的单例模式写法做了一个总结,如有错漏 ...

  10. WLAN拓扑介绍-07

    学完本课程后,您应该能: 描述802.11基本概念 概括WLAN基本拓扑结构 列举华为WDS组网模式 描述mesh网络模式 802.11基本元素总结 BSS(Basic Service Set):基本 ...