自定义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 ...
随机推荐
- 转:iOS 屏幕适配,autoResizing autoLayout和sizeClass图文详解
1. autoResizing autoresizing是苹果早期的ui布局适配的解决办法,iOS6之前完全可以胜任了,因为苹果手机只有3.5寸的屏幕,在加上手机app很少支持横屏,所以iOS开发者基 ...
- php学习笔记——基础知识(1)
1.PHP 脚本在服务器上执行,然后向浏览器发送回纯 HTML 结果. 2.基础 PHP 语法 1)PHP 脚本可放置于文档中的任何位置. 2)PHP 脚本以 <?php 开头,以 ?> ...
- 7.MyBatis延时加载
1.创建javaWeb项目MyBatis_Lazy并在WebRoot下的WEB-INF下的lib下添加如下jar文件 cglib-nodep-2.1_3.jar log4j-1.2.17.jar my ...
- Openjudge-NOI题库-垂直直方图
题目描述 Description 写一个程序从输入文件中去读取四行大写字母(全都是大写的,每行不超过72个字符),然后用柱状图输出每个字符在输入文件中出现的次数.严格地按照输出样例来安排你的输出格式. ...
- AngularJS 初学笔记(理论基础)
AngularJS 是一个 JavaScript 框架.它是一个以 JavaScript 编写的库. AngularJS 通过 ng-directives 扩展了 HTML. ng-app 指令定义一 ...
- C++类与static
到目前为止,我们设计的类中所有的成员变量和成员函数都是属于对象的,如我们在前面定义的book类,利用book类声明两个对象Alice和Harry,这两个对象均拥有各自的price和title成员变量, ...
- openstack 装逼之路~openstack各组件关系
先来张图
- Android实现动画循环的方式
每次想到循环播放.重复执行时,脑海中总是冒出在while(true)的实现方式. Thread thread = new Thread(new Runnable(){ public void run( ...
- UI_APPEARANCE_SELECTOR 延伸
iOS后属性带UI_APPEARANCE_SELECTOR 可以统一设置全局作用 例如: 1>开关控件 @property(nullable, nonatomic, strong) UIColo ...
- 通过mvn archetype:generate创建Maven项目模板慢的问题
通过mvn archetype:generate这种交互方式来创建Maven项目模板的时候,经常会长时间卡在Generating project in Interactive mode这一行提示(图1 ...