JS 功能弹框封装
// 功能提示弹框
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 功能弹框封装的更多相关文章
- JS 信息提示弹框封装
// 功能提示弹框 function tipsBox ( option ) { var html = ''; if ( option.type == 'success' ) { html += '&l ...
- js实现弹框及自动关闭
<SCRIPT LANGUAGE="javascript"> < !-- window.open (''page.html'',''newwindow'',''h ...
- Js仿弹框
收藏一个简单实用的JS弹框,通过隐藏和显示div来实现,代码来自脚本之家! <html> <head> <title> LIGHTBOX EXAMPLE </ ...
- js 简单弹框toast
新建toast.js文件 function Toast(msg,duration){ duration=isNaN(duration)?3000:duration; var m = document. ...
- js创建弹框(提示框,待确认框)
;;} html,body{text-size-adjust:none;-webkit-text-size-adjust:none;-webkit-user-select:none;} a{color ...
- svelte组件:Svelte自定义弹窗Popup组件|svelte移动端弹框组件
基于Svelte3.x自定义多功能svPopup弹出框组件(组件式+函数式) 前几天有分享一个svelte自定义tabbar+navbar组件,今天继续带来svelte自定义弹窗组件. svPopup ...
- 鼠标滚轮图片放大缩小功能,使用layer弹框后不起作用
今天在项目中遇到的一个问题:点击按钮使用layer弹框弹出一张图片,需要加一个鼠标滚轮放大缩小,图片也跟着放大缩小的功能.于是在网上找了一个demo. DEMO: <!DOCTYPE html ...
- js登录弹出框插件
第一步:页面引入css:<link rel="stylesheet" type="text/css"" href="common/cs ...
- JS浏览器的三种弹框:
1.alert:使用alert弹框提示信息,最后都会被转化为字符串输出(因为调用了toString这个方法).比如alert(1+1)弹出的结果应该是字符串形式的“2”. 2.Confirm:在ale ...
随机推荐
- C#操作Dataset数据集与SQLite数据库
近日有需要写点C#程序,有用到Dataset数据集和SQLite数据库,由于我从来就不擅长记各种编程语言的语法,所以在查阅一堆资料后,留下以下内容备忘: 一.SQLite操作,直接贴代码,很简 ...
- TortoiseSVN安装使用
TortoiseSVN是windows平台下Subversion的免费开源客户端. 一般我们都是先讲讲服务器的配置,然后再讲客户端的使用,但是在TortoiseSVN上,却可以反过来.因为,如果你的要 ...
- jenkins对结果进行断言问题
TextFinder plugin插件 Jenkins在判定使用shell scripts完成build成功与否的时候,是根据shell最终的返回值是否为零来判定的:零即成功,非零即失败.这点判定事实 ...
- HDU 4048 Zhuge Liang's Stone Sentinel Maze
Zhuge Liang's Stone Sentinel Maze Time Limit: 10000/4000 MS (Java/Others) Memory Limit: 32768/327 ...
- Android中SQLite应用详解
上次我向大家介绍了SQLite的基本信息和使用过程,相信朋友们对SQLite已经有所了解了,那今天呢,我就和大家分享一下在Android中如何使用SQLite. 现在的主流移动设备像Android.i ...
- 【宽度优先搜索】神奇的状态压缩 CodeVs1004四子连棋
一.写在前面 其实这是一道大水题,而且还出在了数据最水的OJ上,所以实际上这题并没有什么难度.博主写这篇blog主要是想写下一个想法--状态压缩.状态压缩在记录.修改状态以及判重去重等方面有着极高的( ...
- mongodb中的副本集搭建实践
准备运行1个主节点,2个从节点,从节点中其中是一个是仲裁节点(Arb). --oplogSize --oplogSize --oplogSize 其中application是副本集的名称,节点必须相同 ...
- (七)HTTP协议
HTTP协议报文基本格式 HTTP协议报文基本格式 HTTP协议(Hypertext Transfer Protocol――超文本传输协议),浏览器端(客户端)向WEB服务器端访问页面的过 ...
- ubuntu访问 windows文件
在unbunt下,想打开windows的文件,出现这个报错 安装ntfs-3g: sudo apt-get install ntfs-3g 看下自己要挂载的分区叫啥名 sudo fdisk -l 我的 ...
- 项目中关于ajax jsonp的使用
项目中关于ajax jsonp的使用,出现了问题:可以成功获得请求结果,但没有执行success方法总算搞定了,记录一下 function TestAjax() { $.ajax({ ...