经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » JavaScript » 查看文章
javascript实现好看的可复用弹窗插件
来源:jb51  时间:2022/5/9 9:43:59  对本文有异议

本文实例为大家分享了javascript实现可复用弹窗插件的具体代码,供大家参考,具体内容如下

效果图

下面是详细代码

index.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. ?? ?<head>
  4. ?? ??? ?<meta charset="UTF-8">
  5. ?? ??? ?<meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. ?? ??? ?<meta http-equiv="X-UA-Compatible" content="ie=edge">
  7. ?? ??? ?<title>index</title>
  8. ?? ??? ?<link rel="stylesheet" href="./componet.css" >
  9. ?? ?</head>
  10. ?? ?<body>
  11. ?? ??? ?<button id="button"> 弹窗 </button>
  12. ?? ??? ?<script src="./componet.js"></script>
  13. ?? ??? ?<script>
  14. ?? ??? ??? ?var btn = document.querySelector("#button");
  15. ?? ??? ??? ?btn.addEventListener("click", function() {
  16. ?? ??? ??? ??? ?new AlertBox({
  17. ?? ??? ??? ??? ??? ?message: "哈哈哈哈哈哈",
  18. ?? ??? ??? ??? ??? ?success: "确认",
  19. ?? ??? ??? ??? ??? ?cancel: "取消",
  20. ?? ??? ??? ??? ??? ?successcallback: function() {
  21. ?? ??? ??? ??? ??? ??? ?console.log("确认。。。。。。。。。")
  22. ?? ??? ??? ??? ??? ?},
  23. ?? ??? ??? ??? ??? ?cancelcallback: function() {
  24. ?? ??? ??? ??? ??? ??? ?console.log("取消。。。。。。。。。。。")
  25. ?? ??? ??? ??? ??? ?}
  26. ?? ??? ??? ??? ?});
  27. ?? ??? ??? ?})
  28. ?? ??? ?</script>
  29. ?? ?</body>
  30. </html>

componet.css

  1. .alert-Box{
  2. ? ? width: 250px;
  3. ? ? height: 150px;
  4. ? ? position: absolute;
  5. ? ? top: 50%;
  6. ? ? left: 50%;
  7. ? ? margin: -75px 0 0 -125px;
  8. ? ? box-shadow: 0px 0px 10px 7px #ced6e0;
  9. ? ? border-radius: 5px;
  10. ? ? background-color: #ffffff;
  11. }
  12. ?
  13. .alert-Box-message{
  14. ? ? height:108px;
  15. ? ? text-align: center;
  16. ? ? line-height: 108px;
  17. ? ? font-size: 14px;
  18. }
  19. ?
  20. .alert-Box-buttonwrap{
  21. ? ? height: 40px;
  22. ? ? display: flex;
  23. ? ? border-bottom-left-radius: 5px;
  24. ? ? border-bottom-right-radius: 5px;
  25. ? ? overflow: hidden;
  26. }
  27. .alert-Box-button{
  28. ? ? height: inherit;
  29. ? ? text-align: center;
  30. ? ? line-height: 40px;
  31. ? ? flex:1;
  32. ? ? cursor: pointer;
  33. ? ? font-size: 14px;
  34. ? ? background-color: white;
  35. ? ? border-top: solid 1px #ced6e0;
  36. ? ? transition: background-color 0.5s;
  37. }
  38. .alert-Box-button:hover{
  39. ? ? background-color: #dee1e6;
  40. ? ? color: rgb(88, 88, 88);
  41. }
  42. .alert-Box-button:nth-child(1){
  43. ? ? border-right: solid 1px #ced6e0;
  44. }
  45. ?
  46. .alert-Box-show{
  47. ? ? -webkit-animation: alert-show 0.3s;
  48. ? ? -webkit-animation-fill-mode: forwards;
  49. ? ? animation: alert-show 0.3s;
  50. ? ? animation-fill-mode: forwards;
  51. }
  52. .alert-Box-hidden{
  53. ? ? -webkit-animation: alert-hidden 0.3s;
  54. ? ? -webkit-animation-fill-mode: forwards;
  55. ? ? animation: alert-hidden 0.3s;
  56. ? ? animation-fill-mode: forwards;
  57. }?
  58. ?
  59. @keyframes alert-show{
  60. ? ? from{transform: scale(0);}
  61. ? ? to{transform: scale(1);}
  62. }
  63. @-webkit-keyframes alert-show{
  64. ? ? from{transform: scale(0);}
  65. ? ? to{transform: scale(1);}
  66. }
  67. ?
  68. @keyframes alert-hidden{
  69. ? ? from{transform: scale(1);}
  70. ? ? to{transform: scale(0);}
  71. }
  72. @-webkit-keyframes alert-hidden{
  73. ? ? from{transform: scale(1);}
  74. ? ? to{transform: scale(0);}
  75. }

