最近写了一个重构的alert,confirm控件,调用时直接使用alert,confirm即可

//调用方法

alert("提示语")

window.confirm('你确定要删除该记录?',function(){
  //回调函数
})

css部分

引入我写的一个基础样式

<link href="http://120.26.59.104/base.css" rel="stylesheet" type="text/css" />
.tck-cover{ width:100%; height:100%; position: fixed; top:; left:; z-index:; background-color:rgba(0,0,0,0.6); display:none;}
.modal-wapper{ width:340px; padding:20px; position:fixed; top:-200%; left:50%; box-shadow:0 0 5px rgba(0,0,0,0.5); z-index:; background-color:#fff; border-radius:5px;}

html部分

在页面底部增加代码

<!-- alert弹框  -->
<div class="modal-wapper clearfix" id="alert">
<p class="align-right line30 clearfix"><span class="close">X</span></p>
<p class="text font14 line20 pad10TB"></p>
<p class="align-right top10"> <a href="javascript:void(0)" class="btns btns-blue btns-small btnsConfirm">确定</a>
</p>
</div>
<!-- confirm弹框 -->
<div class="modal-wapper clearfix" id="confirm">
<p class="align-right line30 clearfix"><span class="close">X</span></p>
<p class="text font14 line20 pad10TB"></p>
<p class="align-right top10">
<a href="javascript:void(0)" class="btns btns-blue btns-small btnsConfirm">确定</a>
<a href="javascript:void(0)" class="btns btns-grey btns-small btnsCancel left20">取消</a>
</p>
</div>

js部分

<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
//调用部分
window.alert = function (msg) {
modal.modal($("#alert"),$(".close,#alert .btnsConfirm"),function(){
$("#alert .text").html(msg);
})
};
window.confirm = function (msg,callBack) {
modal.modal($("#confirm"),$(".close,#confirm .btnsCancel"),function(){
$("#confirm .text").html(msg);
$("#confirm .btnsConfirm").on("click",function(){
callBack();
modal.hide($("#confirm"))
}); })
};
//模态对话框
var modal = {
modal:function(b,c,callback){
$(".modal-wapper").css({"top":"-200%"});
b.css({"margin-left":-b.width()/2})
b.animate({"top":"20%"},200);
$(".tck-cover").fadeIn();
if($(".tck-cover").length==0){
$("body").append('<div class="tck-cover"></div>');
$(".tck-cover").fadeIn();
};
$(document).on("click",".tck-cover",function(){
modal.hide(b);
})
if(c){
c.click(function(){
modal.hide(b);
});
}
if(callback){callback()}
},
hide:function(b){
b.animate({"top":"-200%"},200);
$(".tck-cover").fadeOut(200);
setTimeout(function(){$(".tck-cover").remove();},200)
}
};

重构alert,confirm的更多相关文章

  1. alert/confirm/prompt 处理

    webdriver 中处理JavaScript 所生成的alert.confirm 以及prompt 是很简单的.具体思路是使用switch_to_alert()方法定位到alert/confirm/ ...

  2. 在Android的webview中定做js的alert,confirm和prompt对话框的方法

    在Android的webview中定制js的alert,confirm和prompt对话框的方法 http://618119.com/archives/2010/12/20/199.html 1.首先 ...

  3. 转:python webdriver API 之alert/confirm/prompt 处理

    webdriver 中处理 JavaScript 所生成的 alert.confirm 以及 prompt 是很简单的.具体思路是使用switch_to.alert()方法定位到 alert/conf ...

  4. selenium python (十一)alert/confirm/prompt的处理(js中的弹出框)

    webdriver中处理js所生成的alert.confirm以及prompt,采用switch_to_alert()方法定位到alert/confirm/prompt.然后使用text/accept ...

  5. Python脚本控制的WebDriver 常用操作 <二十二> 处理alert / confirm / prompt

    测试用例场景 webdriver中处理原生的js alert confirm 以及prompt是很简单的.具体思路是使用switch_to.alert()方法定位到alert/confirm/prom ...

  6. Bootstrap Modal 框 alert confirm loading

    /** * Created by Administrator on 2016/5/4. */ /** * 模态窗口 */ window.Modal = { tpls:{ alert:'<div ...

  7. 开发中少不了的Fun -- 微信开发IOS端alert/confirm提示信息,去除网址(URL)的方法

    在微信公众号开发的时候在使用[alert/confirm]弹出提示或者警告信息的时候,[alert/confirm]会将该公众号的网址显示出来,这样很不美观.所以很多时候我们会选择去除那个网址提示内容 ...

  8. Fixed the bug:while running alert/confirm in javascript the chrome freezes

    显示高级设置... 系统  -> 使用硬件加速模式(如果可用) 操作系统如果不支持硬件加速,却启动此项,就悲催了.小伙伴们可别瞎点了,太吃亏. 现象alert/confirm一执行,chrome ...

  9. 去除移动端alert/confirm的网址(url)

    移动端的alert.confirm都会显示来源的url,影响体验 下面的代码将alert和confirm重写了一遍,可去除url  参考了网上代码,完善了confirm不同状态跳转   示例代码: & ...

  10. Java Selenium - 几种对话框处理Alert\confirm\prompt

    1. Alert , 先用常规办法定位到能触发alert的按钮 , 然后 Alert alert = driver.switchTo().alert(); alert.accept(); 如果aler ...

随机推荐

  1. box-sizing重置盒子模型计算规则

    目标大纲 一.语法声明 box-sizing : content-box | border-box | inherit 二.属性值说明 content-box 在宽度和高度之外绘制元素的内边距和边框 ...

  2. jQuery Ion.Calendar 日期/日历

    在线实例 实例演示 默认 实例演示 每周第一天 实例演示 输入框插件 实例演示 HTML data 属性 实例演示 回调函数1 实例演示 回调函数2 使用方法 <div id="cal ...

  3. 如何面试前端工程师:GitHub 很重要

    编者注:下面这篇文章从面试官的角度介绍到面试时可能会问到的一些问题. 我在Twitter和Stripe的一部分工作内容是面试前端工程师.其实关于面试你可能很有自己的一套,这里我想跟你们分享一下我常用的 ...

  4. 请问utf-8的中文是一个汉字占三个字节长度吗?

    这是个好问题,可以当作一个笔试题.先从字符编码讲起. 1.美国人首先对其英文字符进行了编码,也就是最早的ascii码,用一个字节的低7位来表示英文的128个字符,高1位统一为0: 2.后来欧洲人发现尼 ...

  5. git review & devops过程

    自己搭建的devops环境是gitlab/gerrit/jenkins 1. 首先自己checkout一个自己的代码分支,一般不要在master上做直接修改 2. 修改后git add file,   ...

  6. Symantec Backup Exec Remote Agent 2010在Redhat Enterprise 6.6上启动问题

    在Red Hat Enterprise Linux Server release 6.6 (Santiago)上安装了Symantec Backup Exec Remote Agent 2010后,启 ...

  7. 深度解析mysql登录原理

    使用mysql数据库的第一步必然是建立连接登录,然后在上面执行SQL命令.无论是通过mysql的客户端,还是通过C-API,JDBC标准接口连接数据库,这个过程一定少不了.今天我们聊一聊mysql登陆 ...

  8. JAVA之直接内存(DirectMemory)

    Baisics: JAVA NIO使用,基于通道和缓冲区的IO方式,使用Native函数库直接分配堆外内存(allocateDirect),然后通过一个Java堆中的DirectByteBuffer对 ...

  9. .NET应用架构设计—适当使用活动记录模式代替领域模型模式

    阅读目录: 1.背景介绍 2.简单介绍领域模型模式.活动记录模式 3.活动记录模式的简单示例及要点 4.总结 1.背景介绍 对软件开发方法论有兴趣的博友应该发现最近“领域驱动设计”慢慢的被人发现被人实 ...

  10. CDH离线数据导入solr:利用MapReduceIndexerTool将json文件批量导入到solr

    场景描述:前段时间,将实时数据通过kafka+flume+morphline的方式接入到solr中.新进来的数据已经可以在solr中看到了,但是以前的历史数据还没有导入solr. CDH提供利用Map ...