自定义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 ...
随机推荐
- Java 内部类 this
内部类访问外部类的一个例子: public class Abc { private class Bc { public void print() { System.out.println(Abc.th ...
- Python学习笔记——基础篇【第七周】———进程、线程、协程篇(socket基础)
http://www.cnblogs.com/wupeiqi/articles/5040823.htmlhttp://i.cnblogs.com/EditPosts.aspx?postid=55437 ...
- 调皮的R文件,卑鄙的空格
毕业快一年了,由于公司业务需要,开发岗的我做了一年测试.最近,终于要开始转开发了.于是和小伙伴们合作,做一个备忘录apk.由于之前是做java的,而且差不多一年没碰代码了(这一年主要做测试,虽然有写自 ...
- linux学习心态建设
为啥我们要学习Linux 技术的价值不在于这个技术有多么高超,而在于技术本身给我们带来什么价值,所以很多时候我们学习一个技术,不能盲目学,是为了使用这个技术,知道这个技术的使用场景,知道这个技术带来的 ...
- 改造vim
1.安装Vim和Vim基本插件首先安装好Vim和Vim的基本插件.这些使用apt-get安装即可: lingd@ubuntu:~/arm$sudo apt-get install vim vim-sc ...
- Linux_jdk
先查看下 yum list java* yum install java-1.7.0-openjdk* -y 环境变量应该是会自动配置的 或者手动配置编辑/etc/profile #vi /etc/p ...
- JQuery 模糊匹配
[属性名称] 匹配包含给定属性的元素 [att=value] 匹配包含给定属性的元素 [att*=value] 模糊匹配 [att!=value ...
- Python笔记4-20151029
一.切片 L = [''Michael','Sarah','Tracy','Bob','Jack'] 取前N个元素,也就是索引为0-(N-1)的元素,可以用循环: >>> r = [ ...
- 为OLED屏增加GUI支持
为OLED屏增加GUI支持1:OLED驱动 为OLED屏增加GUI支持2:2D图形库 为OLED屏增加GUI支持3:字库 为OLED屏增加GUI支持4:文本框控件 为OLED屏增加GUI支持5:图片控 ...
- win10系统 L2TP连接尝试失败:ERROR因为安全层在初始化与远程计算机的协商时遇到了一个处理错误
1 确保IPsec Policy Agent服务已启动 2 确保路由和远程访问(Routing and Remote Access)和远程访问连接管理器服务(Remote Access Connect ...