componet.js

  1. function AlertBox(options) {
  2. ?? ?this.message = options.message;
  3. ?? ?this.callback = options.callback;
  4. ?? ?this.success = options.success;
  5. ?? ?this.cancel = options.cancel;
  6. ?? ?this.successcallback = options.successcallback;
  7. ?? ?this.cancelcallback = options.cancelcallback;
  8. ?? ?this.createBox();
  9. ?? ?this.buttonaddEvent();
  10. }
  11. AlertBox.prototype.createBox = function() {
  12. ?? ?let body = document.getElementsByTagName("body")[0];
  13. ?? ?this.fragment = document.createDocumentFragment();
  14. ?? ?this.Box = crE("div");
  15. ?? ?this.Box.classList.add("alert-Box", "alert-Box-show");
  16. ?? ?let message = crE("div");
  17. ?? ?message.textContent = this.message;
  18. ?? ?message.classList.add("alert-Box-message");
  19. ?? ?this.Box.appendChild(message);
  20. ?? ?let buttonwrap = crE("div");
  21. ?? ?buttonwrap.classList.add("alert-Box-buttonwrap");
  22. ?? ?this.successBtn = crE("div");
  23. ?? ?this.successBtn.classList.add("alert-Box-button");
  24. ?? ?this.successBtn.textContent = this.success || "确认";
  25. ?? ?buttonwrap.appendChild(this.successBtn);
  26. ?? ?if (this.cancel) {
  27. ?? ??? ?this.cancelBtn = crE("div");
  28. ?? ??? ?this.cancelBtn.classList.add("alert-Box-button");
  29. ?? ??? ?this.cancelBtn.textContent = this.cancel;
  30. ?? ??? ?buttonwrap.appendChild(this.cancelBtn);
  31. ?? ?}
  32. ?? ?this.Box.appendChild(buttonwrap);
  33. ?? ?this.fragment.appendChild(this.Box);
  34. ?? ?body.appendChild(this.fragment);
  35. }
  36. ?
  37. AlertBox.prototype.buttonaddEvent = function() {
  38. ?? ?this.successBtn.addEventListener("click", () => {
  39. ?? ??? ?let fn = this.successcallback;
  40. ?? ??? ?fn();
  41. ?? ??? ?this.Box.classList.add("alert-Box-hidden");
  42. ?? ??? ?setTimeout(() => {
  43. ?? ??? ??? ?remE(this.Box);
  44. ?? ??? ?}, 310)
  45. ?? ?});
  46. ?? ?if (this.cancel) {
  47. ?? ??? ?this.cancelBtn.addEventListener("click", () => {
  48. ?? ??? ??? ?let fn = this.cancelcallback;
  49. ?? ??? ??? ?fn();
  50. ?? ??? ??? ?this.Box.classList.add("alert-Box-hidden");
  51. ?? ??? ??? ?setTimeout(() => {
  52. ?? ??? ??? ??? ?remE(this.Box);
  53. ?? ??? ??? ?}, 310)
  54. ?? ??? ?});
  55. ?? ?}
  56. }
  57. ?
  58. function crE(element) {
  59. ?? ?return document.createElement(element);
  60. }
  61. ?
  62. function remE(element) {
  63. ?? ?document.body.removeChild(element);
  64. }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持w3xue。

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号