master

分支 (1)

管理

管理

master

Javascript
/
modal.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>MyModal</title>
  <link rel="stylesheet" href="./lib-modal/modal.css">
  <script src="./lib-modal/modal.js"></script>
</head>

<body>
  <button id="btn">弹窗</button>

  <p><a href="https://gitee.com/xiaoqiang365/Javascript/blob/master/lib-modal/Readme.md" target="_blank">使用说明</a></p>

  <script>
    const btn = document.getElementById('btn');
    btn.addEventListener('click', function () {
      new $Modal({
        content: '前端开发是创建Web页面或app等前端界面呈现给用户的过程',
        closeOnClickModal: false,
        confirmText: '我知道了',
        btnCancel: false,
        contentStyle: {
          borderBottom: 'none',
        }
      })
      // new $Modal({
      //   title: '⚠警告',
      //   content: `前端开发是创建Web页面或app等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互 [1]  。它从网页制作演变而来，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，早期网站主要内容都是静态，以图片和文字为主，用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用，现代网页更加美观，交互效果显著，功能更加强大。`,
      //   useHTML: true,
      //   confirmText: '我知道了',
      //   // cancelText: '算了吧',

      //   wrapStyle: {
      //     width: '500px',
      //     height: 'auto',
      //     'border-radius': '6px'
      //   },
      //   contentStyle: {
      //     // overflowY: 'scroll',
      //     color: '#333',
      //     textIndent: '2em',
      //     lineHeight: '200%'
      //   },
      //   // contentFontSize: '10px',
      //   btnClose: true,
      //   // btnCancel: false,
      //   closeOnClickModal: false,
      //   cancel: function (e) {
      //     console.log('取消', e);
      //     // return false;
      //   },
      //   confirm: function (e) {
      //     console.log('确定', e);
      //   }
      // })
    })
  </script>
</body>

</html>