// 功能提示弹框
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. Process and Thread

    A process is a completely independent program that has its own address space, while a thread is a se ...

  2. [转] C语言常见笔试题大全1

    点击阅读原文 1. 用预处理指令#define 声明一个常数,用以表明1年中有多少秒(忽略闰年问题) #define SECONDS_PER_YEAR (60 * 60 * 24 * 365UL) [ ...

  3. 初识python第二天(3)

    我们接着上一篇博客,继续来来了解Python一些常见类的函数使用方法 一.int # 运算符,>=,比较self是否大于等于value,只要满足大于或者等于其中一个条件,就返回True,否则就返 ...

  4. Android实现归属地查询功能

    实现归属地查询大体有两种方法可以实现,一种是通过归属地API进行查询,另一种是查询本地数据库.两种方法各有优劣,最好结合起来使用,我本次采用的是查询数据库的方法.首先需要从网上下载归属地数据库call ...

  5. Java 引用传递

    按照Java的规定,Java的函数参数在传递的时候有两种方式. 对于基本类型,如int,double等作为函数参数传递时,采取的是传值方式. 对于对象,如数组.字符串等作为参数传递时,采用的是引用方式 ...

  6. Codeforce 567D

    One-Dimensional Battle Ships time limit per test 1 second memory limit per test 256 megabytes input ...

  7. HDU1848 Fibonacci again and again SG函数

    Fibonacci again and again Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Jav ...

  8. Javascript 学习

    title: Javascript tags: javascript,学习 grammar_cjkRuby: true --- 定义变量 三种形式 var name; var name = " ...

  9. 。【自学总结 3】------3ds Max 主工具栏

    1.选择并链接:选择对象,使其和其他对象建立父子关系. 2.断开选择链接:撤销链接关系. 3.选择过滤器列表:可以限制要选择的对象的特定类型和组合.例如,我们选择几何体后,其他对象就无法被选择. 4. ...

  10. select框内容的编辑、修改、添加、删除操作

    // 添加 function col_add() { var selObj = $("#mySelect"); var value="value"; var t ...