// 功能提示弹框
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中如何获取昨天的当前日期

    在java里,获取昨天的当前日期,可以采用calendar来做,也可以采用date来做:如下: 1.采用calendar来做: Calendar cal=Calendar.getInstance(); ...

  2. OS X 下iso刻录U盘

    1. 查看盘 $diskutil list /dev/disk0 #: TYPE NAME SIZE IDENTIFIER : GUID_partition_scheme *320.1 GB disk ...

  3. html回忆(一)

    1. 解决乱码,告诉浏览器 当前文档类型和编码 <meta http-equiv="Content-Type" content="text/html; charse ...

  4. [问题2014S06] 解答

    [问题2014S06]  解答  (本解答由巴闻嘉同学给出) 设特征多项式 \[f(x)=\det(xI_V-\varphi)=x^n+a_{n-1}x^{n-1}+\cdots+a_1x+a_0,\ ...

  5. Winform开发框架之单据窗体生成(主从表,流水单号)

    源码地址:https://github.com/GarsonZhang/GZFramework.ShareDemo 前言 1.在开始本节前请先重置代码为 chapter-03-start 懒人地址:h ...

  6. linux 双网卡实现

    linux实现双网卡,在虚拟机中创建一个新网卡,NAT方式连接,其中eth0设置为连接外网,目前eth0为自动分配状态,所以将代码注释掉了,eth1设置为连接内网.

  7. 各版本Office办公软件下载

    各版本Office办公软件下载:http://pan.baidu.com/share/home?uk=1174874628

  8. linux命令:mkdir命令

    命令参数: -m, --mode=模式,设定权限<模式> (类似 chmod),而不是 rwxrwxrwx 减 umask -p, --parents  可以是一个路径名称.此时若路径中的 ...

  9. runtime运行机制方法学习

    runtime这玩意第一次听说时都不知道是什么,经过了解后才知道它就是oc动态语言的机制,没有它那oc就不能称为动态语言.在之前可能大家对runtime了解都不深,随着编程技能的日益加深和需要,大家开 ...

  10. Deep Learning 13_深度学习UFLDL教程:Independent Component Analysis_Exercise(斯坦福大学深度学习教程)

    前言 理论知识:UFLDL教程.Deep learning:三十三(ICA模型).Deep learning:三十九(ICA模型练习) 实验环境:win7, matlab2015b,16G内存,2T机 ...