// 功能提示弹框
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. java语言的认识

    class Hello{ public static void main(String [] args) { System.out.println("Hello Word 你好") ...

  2. # TypeScript 中如何确保 this 的正确性

    问题 在 TS 里面 this 关键字一开始让我这个写 C# 的十分惊讶,比如下面的一段代码,注意 initBinding 方法 class Company { id:number; /** * 在点 ...

  3. ubuntu下安装、启动和卸载SSH

    想往VMWare虚拟机上的Ubuntu里面拷贝代码,发现之前安装好的secureCRT链接不上.发现是ssh安装配置出了问题,于是就把openssh-server卸载后重装,发现又是与openssh- ...

  4. Cron表达式简单学习

    CronTriggers往往比SimpleTrigger更有用,如果您需要基于日历的概念,而非SimpleTrigger完全指定的时间间隔,复发的发射工作的时间表.CronTrigger,你可以指定触 ...

  5. 安装numpy+mkl

    引子: 运行from sklearn.dataset import load_iris 时提示: Traceback (most recent call last): File "F:/gi ...

  6. C++学习笔记一 —— 两个类文件互相引用的处理情况

    先记录一些零碎的知识点: 1. 一个类可以被声明多次,但只能定义一次,也就是可以 class B;  class B;  class B; ……;  class B {……};  这样子. 2. 一个 ...

  7. 【转载】jQuery1.5之后的deferred对象详解

    原文:http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_deferred_object.html 原文作者 ...

  8. 【转载,整理】域名CNAME解析配置,使用域名B作为域名A的CNAME记录值

    最近有个需求,未备案的域名A,想解析到香港 或 国内的服务器上,但是由于未备案,直接使用cdn解析在国内访问会很慢 但是不想直接直接到ip,所以找到两个方法可以解决: 方案一:转移到其他服务器做301 ...

  9. 如何让IE8的菜单栏调到最上方

    如何让IE8的菜单栏调到最上方 运行gpedit.msc,在"用户配置"/"管理模板"/"Windows Components"/" ...

  10. VIM 代码折叠

    VIM 代码折叠 VIM代码折叠方式可以用"foldmethod"选项来设置,如: set foldmethod=indent 有6种方式来折叠代码 1. manual //手工定 ...