仿写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 操作系统重要的组成部分.我们可以把服务想像成一种特殊的应用程序,它随系统的“开启-关闭”而“开始-停止”其工作内容,在这期间无需任何 ...
随机推荐
- MongoDB小结
教程 MongoDB MongoDB 是由C++语言编写的,是一个基于分布式文件存储的开源数据库系统.在高负载的情况下,添加更多的节点,可以保证服务器性能.MongoDB 旨在为WEB应用提供可扩展的 ...
- Qt中(图片)资源的三种使用方式
Qt中使用图片资源的方法有很多种,以前我一直分不清各种之间的区别和Qt相应的处理机制,后来遇到一些实际的问题,然后再加上查阅源码和资料,总算弄明白一些事情,但是本文仅仅是个人理解,如有错误之处请告诉我 ...
- windows 10 使用 tricks
全新的环境变量编辑界面, 全新的[任务管理器]⇒ [性能] 0. 添加开机启动项 将要添加的开机自启动软件的快捷方式添加到如下的路径: C:\Users\hasee\AppData\Roaming\M ...
- CUDA atomic原子操作
CUDA的原子操作可以理解为对一个变量进行"读取-修改-写入"这三个操作的一个最小单位的执行过程,这个执行过程不能够再分解为更小的部分,在它执行过程中,不允许其他并行线程对该变量进 ...
- Asp.net固定功能位充满了零(解决,演示样本)!
Asp.net固定功能位充满了零(解决.演示样本)! 在发展,其中,数实现出现8数字.但是,需要使用0加厚.例如:123,代表:0000123. 真实的比例,如下: decimal aaa = 123 ...
- Flask框架2
Flask框架的学习与实战(二):实战小项目 昨天写了一篇flask开发环境搭建,今天继续,进行一个实战小项目-blog系统. blog系统很简单,只有一个页面,然后麻雀虽小五脏俱全.这里目的不是 ...
- OpenGL(七) 光照模型及设置
OpenGL把现实世界中的光照系统近似归为三部分,分别是光源.材质和光照环境. 光源就是光的来源,是"光"这种物质的提供者: 材质是指被光源照射的物体的表面的反射.漫反射(Open ...
- 不得不说,我太佩服node了,连openXML也搞定了!
https://github.com/Ziv-Barber/officegen 开源项目地址 使用报告等有空完成!
- WPF 4 开发Windows 7 任务栏(Overlay Icon、Thumbnail Toolbar、Progress Bar)
原文:WPF 4 开发Windows 7 任务栏(Overlay Icon.Thumbnail Toolbar.Progress Bar) 在上一篇我们介绍了如何在WPF 4 中开发Wind ...
- C# 优先级队列
前6行是优先队列,后6行是C#原生的queue Min Heap Priority Queue Works with: C# version 3.0+/DotNet 3.5+ The above co ...