自定义alert和confirm

时间:2022-09-22 15:46:17
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的更多相关文章

  1. 利用bootstrap的modal组件自定义alert,confirm和modal对话框

    由于浏览器提供的alert和confirm框体验不好,而且浏览器没有提供一个标准的以对话框的形式显示自定义HTML的弹框函数,所以很多项目都会自定义对话框组件.本篇文章介绍自己在项目中基于bootst ...

  2. 自定义alert,confirm,prompt事件,模仿window&period;alert&lpar;&rpar;,confirm&lpar;&rpar;,prompt&lpar;&rpar;

    css代码: /*custom_alert and custom_confirm*/ ; } ;;background-color: #585858; padding: 30px 30px; bord ...

  3. jquery自定义对话框alert、confirm和prompt

    jQuery Alert Dialogs,又一个基于jQuery的提示框插件,主要包括Alert.Confirm.prompt这三种,还有一个高级范例,可以在提示框内嵌入HTML语言,可以自定义风格样 ...

  4. 【转】bootbox自定义dialog、confirm、alert样式,以及基本设置方法setDefaults中可用参数

    <html> <head> <meta charset="utf-8"> <meta name="viewport" ...

  5. jQuery自定义alert&comma;confirm方法及样式

    学过JavaScript的都知道,alert().confirm()都是window对象特有的方法,而这两个方法我们平时使用的频率也很高,但是比较扎心的就是他自带的样式太... 因此,我整理了一个比较 ...

  6. 弹出框优化实例(alert和confirm)

    在项目过程中会遇到需要使用自己定义的弹出框的情况.以前用过ymprompt,但是它太复杂而且不好自己操控.所以自己写了一个弹出框实例. 主要有两类弹出框alert和confirm.基于jQuery a ...

  7. 原生js实现自定义alert风格和实现

    2018年6月29 最新更新 添加函数节流,解决多次点击问题,添加单例模式,提高代码性能. <!DOCTYPE html> <html lang="en"> ...

  8. 重构alert,confirm

    最近写了一个重构的alert,confirm控件,调用时直接使用alert,confirm即可 //调用方法 alert("提示语") window.confirm('你确定要删除 ...

  9. Selenium2学习-040-JavaScript弹出框(alert、confirm、prompt)操作演示实例

    弹出框是网页自动化测试常见得操作页面元素之一,常见的JavaScript弹出框有如下三种: 1.alert(message):方法用于显示带有一条指定消息和一个 OK 按钮的警告框.DemoAlert ...

随机推荐

  1. &lbrack;教学&rsqb; Firemonkey TImageList 加入原寸图片

    下面示范 Firemonkey TImageList 加入一张原始尺寸图片的方法: 使用代码加图 if Assigned(List) then begin MyList.Items.Clear; do ...

  2. POJ 2893 M &&num;215&semi; N Puzzle(树状数组求逆序对)

                                                               M × N Puzzle Time Limit: 4000MS   Memory ...

  3. &num;pragma pack&lpar;n&rpar;

    #pragma pack(n) 重要规则: 1,复杂类型中各个成员按照它们被声明的顺序在内存中顺序存储,第一个成员的地址和整个类型的地址相同: 2,每个成员分别对齐,即每个成员按自己的方式对齐,并最小 ...

  4. WebApi中跨域解决办法

    在做Web开发中,常常会遇到跨域的问题,到目前为止,已经有非常多的跨域解决方案.由于时间有限,本文不会深入. 笔者遇到的问题是Js调用WebAPI中的数据进行跨域的场景.涉及若干跨域方案: 方案1:j ...

  5. Java内存分配和内存管理

    首先是概念层面的几个问题: Java中运行时内存结构有哪几种? Java中为什么要设计堆栈分离? Java多线程中是如何实现数据共享的? Java反射的基础是什么? 然后是运用层面: 引用类型变量和对 ...

  6. bind和unbind事件的应用

    1.bind 先从一动画的示例看起,如图: 而图中表示的mouseout(移出).mouseover(移入)事件的操作,比较简单,具体代码如下: 从中我可以得出bind()的语法: $().bind( ...

  7. hdu 4258 Covered Walkway

    题目大意: 一个N个点的序列,要将他们全部覆盖,求总最少费用:费用计算: c+(x-y)2 分析: 斜率优化DP 我们假设k<j<i.如果在j的时候决策要比在k的时候决策好,那么也是就是d ...

  8. FlashBuilder&lpar;FB&sol;eclipse&rpar; 打开多个无效

    FB也即Eclipse. 想要打开多个FB,只需要新建多个FB的快捷方式,然后在路径上面加上参数 -data "具体路径" 再打开即可. 如: "C:\Program F ...

  9. HDU 5424 Rikka with Graph II

    题目大意: 在 N 个点 N 条边组成的图中判断是否存在汉密尔顿路径. 思路:忽略重边与自回路,先判断是否连通,否则输出"NO",DFS搜索是否存在汉密尔顿路径. #include ...

  10. java json转换(二)

    package com.kps.common.utils; import com.alibaba.fastjson.JSON; import com.alibaba.fastjson.JSONArra ...