在工作中,我们常常会遇到原生的样式感觉比较丑,又和我们做的项目风格不搭。于是就有了仿写原生一些组件的念头,今天我就带大家仿写一下confirm和alert样式都可以自己修改。

有些的不好的地方请指出来,让我们共同成长,如果有不懂的也可以私聊我,我会为你详细解说。

本文有以下三个段落

1.功能代码块展示,弹框功能尺寸适用手机在电脑上看会比较大。

  1. //弹出对话框:传了cancel是confirm,不传就是alert弹框
  2. function Confirm(obj) {
  3. let _obj = obj || {};
  4. //视图层
  5. let div = '<div id="_bj" style="">' +
  6. '<div id="Kuang" style="">' +
  7. '<h3 id="Tishi">提 示</h3>' +
  8. '<span id="_content"></span>' +
  9. '<div id="_cancel" class="XuanZhe" style="left:0;">取 消</div>' +
  10. '<div id="_determine" class="XuanZhe" style="right:0;border-left:0.5px solid gainsboro;">确 定</div>' +
  11. '</div>' +
  12. '</div>';
  13. $("body").append(div);
  14.  
  15. //css样式层
  16. $("#_bj").css({
  17. position:"fixed",
  18. top:0,left:0,
  19. textAlign:"center",
  20. width:"100vw",
  21. height:"100vh",
  22. zIndex: 998,
  23. background:"rgba(0,0,0,.3)",
  24. });
  25. $("#Kuang").css({
  26. position:"absolute",
  27. textAlign:"center",
  28. top:"50%",left:"50%",
  29. transform:"translate(-50%,-50%)",
  30. width:"900px",
  31. height:"450px",
  32. background:"#f8f8f8",
  33. borderRadius:"20px",
  34. fontSize:"50px"
  35. });
  36. //传入一个选项是alert框,两个是confirm框
  37. if(_obj.cancel!=""&&_obj.cancel!=null){
  38. $(".XuanZhe").css({
  39. position:"absolute",
  40. textAlign:"center",
  41. width:"50%",
  42. color:"#287ae8",
  43. borderTop:"0.5px solid gainsboro",
  44. bottom:0,
  45. lineHeight:"150px"
  46. });
  47. $("#_cancel").html(_obj.cancel);
  48. //交互层
  49. $("#_cancel").click(function() {
  50. $("#_bj").remove();
  51. _obj.callback && _obj.callback(false);
  52. });
  53. $("#_determine").click(function() {
  54. $("#_bj").remove();
  55. _obj.callback && _obj.callback(true);
  56. });
  57. }else{
  58. $(".XuanZhe").css({
  59. position:"absolute",
  60. textAlign:"center",
  61. width:"100%",
  62. color:"#287ae8",
  63. borderTop:"0.5px solid gainsboro",
  64. borderLeft:"none",
  65. left:0,
  66. bottom:0,
  67. lineHeight:"150px"
  68. });
  69. $("#_cancel").hide();
  70. $("#_determine").click(function() {
  71. $("#_bj").remove();
  72. _obj.callback && _obj.callback();
  73. });
  74. }
  75. $("#_determine").html(_obj.determine);
  76. $("#_content").html(_obj.content || "确定吗");
  77. }

2.代码调用说明

2.1调用时传了cancel,弹出的是confirm

$("#btn").click(function(){
  Confirm({
    content: "确定要删除吗",cancel:"取消",determine:"确定",
    callback: function(res) {//回调函数,返回true,false
      console.log(res);
    }
  });
});

  1.  
  1. 2.2调用时没有传cancel,弹出的是alert
  2. $("#btn").click(function(){
  3. Confirm({
  4. content: "你真的喜欢我吗?",determine:"确定",
  5. callback: function(res) {//回调函数没有返回值
  6. console.log("喜欢");
  7. }
  8. });
  9. });

3.希望大家给点优化建议,让它更好的为广大的程序员们服务。

