仿写confirm和alert弹框
在工作中,我们常常会遇到原生的样式感觉比较丑,又和我们做的项目风格不搭。于是就有了仿写原生一些组件的念头,今天我就带大家仿写一下confirm和alert样式都可以自己修改。
有些的不好的地方请指出来,让我们共同成长,如果有不懂的也可以私聊我,我会为你详细解说。
本文有以下三个段落
1.功能代码块展示,弹框功能尺寸适用手机在电脑上看会比较大。
//弹出对话框:传了cancel是confirm,不传就是alert弹框 function Confirm(obj) { let _obj = obj || {}; //视图层 let div = '<div id="_bj" style="">' + '<div id="Kuang" style="">' + '<h3 id="Tishi">提 示</h3>' + '<span id="_content"></span>' + '<div id="_cancel" class="XuanZhe" style="left:0;">取 消</div>' + '<div id="_determine" class="XuanZhe" style="right:0;border-left:0.5px solid gainsboro;">确 定</div>' + '</div>' + '</div>'; $("body").append(div); //css样式层 $("#_bj").css({ position:"fixed", top:0,left:0, textAlign:"center", width:"100vw", height:"100vh", zIndex: 998, background:"rgba(0,0,0,.3)", }); $("#Kuang").css({ position:"absolute", textAlign:"center", top:"50%",left:"50%", transform:"translate(-50%,-50%)", width:"900px", height:"450px", background:"#f8f8f8", borderRadius:"20px", fontSize:"50px" }); //传入一个选项是alert框,两个是confirm框 if(_obj.cancel!=""&&_obj.cancel!=null){ $(".XuanZhe").css({ position:"absolute", textAlign:"center", width:"50%", color:"#287ae8", borderTop:"0.5px solid gainsboro", bottom:0, lineHeight:"150px" }); $("#_cancel").html(_obj.cancel); //交互层 $("#_cancel").click(function() { $("#_bj").remove(); _obj.callback && _obj.callback(false); }); $("#_determine").click(function() { $("#_bj").remove(); _obj.callback && _obj.callback(true); }); }else{ $(".XuanZhe").css({ position:"absolute", textAlign:"center", width:"100%", color:"#287ae8", borderTop:"0.5px solid gainsboro", borderLeft:"none", left:0, bottom:0, lineHeight:"150px" }); $("#_cancel").hide(); $("#_determine").click(function() { $("#_bj").remove(); _obj.callback && _obj.callback(); }); } $("#_determine").html(_obj.determine); $("#_content").html(_obj.content || "确定吗"); }
2.代码调用说明
2.1调用时传了cancel,弹出的是confirm
$("#btn").click(function(){
Confirm({
content: "确定要删除吗",cancel:"取消",determine:"确定",
callback: function(res) {//回调函数,返回true,false
console.log(res);
}
});
});
2.2调用时没有传cancel,弹出的是alert $("#btn").click(function(){ Confirm({ content: "你真的喜欢我吗?",determine:"确定", callback: function(res) {//回调函数没有返回值 console.log("喜欢"); } }); });
3.希望大家给点优化建议,让它更好的为广大的程序员们服务。
仿写confirm和alert弹框的更多相关文章
- selenium对Alert弹框的多种处理
Alert弹框是一个很烦人的控件,因为当前页面如果弹出了该弹框,你必须要处理它,不然你就不能操作页面的其它元素,下面我列出了alert弹框在多种场景下的处理办法. 明确知道系统哪个地方会弹alert ...
- python工具 - alert弹框输出姓名年龄、求和
使用python自带的tkinter库进行GUI编程,完成两个功能: (1)要求用户输入姓名和年龄然后打印出来 (2)要求用户输入一个数字,然后计算1到该数字之间的和 代码部分: # 导入tkinte ...
- 自定义alert弹框,title不显示域名
问题: 系统默认的alert弹框的title会默认显示网页域名 解决办法: (修改弹框样式) (function() { window.alert = function(name) { $(" ...
- JavaScript实现自定义alert弹框
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAh0AAAFkCAYAAACEpYlzAAAfj0lEQVR4nO3dC5BddZ0n8F93pxOQCO
- 操作JavaScript的Alert弹框
@Testpublic void testHandleAlert(){ WebElement button =driver.findElement(By.xpath("input" ...
- 自定义alert弹框,title不显示域名(重写alert)
问题: 系统默认的alert弹框的title会默认显示网页域名 解决办法: (修改弹框样式) (function() { window.alert = function(name) { $(" ...
- 手写alert弹框(一)
采用原生的JavaScript, html代码 <meta name="viewport" content="width=device-width, initial ...
- 如何优雅的写一个Vue 的弹框
写Vue或者是react 都会遇见弹框的问题.也尝试了多种办法来写弹框,一直都不太满意,今天特地看了一下 Element UI 的源码,模仿着写了一个简易版. 大概有一下几个问题: 1.弹框的层级问题 ...
- CreateProcessAsUser,C#写的windows服务弹框提示消息或者启动子进程
服务(Service)对于大家来说一定不会陌生,它是Windows 操作系统重要的组成部分.我们可以把服务想像成一种特殊的应用程序,它随系统的“开启-关闭”而“开始-停止”其工作内容,在这期间无需任何 ...
随机推荐
- 一组西门子S7 报文
03 00 00 16 11 E0 00 00 00 01 00 C1 02 10 00 C2 02 03 01 C0 01 0A(第一次握手报文) 03 00 00 16 11 D0 00 01 0 ...
- OpenCV For iOS 1: 连接OpenCV 3.0
本文的内容參考Instant OpenCV for iOS结合最新的开发平台完毕. 本系列文章採用的的开发环境为: 1)Xcode 6 2)OpenCV for iOS 3.0.0 alpha 接下来 ...
- 《用户体验要素》澄清了 UI 原型设计中看不见确感受得到的那一层
<用户体验要素>澄清了看不见确感受得到的那一层 太阳火神的漂亮人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致&quo ...
- 常见信号的模拟仿真(matlab)(spike signal)
1. 一维信号 构造离散时间向量: Fs = 1000; % sampling frequency,采样频率 T = 1/Fs; % sampling period,采样周期 L = 1000; % ...
- EJB什么,它真的有这么神奇??
1. 我们不禁要问,什么是"服务集群"?什么是"企业发展"? 现在说EJB 至"服务集群"和"企业发展",然后,说什么是 ...
- 让你的sublime text写C代码 (sublime text 2 配置构建C开发环境)
原则 1. 首先你要配置能够编译C++/C环境 2. window中配置该执行环境的环境变量,能够全局使用 3. sublime Text创建新的构建机制.并设置用改全局编译环境 具体过程 能够编译C ...
- C++ 异常机制分析(C++标准库定义了12种异常,很多大公司的C++编码规范也是明确禁止使用异常的,如google、Qt)
阅读目录 C++异常机制概述 throw 关键字 异常对象 catch 关键字 栈展开.RAII 异常机制与构造函数 异常机制与析构函数 noexcept修饰符与noexcept操作符 异常处理的性能 ...
- WPF异常捕获,并使程序不崩溃!
原文:WPF异常捕获,并使程序不崩溃! 在.NET中,我们使用try-catch-finally来处理异常.但,当一个Exception抛出,抛出Exception的代码又没有被try包围时,程序就崩 ...
- Ubuntu 15.04 clang++ 3.6 编译boost 1.59/1.55
Ubuntu 15.04已经可以直接通过apt-get insall 安装clang 3.6, 并且预装的gcc版本是4.9.2.这些安装过程在这里介绍. 首先下载boost源码 wget -O bo ...
- WPF刷新界面
Winform 里有 Application.DoEvents();可刷新! WPF 里没这个,尽管可用委托实现多线程,但是刷新还是不行! 后来找到了 类似App.DoEvents()的方法(): 代 ...