☰

MyModal

原生js弹出层

目前为 2023-04-13 提交的版本。查看 最新版本。

此脚本不应直接安装，它是一个供其他脚本使用的外部库。如果您需要使用该库，请在脚本元属性加入：// @require https://update.gf.qytechs.cn/scripts/463930/1175314/MyModal.js 

  1. function MyModal(options) {
  2.   this.zIndex = 1010
  3.   this.config = options || {}
  4.   this.modal = null;
  5.   if(this.config) {
  6.     this.createStyle();
  7.     this.create();
  8.   }
  9. }
  10. MyModal.prototype.createStyle = function() {
  11.   if(document.querySelector("#myModalStyle")) {
  12.     return;
  13.   }
  14.   let style = `
  15.   <style id="myModalStyle">
  16.   /* The Modal (background) */
  17. .my-modal {
  18.   display: none; /* Hidden by default */
  19.   position: fixed; /* Stay in place */
  20.   z-index: 1010; /* Sit on top */
  21.   padding-top: 100px; /* Location of the box */
  22.   left: 0;
  23.   top: 0;
  24.   width: 100%; /* Full width */
  25.   height: 100%; /* Full height */
  26.   overflow: auto; /* Enable scroll if needed */
  27.   background-color: rgb(0,0,0); /* Fallback color */
  28.   background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  29. }
  30.  
  31. .my-modal button {
  32.   background-color: #1c9fff;
  33.   color: white;
  34.   padding: 14px 20px;
  35.   margin: 8px 0;
  36.   border: none;
  37.   cursor: pointer;
  38.   width: 100%;
  39.   opacity: 0.9;
  40. }
  41.  
  42. .my-modal button:hover {
  43.   opacity:1;
  44. }
  45.  
  46. .my-modal h2{
  47.     margin: 15px 0;
  48. }
  49.  
  50. /* Modal Content */
  51. .my-modal .modal-content {
  52.   position: relative;
  53.   background-color: #fefefe;
  54.   margin: auto;
  55.   padding: 0;
  56.   border: 1px solid #888;
  57.   width: 50%;
  58.   box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  59.   -webkit-animation-name: animatetop;
  60.   -webkit-animation-duration: 0.4s;
  61.   animation-name: animatetop;
  62.   animation-duration: 0.4s;
  63.   border-radius: 5px;
  64. }
  65.  
  66. /* Add Animation */
  67. @-webkit-keyframes animatetop {
  68.   from {top:-300px; opacity:0}
  69.   to {top:0; opacity:1}
  70. }
  71.  
  72. @keyframes animatetop {
  73.   from {top:-300px; opacity:0}
  74.   to {top:0; opacity:1}
  75. }
  76.  
  77. /* The Close Button */
  78. .my-modal .close {
  79.   color: #333;
  80.   float: right;
  81.   font-size: 28px;
  82.   font-weight: bold;
  83. }
  84.  
  85. .my-modal .close:hover,
  86. .my-modal .close:focus {
  87.   color: #333;
  88.   text-decoration: none;
  89.   cursor: pointer;
  90.   opacity: 0.60;
  91. }
  92.  
  93. .my-modal .modal-header {
  94.   padding: 2px 16px;
  95.   background-color: #fff;
  96.   color: #333;
  97.   border-bottom: 1px solid #f0f0f0;
  98.   border-radius: 5px;
  99. }
  100.  
  101. .my-modal .modal-body {
  102.   padding: 10px 16px;
  103.   min-height: 28px;
  104.   line-height: 28px;
  105. }
  106.  
  107. .my-modal .modal-footer {
  108.   padding: 2px 16px;
  109.   background-color: #fff;
  110.   color: #333;
  111.   /* border-top: 1px solid #f0f0f0; */
  112.   border-radius: 5px;
  113. }
  114.  
  115. .clearfix::after {
  116.   content: "";
  117.   clear: both;
  118.   display: table;
  119. }
  120.  
  121. .my-modal .cancelbtn,.my-modal .okbtn {
  122.   float: right;
  123.   width: 50%;
  124. }
  125.  
  126. /* Add a color to the cancel button */
  127. .my-modal .cancelbtn {
  128.   background-color: #f1f1f1;
  129.   color: #333;
  130.   /* border: 1px solid #dedede; */
  131. }
  132.  
  133. /* Add a color to the delete button */
  134. .my-modal .okbtn {
  135.   background-color: #1c9fff;
  136. }
  137.  
  138. @media screen and (max-width: 300px) {
  139.   .my-modal .cancelbtn,.my-modal  .okbtn {
  140.      width: 100%;
  141.   }
  142. }
  143. </style>
  144.   `
  145.   document.body.insertAdjacentHTML("beforeend", style);
  146. }
  147. MyModal.prototype.create = function(options) {
  148.   options = options || this.config
  149.   if(document.querySelector("#myModal")) {
  150.     document.querySelector("#myModal").remove();
  151.   }
  152.   let width = options.width ? 'width:'+options.width+';' : '';
  153.   let height = options.height ? 'height:'+options.height+';' : '';
  154.   let borderRadius = options.borderRadius ? 'border-radius:'+options.borderRadius+';' : '';
  155.   let zIndex = options.zIndex ? 'z-index:'+options.zIndex+';' : '';
  156.   let myModal = `
  157.   <div id="myModal" class="my-modal" style="${zIndex}">
  158.     <div class="modal-content" style="${width}${height}${borderRadius}">
  159.       <div class="modal-header" style="${borderRadius}${options.title===null?'display:none;':''}${options.content===null?'border-bottom:none':''}">
  160.         <span class="close">&times;</span>
  161.         <h2>${options.title||''}</h2>
  162.       </div>
  163.       <div class="modal-body" style="${options.content===null?'display:none;':''}">
  164.         ${options.title===null?'<span class="close">&times;</span>':''}
  165.         <span>${options.content||''}</span>
  166.       </div>
  167.       <div class="modal-footer" style="${borderRadius}">
  168.           <div class="clearfix">
  169.               <button type="button" class="okbtn" style="${options.okText===null?'display:none;':''}">${options.okText||'OK'}</button>
  170.               <button type="button" class="cancelbtn" style="${options.closeText===null?'display:none;':''}">${options.closeText||'Cancel'}</button>
  171.           </div>
  172.       </div>
  173.     </div>
  174.   </div>`
  175.   document.body.insertAdjacentHTML("beforeend", myModal);
  176.   this.modal = document.querySelector(`#myModal`);
  177.  
  178.   if(options.height) {
  179.     document.querySelector("#myModal .modal-body").style.height = (parseInt(options.height) - 125) + 'px';
  180.   }
  181.  
  182.   let _this = this;
  183.   //绑定关闭事件
  184.   document.querySelector(`#myModal .modal-header .close`)?.addEventListener("click", function(e){
  185.     _this.close();
  186.   });
  187.   document.querySelector(`#myModal .modal-body .close`)?.addEventListener("click", function(e){
  188.     _this.close();
  189.   });
  190.   //绑定cancel事件
  191.   document.querySelector(`#myModal .cancelbtn`).addEventListener("click", function(e){
  192.     if(_this.config.closeFn) {
  193.       e.myModal = _this;
  194.       _this.config.closeFn(e);
  195.     } else {
  196.       _this.close();
  197.     }
  198.   });
  199.   //绑定OK事件
  200.   document.querySelector(`#myModal .okbtn`).addEventListener("click", function(e){
  201.     if(_this.config.okFn) {
  202.       e.myModal = _this;
  203.       _this.config.okFn(e);
  204.     } else {
  205.       _this.close();
  206.     }
  207.   });
  208.   //点击空白，菜单消失
  209.   document.addEventListener('click', function(e){
  210.     if (e.target == _this.modal) {
  211.       _this.close();
  212.     }
  213.   });
  214. }
  215. MyModal.prototype.show = function() {
  216.   if(this.modal) {
  217.     this.modal.style.display = 'block';
  218.   }
  219. }
  220. MyModal.prototype.close = function() {
  221.   if(this.modal) {
  222.     this.modal.remove();
  223.   }
  224. }
  225.  
  226. //测试1
  227. // document.querySelector("#test1").addEventListener("click", function(){
  228. //   new MyModal({
  229. //     width: '50%',
  230. //     height: 'auto',
  231. //     borderRadius: '5px',
  232. //     zIndex: 1010,
  233. //     //null，不显示title
  234. //     title: 'test1',
  235. //     //支持HTML格式，null不显示content
  236. //     content: 'Hello World!',
  237. //     //closeText:null，不显示关闭按钮
  238. //     closeText: '关闭',
  239. //     //okText:null，不显示ok按钮
  240. //     okText: '好了',
  241. //     //closeFn和okFn可以省略
  242. //     closeFn: function (e) {
  243. //       console.log('closeFn clicked');
  244. //       e.myModal.close();
  245. //     },
  246. //     okFn: function (e) {
  247. //       console.log('okFn clicked');
  248. //       e.myModal.close();
  249. //     }
  250. //   }).show();
  251. // });
  252.  
  253. // //测试2
  254. // document.querySelector("#test2").addEventListener("click", function(){
  255. //   new MyModal({
  256. //     width: '50%',
  257. //     height: 'auto',
  258. //     borderRadius: '5px',
  259. //     zIndex: 1010,
  260. //     title: 'test2',
  261. //     content: 'Hello World2!',
  262. //     closeText: '取消',
  263. //     okText: '确定',
  264. //     closeFn: function (e) {
  265. //       console.log('closeFn clicked');
  266. //       e.myModal.close();
  267. //     },
  268. //     okFn: function (e) {
  269. //       console.log('okFn clicked');
  270. //       e.myModal.close();
  271. //     }
  272. //   }).show();
  273. // });

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址