自定义alert和confirm
var common = {};
common.showAlert = function (msg) {
var html = "<div id='dialog_alert' class=\"eject dialog_alert\" style=\"display:block;z-index:9999999999;\">";
html+="<div class=\"web-feedback w400\">";
html+="<div class=\"eject-ly\">";
html+="<div class=\"eject-ly-lef fl\">";
html+="<span class=\"fl\"><img src=\"images/ckwls_03.jpg\"></span>";
html+="<span class=\"fl eject-ckl\">提示</span>";
html+="<span class=\"fl\"><img src=\"images/ckwls_05.jpg\"></span>";
html+="</div>";
html += "<div class=\"fr eject-lyr\" onclick='common.hideAlert()'>";
html+="<img src=\"images/close.jpg\">";
html+="</div>";
html+="</div>";
html+="<div class=\"upload-prompt\">";
html += msg;
html+="</div>";
html+="</div>";
html+="<div class=\"hiddenDiv\"> </div>";
html+="</div>";
$("body").append(html);
}
common.hideAlert = function () {
$(".dialog_alert").remove();
}
common.showWarn = function (msg) {
var html = "<div id='dialog_warn' onclick='common.hideWarn()' class=\"eject dialog_warn\" style=\"display:block;z-index:9999999999;\">";
html += "<div class=\"web-feedback w400\">";
html += "<div class=\"eject-ly\">";
html += "<div class=\"eject-ly-lef fl\">";
html += "<span class=\"fl\"><img src=\"images/ckwls_03.jpg\"></span>";
html += "<span class=\"fl eject-ckl\">提示</span>";
html += "<span class=\"fl\"><img src=\"images/ckwls_05.jpg\"></span>";
html += "</div>";
html += "<div class=\"fr eject-lyr\" onclick='common.hideWarn()'>";
//html += "<img src=\"images/close.jpg\">";
html += "</div>";
html += "</div>";
html += "<div class=\"upload-prompt\">";
html += msg;
html += "</div>";
html += "</div>";
html += "<div class=\"hiddenDiv\"> </div>";
html += "</div>";
$("body").append(html);
$('#dialog_warn').fadeIn('slow');
}
common.hideWarn = function () {
$(".dialog_warn").fadeTo("slow", 0.01, function () {//fade
$(this).slideUp("slow", function () {//slide up
$(this).remove();//then remove from the DOM
});
});
}
/*
*自定义confirm 调用方法common.showConfirm("确定***吗?",function(){alert('确定函数')},function(){alert('不确定函数')});
*/
common.showConfirm = function (msg, callback_ok,callback_cancel) {
var html = "<div class=\"eject dialog_confirm\" ng-show=\"confirmstate\" style=\"display:block;z-index:9999999999;\">";
html += "<div class=\"web-feedback w280\">";
html += "<div class=\"eject-ly\">";
html += "<div class=\"eject-ly-lef fl\">";
html += "<span class=\"fl\"><img src=\"images/ckwls_03.jpg\"></span>";
html += "<span class=\"fl eject-ckl\">确认</span>";
html += "<span class=\"fl\"><img src=\"images/ckwls_05.jpg\"></span>";
html += "</div>";
html += "<div class=\"fr eject-lyr\">";
html += "<img src=\"images/close.jpg\" onclick=\"common.hideConfirm()\">";
html += "</div>";
html += "</div>";
html += "<div class=\"alert-contet\" style=\"min-height:10px;\">";
html += msg;
html += "</div>";
html += "<div class=\"confirm-confirm\">";
html += "<a class=\"fl confirm-con\" id=\"confirm_ok\">确认</a>";
html += "<a class=\"fr confirm-esc\" id=\"confirm_cancel\">取消</a>";
html += "</div>";
html += "</div>";
html += "<div class=\"hiddenDiv\"> </div>";
html += "</div>";
$("body").append(html);
$("#confirm_ok").click(function () {
if (callback_ok && typeof callback_ok == "function")
callback_ok(true);
$(".dialog_confirm").remove();
});
$("#confirm_cancel").click(function () {
if (callback_cancel && typeof callback_cancel == "function")
callback_cancel(true);
$(".dialog_confirm").remove();
});
}
自定义alert和confirm的更多相关文章
- 利用bootstrap的modal组件自定义alert,confirm和modal对话框
由于浏览器提供的alert和confirm框体验不好,而且浏览器没有提供一个标准的以对话框的形式显示自定义HTML的弹框函数,所以很多项目都会自定义对话框组件.本篇文章介绍自己在项目中基于bootst ...
- 自定义alert,confirm,prompt事件,模仿window.alert(),confirm(),prompt()
css代码: /*custom_alert and custom_confirm*/ ; } ;;background-color: #585858; padding: 30px 30px; bord ...
- jquery自定义对话框alert、confirm和prompt
jQuery Alert Dialogs,又一个基于jQuery的提示框插件,主要包括Alert.Confirm.prompt这三种,还有一个高级范例,可以在提示框内嵌入HTML语言,可以自定义风格样 ...
- 【转】bootbox自定义dialog、confirm、alert样式,以及基本设置方法setDefaults中可用参数
<html> <head> <meta charset="utf-8"> <meta name="viewport" ...
- jQuery自定义alert,confirm方法及样式
学过JavaScript的都知道,alert().confirm()都是window对象特有的方法,而这两个方法我们平时使用的频率也很高,但是比较扎心的就是他自带的样式太... 因此,我整理了一个比较 ...
- 弹出框优化实例(alert和confirm)
在项目过程中会遇到需要使用自己定义的弹出框的情况.以前用过ymprompt,但是它太复杂而且不好自己操控.所以自己写了一个弹出框实例. 主要有两类弹出框alert和confirm.基于jQuery a ...
- 原生js实现自定义alert风格和实现
2018年6月29 最新更新 添加函数节流,解决多次点击问题,添加单例模式,提高代码性能. <!DOCTYPE html> <html lang="en"> ...
- 重构alert,confirm
最近写了一个重构的alert,confirm控件,调用时直接使用alert,confirm即可 //调用方法 alert("提示语") window.confirm('你确定要删除 ...
- Selenium2学习-040-JavaScript弹出框(alert、confirm、prompt)操作演示实例
弹出框是网页自动化测试常见得操作页面元素之一,常见的JavaScript弹出框有如下三种: 1.alert(message):方法用于显示带有一条指定消息和一个 OK 按钮的警告框.DemoAlert ...
随机推荐
- 1951: [Sdoi2010]古代猪文
1951: [Sdoi2010]古代猪文 Time Limit: 1 Sec Memory Limit: 64 MBSubmit: 2171 Solved: 904[Submit][Status] ...
- html-webpack-plugin
插件地址:https://www.npmjs.com/package/html-webpack-plugin 这个插件用来简化创建服务于 webpack bundle 的 HTML 文件,尤其是对于在 ...
- hdu 3669 Cross the Wall(斜率优化DP)
题目连接:hdu 3669 Cross the Wall 题意: 现在有一面无限大的墙,现在有n个人,每个人都能看成一个矩形,宽是w,高是h,现在这n个人要通过这面墙,现在只能让你挖k个洞,每个洞不能 ...
- Elasticsearch常用插件(三)
elasticsearch-head 一个elasticsearch的集群管理工具,它是完全由html5编写的独立网页程序,你可以通过插件把它集成到es. 项目地址:https://github.co ...
- SVN 版本控制工具
1,安装完服务端VisualSVN Server和客户端TortoiseSVN 后,随便在一个文件夹下,右键,会看到有SVN checkout 选项,这个选项只有在第一次在仓库下下载的时候会用到: 1 ...
- mysql 中文字段排序( UTF8按拼音首字母排序)
select * from tableName CONVERT( FieldName USING gbk ) COLLATE gbk_chinese_ci desc
- <密码的实现>输入密码的时候,显示“*”,而不是显示输入内容
一开始还以为用C语言和C++不能实现输入密码的时候显示出“*”而不显示输入的内容呢!没想到偶然的机会试出了用while循环结构可以实现.以下是我整理的C语言和C++的代码,供初学者参考. 这是C语言实 ...
- percentiles of live data capture
For example, every ten seconds I got a server response time, I want to know the 90 percentile respon ...
- appium使用真机做安卓移动端自动化测试
1.PC往手机上安装apk文件:adb install apk文件完整路径 2.获取app包名和activity的命令:使用aapt;aapt是sdk自带的一个工具,在sdk\builds-tools ...
- UML类图几种关系总结
在UML类图中,常见的有以下几种关系: 泛化(Generalization), 实现(Realization),关联(Association),聚合(Aggregation),组合(Composit ...