仿写confirm和alert弹框的更多相关文章

  1. selenium对Alert弹框的多种处理

    Alert弹框是一个很烦人的控件,因为当前页面如果弹出了该弹框,你必须要处理它,不然你就不能操作页面的其它元素,下面我列出了alert弹框在多种场景下的处理办法. 明确知道系统哪个地方会弹alert ...

  2. python工具 - alert弹框输出姓名年龄、求和

    使用python自带的tkinter库进行GUI编程,完成两个功能: (1)要求用户输入姓名和年龄然后打印出来 (2)要求用户输入一个数字,然后计算1到该数字之间的和 代码部分: # 导入tkinte ...

  3. 自定义alert弹框,title不显示域名

    问题: 系统默认的alert弹框的title会默认显示网页域名 解决办法: (修改弹框样式) (function() { window.alert = function(name) { $(" ...

  4. JavaScript实现自定义alert弹框

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAh0AAAFkCAYAAACEpYlzAAAfj0lEQVR4nO3dC5BddZ0n8F93pxOQCO

  5. 操作JavaScript的Alert弹框

    @Testpublic void testHandleAlert(){ WebElement button =driver.findElement(By.xpath("input" ...

  6. 自定义alert弹框,title不显示域名(重写alert)

    问题: 系统默认的alert弹框的title会默认显示网页域名 解决办法: (修改弹框样式) (function() { window.alert = function(name) { $(" ...

  7. 手写alert弹框(一)

    采用原生的JavaScript, html代码 <meta name="viewport" content="width=device-width, initial ...

  8. 如何优雅的写一个Vue 的弹框

    写Vue或者是react 都会遇见弹框的问题.也尝试了多种办法来写弹框,一直都不太满意,今天特地看了一下 Element UI 的源码,模仿着写了一个简易版. 大概有一下几个问题: 1.弹框的层级问题 ...

  9. CreateProcessAsUser,C#写的windows服务弹框提示消息或者启动子进程

    服务(Service)对于大家来说一定不会陌生,它是Windows 操作系统重要的组成部分.我们可以把服务想像成一种特殊的应用程序,它随系统的“开启-关闭”而“开始-停止”其工作内容,在这期间无需任何 ...

随机推荐

  1. MongoDB小结

    教程 MongoDB MongoDB 是由C++语言编写的,是一个基于分布式文件存储的开源数据库系统.在高负载的情况下,添加更多的节点,可以保证服务器性能.MongoDB 旨在为WEB应用提供可扩展的 ...

  2. Qt中(图片)资源的三种使用方式

    Qt中使用图片资源的方法有很多种,以前我一直分不清各种之间的区别和Qt相应的处理机制,后来遇到一些实际的问题,然后再加上查阅源码和资料,总算弄明白一些事情,但是本文仅仅是个人理解,如有错误之处请告诉我 ...

  3. windows 10 使用 tricks

    全新的环境变量编辑界面, 全新的[任务管理器]⇒ [性能] 0. 添加开机启动项 将要添加的开机自启动软件的快捷方式添加到如下的路径: C:\Users\hasee\AppData\Roaming\M ...

  4. CUDA atomic原子操作

    CUDA的原子操作可以理解为对一个变量进行"读取-修改-写入"这三个操作的一个最小单位的执行过程,这个执行过程不能够再分解为更小的部分,在它执行过程中,不允许其他并行线程对该变量进 ...

  5. Asp.net固定功能位充满了零(解决,演示样本)!

    Asp.net固定功能位充满了零(解决.演示样本)! 在发展,其中,数实现出现8数字.但是,需要使用0加厚.例如:123,代表:0000123. 真实的比例,如下: decimal aaa = 123 ...

  6. Flask框架2

    Flask框架的学习与实战(二):实战小项目   昨天写了一篇flask开发环境搭建,今天继续,进行一个实战小项目-blog系统. blog系统很简单,只有一个页面,然后麻雀虽小五脏俱全.这里目的不是 ...

  7. OpenGL(七) 光照模型及设置

    OpenGL把现实世界中的光照系统近似归为三部分,分别是光源.材质和光照环境. 光源就是光的来源,是"光"这种物质的提供者: 材质是指被光源照射的物体的表面的反射.漫反射(Open ...

  8. 不得不说,我太佩服node了,连openXML也搞定了!

    https://github.com/Ziv-Barber/officegen 开源项目地址 使用报告等有空完成!

  9. WPF 4 开发Windows 7 任务栏(Overlay Icon、Thumbnail Toolbar、Progress Bar)

    原文:WPF 4 开发Windows 7 任务栏(Overlay Icon.Thumbnail Toolbar.Progress Bar)      在上一篇我们介绍了如何在WPF 4 中开发Wind ...

  10. C# 优先级队列

    前6行是优先队列,后6行是C#原生的queue Min Heap Priority Queue Works with: C# version 3.0+/DotNet 3.5+ The above co ...