{"_id":"@ctmobile/ui-popup-sd","_rev":"2-b5ba7b30e45a7ad90214fae5790f4a2b","name":"@ctmobile/ui-popup-sd","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@ctmobile/ui-popup-sd","version":"1.0.0","description":"支持移动端的UI组件-Popup","main":"lib/popup.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1","doc":"jsdoc src README.md -d doc -u doc/tutorials","buildpackage":"ctcopy ../src src && ctbuild --type buildpackage","link":"npm link @ctsj/build && npm link @ctmobile/ui-util"},"repository":{"type":"git","url":"git+https://github.com/playerljc/CTMobile-UI.git"},"keywords":["popup","CtMobile","CTMibole-UI","mobile","webapp","SPA","Hybrid","Cordova","Android","iOS","Material","playerljc","WebFramework"],"author":{"name":"playerljc","email":"playerljc@163.com"},"license":"MIT","bugs":{"url":"https://github.com/playerljc/CTMobile-UI/issues"},"homepage":"https://github.com/playerljc/CTMobile-UI#readme","dependencies":{"@babel/runtime":"^7.2.0"},"devDependencies":{"@ctsj/build":"^1.0.0","@ctmobile/ui-util":"^1.0.0"},"_id":"@ctmobile/ui-popup-sd@1.0.0","_npmVersion":"6.4.1","_nodeVersion":"10.15.3","_npmUser":{"name":"playerljc","email":"playerljc@163.com"},"dist":{"integrity":"sha512-dgpvEA7n0ZaxlapUPSSzwTLdtCFGVXzHf5mLrXdMnzqywXOam4DDotXw81ceLim7WW9llme0afBWMVSNhwR7PA==","shasum":"fbf62cda4b51b70339c9649303a0ed94db452457","tarball":"https://registry.npmjs.org/@ctmobile/ui-popup-sd/-/ui-popup-sd-1.0.0.tgz","fileCount":6,"unpackedSize":39420,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdMTHUCRA9TVsSAnZWagAAe1sP/1Snr+3tprHyanwVx4Bc\nRFR82klX95jocMofSwVeOSIWkpNYTCplTEl55Jd41E/rMNMOz/0Vmd17suvu\n9i2Tbri8c2Xi67WSI5318IFLX0uGlM+81osGUUVPn5f+eDuB+ccuLU+qxSvA\nMulZpljGZK2yquO7cOPOKra6JfklQJ6blHX53RPKhQ+5o6WnFh/7o3dOlPN4\ndIgZYh3OG/Oem8g7fr805m99dq7iYDl3E0fMvYPMB8SsG4ttbRYRjZXfB/NX\nlCpzFM9x77799lHKBPXzZtX5sO3WLss78sFnYckCPiLIS0NiZvBKZyiw1VgG\naQWo5Zxn3m9BLz4hHtHkNtiIRDMTx2sLm2nSKyMcDkaoGITVrw7TPRplmdLE\n3hXut45Wv4for4vq5EXyXMjo5Fzu6xBlLJlu6MlVJtaSBkeZSKkg8k+Z3rk/\nRx7C5OexvyzcKEXd6N67WzVizum6jpS448kd9/s3/HWSBxWZhK8AcTKL92kQ\nJWtenHy0YZq0L9CZjLRZc6/f6GIoioq1oYKn9ruSWwfKGy0PVoQOZfE7st4F\nGwF5cm5tFuqr3UF9jq7xMnd1VKYR+ozpN0PxDyBlJznscBVhb/RDxUl6C5mF\n5KC0ajXjEdEZdSxYJ07rdvX4SXJJwRB2MvI9LskZcKeoI48PhY2yP3ntrH6v\nSb2q\r\n=hpmf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFgT99H6rFJxPpFn7g6HxYbc6B+5XeMkC7ct/Umak67cAiEAkEdovUYtePLzvyZzr7PvTdLnax6CHq///43pfHZOl/w="}]},"maintainers":[{"name":"playerljc","email":"playerljc@163.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-popup-sd_1.0.0_1563505107038_0.08378502959795697"},"_hasShrinkwrap":false},"1.0.1":{"name":"@ctmobile/ui-popup-sd","version":"1.0.1","description":"支持移动端的UI组件-Popup","main":"lib/popup.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1","doc":"jsdoc src README.md -d doc -u doc/tutorials","buildpackage":"ctcopy ../src src && ctbuild buildpackage"},"repository":{"type":"git","url":"git+https://github.com/playerljc/CTMobile-UI.git"},"keywords":["popup","CtMobile","CTMibole-UI","mobile","webapp","SPA","Hybrid","Cordova","Android","iOS","Material","playerljc","WebFramework"],"author":{"name":"playerljc","email":"playerljc@163.com"},"license":"MIT","bugs":{"url":"https://github.com/playerljc/CTMobile-UI/issues"},"homepage":"https://github.com/playerljc/CTMobile-UI#readme","dependencies":{"@babel/runtime":"^7.2.0"},"devDependencies":{"@ctsj/build":"^1.0.11","@ctmobile/ui-util":"^1.0.0"},"_id":"@ctmobile/ui-popup-sd@1.0.1","_npmVersion":"6.4.1","_nodeVersion":"10.15.3","_npmUser":{"name":"playerljc","email":"playerljc@163.com"},"dist":{"integrity":"sha512-26Ps8VRzmeYe8jNH1jAJHe+hrSUAq5hYAiWGVitXo9PvxAKZAc44HeVvgKeq6jt27kJGKW1CvL9B1DfgTJKJYg==","shasum":"6fae1ac7b4b77d0b367ce2d06ac464eb0f59522f","tarball":"https://registry.npmjs.org/@ctmobile/ui-popup-sd/-/ui-popup-sd-1.0.1.tgz","fileCount":6,"unpackedSize":39354,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdgfCcCRA9TVsSAnZWagAARTUP/1r+qRMACLHqGZs8gf/i\n/YV29PNqnU2pLE4RFtEFBNSIWHu7Ix5ERnZWaBWEswe+mKhYqmp+VK9umco3\n255c6VMjWL5HSSx3yuivCai5bFpB9hSdZvTfyicj1g/16CECoucChaj7vmlI\nC6BF83UyTAkzDtno/YJSXf2vBLiCL+eWUPn0tKfxKYO0isuxF/6+K1TSLgmc\nGVhDBbh1LVKGmzlq57SZS/LnjcmetRLtlse6lg5uYZq31Lb1iyfOm8deOVMx\nJ5U7p2W3KTXavv9l6g9BSmq7uYHgRTHN+8/enzTPwXyWUrGZXaR/VA2D4lB9\nqTRiXJR6j7hDiNjg26GFhLlPpi1Nu8tfydEtVwSOXVIu1z7c86vbpumOopvP\nB1vEWfNWQE1AoP+p5r2r8nh+9gmHoMCQpxyRWmoeNGI36Clnnnwxw9SeD6Ba\ncAdLx0N9mt9JS4j4T5A/LsM5JNOpIKggFciws66DESOPf2d9oLaR5fdjtb1Y\nk3vtsNHp1aLhCtwb4J1TnCFMVLV37d9dVhLN9O9+x0rgioMxwtEP7eaj8E6K\nMmigI0l1O1JNijyEeyFcVqZRBA2qCrLj6vBtGyc8lG1Ney7DmxjfkN6VqUz5\nVh5OKHStl4jrVaDoZXMPPfzMRXIPPWFgRQBOs0UMuq/B8IpP1KS3pOOwkiCv\nptTP\r\n=f2OJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDIxNumLLxl8/2tulUMh9nOqJ9XWUbKwGjGQfsHPOIClwIhAI10notk+1rx1qE5MNUOWHl9rOBrj2A70fqyVlstQDqX"}]},"maintainers":[{"name":"playerljc","email":"playerljc@163.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-popup-sd_1.0.1_1568796827860_0.5009463183924625"},"_hasShrinkwrap":false}},"time":{"created":"2019-07-19T02:58:26.859Z","1.0.0":"2019-07-19T02:58:27.238Z","modified":"2022-04-05T02:04:08.834Z","1.0.1":"2019-09-18T08:53:48.056Z"},"maintainers":[{"name":"playerljc","email":"playerljc@163.com"}],"description":"支持移动端的UI组件-Popup","homepage":"https://github.com/playerljc/CTMobile-UI#readme","keywords":["popup","CtMobile","CTMibole-UI","mobile","webapp","SPA","Hybrid","Cordova","Android","iOS","Material","playerljc","WebFramework"],"repository":{"type":"git","url":"git+https://github.com/playerljc/CTMobile-UI.git"},"author":{"name":"playerljc","email":"playerljc@163.com"},"bugs":{"url":"https://github.com/playerljc/CTMobile-UI/issues"},"license":"MIT","readme":"# Popup\r\n\r\n* [基本布局](#popup-layout)\r\n* [初始化](#popup-initial)\r\n  - [API方式](#popup-initial-api)\r\n  - [配置方式](#popup-initial-config)\r\n* [例子](#popup-demo)\r\n* [方法](#popup-methods)\r\n* [事件](#popup-events)\r\n  -\r\n  - 事件类型\r\n    + [create](#popup-events-create)\r\n    + [afterclose](#popup-events-afterclose)\r\n    + [aftershow](#popup-events-aftershow)\r\n    + [beforeshow](#popup-events-beforeshow)\r\n    + [beforeclose](#popup-events-beforeclose)\r\n    + [distory](#popup-events-distory)\r\n    + [ct-popup-event-create](#popup-events-ct-popup-event-create)\r\n    + [ct-popup-event-afterclose](#popup-events-ct-popup-event-afterclose)\r\n    + [ct-popup-event-aftershow](#popup-events-ct-popup-event-aftershow)\r\n    + [ct-popup-event-beforeshow](#popup-events-ct-popup-event-beforeshow)\r\n    + [ct-popup-event-beforeclose](#popup-events-ct-popup-event-beforeclose)\r\n    + [ct-popup-event-distory](#popup-events-ct-popup-event-distory)\r\n\r\n## 基本布局\r\n\r\n```\r\n\r\n<template id=\"popup\">\r\n  <div class=\"ct-popup\">\r\n    ...\r\n  </div>\r\n</template>\r\n\r\n```\r\n\r\n## 初始化\r\n\r\nAPI方式 html\r\n\r\n```\r\n\r\n<template id=\"popup1\">\r\n  <div class=\"ct-popup\">\r\n    <button class=\"openPopup\">openPopup2</button>\r\n    <button class=\"closePopup\">closePopup</button>\r\n    <p>popup1</p>\r\n  </div>\r\n</template>\r\n\r\n<template id=\"popup2\">\r\n  <div class=\"ct-popup\">\r\n    <button class=\"closePopup\">closePopup</button>\r\n    <p>popup2</p>\r\n  </div>\r\n</template>\r\n\r\n<button id=\"openPopup1\">openPopup1</button>\r\n\r\n```\r\n\r\njs\r\n\r\n```\r\n\r\nimport Popup from '@ctmobile/ui-popup/popup';\r\nimport '@ctmobile/ui-popup/popup.less';\r\n\r\nlet popup1 = Popup.create(\r\n  document.getElementById('popup1'),\r\n  {\r\n    listeners: {\r\n      create: (el) => {\r\n        el.querySelector('.openPopup2').addEventListener('click', () => {\r\n          Popup.close(popup2);\r\n        });\r\n\r\n        el.querySelector('.closePopup').addEventListener('click', () => {\r\n          Popup.close(popup1);\r\n        });\r\n      }\r\n    }\r\n  }\r\n});\r\n\r\nlet popup2 = Popup.create(\r\n  document.getElementById('popup2'),\r\n  {\r\n    listeners: {\r\n      create: (el) => {\r\n        el.querySelector('.closePopup').addEventListener('click', () => {\r\n          Popup.close(popup2);\r\n        });\r\n      }\r\n    }\r\n  }\r\n);\r\n\r\ndocument.getElementById('openPopup1').addEventListener('click', (e) => {\r\n  if(popup1.isDestory()) {\r\n    popup1 = Popup.create(\r\n      document.getElementById('popup1'),\r\n      {\r\n        listeners: {\r\n          create: (el) => {\r\n            el.querySelector('.openPopup2').addEventListener('click', () => {\r\n              Popup.close(popup2);\r\n            });\r\n\r\n            el.querySelector('.closePopup').addEventListener('click', () => {\r\n              Popup.close(popup1);\r\n            });\r\n          }\r\n        }\r\n      }\r\n    });\r\n  }\r\n  Popup.show(popup1);\r\n});\r\n\r\n```\r\n\r\n<dl>\r\n  <dt>配置方式</dt>\r\n  <dd>\r\n    <div>\r\n      <div>html</div>\r\n      <div>\r\n        <pre>\r\n          <code>\r\n<template>\r\n<div>\r\n  <a>openPopup2</a>\r\n  <a>closePopup</a>\r\n  <p>popup1</p>\r\n</div>\r\n</template>\r\n\r\n<template>\r\n<div>\r\n  <a>closePopup</a>\r\n  <p>popup2</p>\r\n</div>\r\n</template>\r\n\r\n<a>openPopup1</a>\r\n          </code>\r\n        </pre>\r\n      </div>\r\n    </div>\r\n    <div>\r\n      <div>js</div>\r\n      <div>\r\n        <pre>\r\n          <code>\r\nimport Popup from &apos;@ctmobile/ui-popup/popup&apos;;\r\nimport &apos;@ctmobile/ui-popup/popup.less&apos;;\r\n\r\ndocument.body.addEventListener(&apos;ct-popup-event-create&apos;, (el) =&gt; {\r\nconsole.log(el);\r\n});\r\n\r\ndocument.body.addEventListener(&apos;ct-popup-event-beforeshow&apos;, (el) =&gt; {\r\nconsole.log(el);\r\n});\r\n\r\ndocument.body.addEventListener(&apos;ct-popup-event-aftershow&apos;, (el) =&gt; {\r\nconsole.log(el);\r\n});\r\n\r\ndocument.body.addEventListener(&apos;ct-popup-event-beforeclose&apos;, (el) =&gt; {\r\nconsole.log(el);\r\n});\r\n\r\ndocument.body.addEventListener(&apos;ct-popup-event-afterclose&apos;, (el) =&gt; {\r\nconsole.log(el);\r\n});\r\n\r\ndocument.body.addEventListener(&apos;ct-popup-event-distory&apos;, (el) =&gt; {\r\nconsole.log(el);\r\n});\r\n          </code>\r\n        </pre>\r\n      </div>\r\n    </div>\r\n  </dd>\r\n</dl>\r\n\r\n## 例子\r\n\r\n#### html\r\n\r\n```\r\n\r\n<!--demo-config-popup1-->\r\n<template id=\"demo-config-popup1\">\r\n<div class=\"ct-popup\">\r\n  <div class=\"demo-popup\">\r\n    <div class=\"demo-popup-header\">\r\n      <a class=\"demo-popup-header-left\" data-popup=\"demo-config-popup2\">Open Popup2</a>\r\n      <div class=\"demo-popup-header-title\">Popup1 Title</div>\r\n      <a data-close class=\"demo-popup-header-right\">Close</a>\r\n    </div>\r\n    <div class=\"demo-popup-content\">\r\n      <div class=\"block\">\r\n        <p class>Here comes popup. You can put here anything, even independent view with its own\r\n          navigation.\r\n          Also not, that by default popup looks a bit different on iPhone/iPod and iPad, on iPhone it is\r\n          fullscreen.</p>\r\n        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse faucibus mauris leo, eu\r\n          bibendum\r\n          neque congue non. Ut leo mauris, eleifend eu commodo a, egestas ac urna. Maecenas in lacus\r\n          faucibus,\r\n          viverra ipsum pulvinar, molestie arcu. Etiam lacinia venenatis dignissim. Suspendisse non nisl\r\n          semper\r\n          tellus malesuada suscipit eu et eros. Nulla eu enim quis quam elementum vulputate. Mauris ornare\r\n          consequat nunc viverra pellentesque. Aenean semper eu massa sit amet aliquam. Integer et neque sed\r\n          libero mollis elementum at vitae ligula. Vestibulum pharetra sed libero sed porttitor. Suspendisse\r\n          a\r\n          faucibus lectus.</p>\r\n        <p>Duis ut mauris sollicitudin, venenatis nisi sed, luctus ligula. Phasellus blandit nisl ut lorem\r\n          semper pharetra. Nullam tortor nibh, suscipit in consequat vel, feugiat sed quam. Nam risus\r\n          libero,\r\n          auctor vel tristique ac, malesuada ut ante. Sed molestie, est in eleifend sagittis, leo tortor\r\n          ullamcorper erat, at vulputate eros sapien nec libero. Mauris dapibus laoreet nibh quis bibendum.\r\n          Fusce dolor sem, suscipit in iaculis id, pharetra at urna. Pellentesque tempor congue massa quis\r\n          faucibus. Vestibulum nunc eros, convallis blandit dui sit amet, gravida adipiscing libero.</p>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n</template>\r\n\r\n<!--demo-config-popup2-->\r\n<template id=\"demo-config-popup2\">\r\n<div class=\"ct-popup\">\r\n  <div class=\"demo-popup\">\r\n    <div class=\"demo-popup-header\">\r\n\r\n      <div class=\"demo-popup-header-title\">Popup2 Title</div>\r\n      <a data-close class=\"demo-popup-header-right\">Close</a>\r\n    </div>\r\n    <div class=\"demo-popup-content\">\r\n      <div class=\"block\">\r\n        <p class>Here comes popup. You can put here anything, even independent view with its own\r\n          navigation.\r\n          Also not, that by default popup looks a bit different on iPhone/iPod and iPad, on iPhone it is\r\n          fullscreen.</p>\r\n        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse faucibus mauris leo, eu\r\n          bibendum\r\n          neque congue non. Ut leo mauris, eleifend eu commodo a, egestas ac urna. Maecenas in lacus\r\n          faucibus,\r\n          viverra ipsum pulvinar, molestie arcu. Etiam lacinia venenatis dignissim. Suspendisse non nisl\r\n          semper\r\n          tellus malesuada suscipit eu et eros. Nulla eu enim quis quam elementum vulputate. Mauris ornare\r\n          consequat nunc viverra pellentesque. Aenean semper eu massa sit amet aliquam. Integer et neque sed\r\n          libero mollis elementum at vitae ligula. Vestibulum pharetra sed libero sed porttitor. Suspendisse\r\n          a\r\n          faucibus lectus.</p>\r\n        <p>Duis ut mauris sollicitudin, venenatis nisi sed, luctus ligula. Phasellus blandit nisl ut lorem\r\n          semper\r\n          pharetra. Nullam tortor nibh, suscipit in consequat vel, feugiat sed quam. Nam risus libero,\r\n          auctor\r\n          vel\r\n          tristique ac, malesuada ut ante. Sed molestie, est in eleifend sagittis, leo tortor ullamcorper\r\n          erat,\r\n          at\r\n          vulputate eros sapien nec libero. Mauris dapibus laoreet nibh quis bibendum. Fusce dolor sem,\r\n          suscipit\r\n          in iaculis id, pharetra at urna. Pellentesque tempor congue massa quis faucibus. Vestibulum nunc\r\n          eros,\r\n          convallis blandit dui sit amet, gravida adipiscing libero.</p>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n</template>\r\n\r\n<!--demo-api-popup1-->\r\n<template id=\"demo-api-popup1\">\r\n<div class=\"ct-popup\">\r\n  <div class=\"demo-popup\">\r\n    <div class=\"demo-popup-header\">\r\n      <a class=\"openPopup2Btn\">Open Popup2</a>\r\n      <div class=\"demo-popup-header-title\">Popup1 Title</div>\r\n      <a class=\"closeBtn demo-popup-header-right\">Close</a>\r\n    </div>\r\n    <div class=\"demo-popup-content\">\r\n      <div class=\"block\">\r\n        <p class>Here comes popup. You can put here anything, even independent view with its own\r\n          navigation.\r\n          Also not, that by default popup looks a bit different on iPhone/iPod and iPad, on iPhone it is\r\n          fullscreen.</p>\r\n        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse faucibus mauris leo, eu\r\n          bibendum\r\n          neque congue non. Ut leo mauris, eleifend eu commodo a, egestas ac urna. Maecenas in lacus\r\n          faucibus,\r\n          viverra ipsum pulvinar, molestie arcu. Etiam lacinia venenatis dignissim. Suspendisse non nisl\r\n          semper\r\n          tellus malesuada suscipit eu et eros. Nulla eu enim quis quam elementum vulputate. Mauris ornare\r\n          consequat nunc viverra pellentesque. Aenean semper eu massa sit amet aliquam. Integer et neque sed\r\n          libero mollis elementum at vitae ligula. Vestibulum pharetra sed libero sed porttitor. Suspendisse\r\n          a\r\n          faucibus lectus.</p>\r\n        <p>Duis ut mauris sollicitudin, venenatis nisi sed, luctus ligula. Phasellus blandit nisl ut lorem\r\n          semper\r\n          pharetra. Nullam tortor nibh, suscipit in consequat vel, feugiat sed quam. Nam risus libero,\r\n          auctor\r\n          vel\r\n          tristique ac, malesuada ut ante. Sed molestie, est in eleifend sagittis, leo tortor ullamcorper\r\n          erat,\r\n          at\r\n          vulputate eros sapien nec libero. Mauris dapibus laoreet nibh quis bibendum. Fusce dolor sem,\r\n          suscipit\r\n          in iaculis id, pharetra at urna. Pellentesque tempor congue massa quis faucibus. Vestibulum nunc\r\n          eros,\r\n          convallis blandit dui sit amet, gravida adipiscing libero.</p>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n</template>\r\n\r\n<!--demo-api-popup2-->\r\n<template id=\"demo-api-popup2\">\r\n<div class=\"ct-popup\">\r\n  <div class=\"demo-popup\">\r\n    <div class=\"demo-popup-header\">\r\n\r\n      <div class=\"demo-popup-header-title\">Popup2 Title</div>\r\n      <a class=\"closeBtn demo-popup-header-right\">Close</a>\r\n    </div>\r\n    <div class=\"demo-popup-content\">\r\n      <div class=\"block\">\r\n        <p class>Here comes popup. You can put here anything, even independent view with its own\r\n          navigation.\r\n          Also not, that by default popup looks a bit different on iPhone/iPod and iPad, on iPhone it is\r\n          fullscreen.</p>\r\n        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse faucibus mauris leo, eu\r\n          bibendum\r\n          neque congue non. Ut leo mauris, eleifend eu commodo a, egestas ac urna. Maecenas in lacus\r\n          faucibus,\r\n          viverra ipsum pulvinar, molestie arcu. Etiam lacinia venenatis dignissim. Suspendisse non nisl\r\n          semper\r\n          tellus malesuada suscipit eu et eros. Nulla eu enim quis quam elementum vulputate. Mauris ornare\r\n          consequat nunc viverra pellentesque. Aenean semper eu massa sit amet aliquam. Integer et neque sed\r\n          libero mollis elementum at vitae ligula. Vestibulum pharetra sed libero sed porttitor. Suspendisse\r\n          a\r\n          faucibus lectus.</p>\r\n        <p>Duis ut mauris sollicitudin, venenatis nisi sed, luctus ligula. Phasellus blandit nisl ut lorem\r\n          semper\r\n          pharetra. Nullam tortor nibh, suscipit in consequat vel, feugiat sed quam. Nam risus libero,\r\n          auctor\r\n          vel\r\n          tristique ac, malesuada ut ante. Sed molestie, est in eleifend sagittis, leo tortor ullamcorper\r\n          erat,\r\n          at\r\n          vulputate eros sapien nec libero. Mauris dapibus laoreet nibh quis bibendum. Fusce dolor sem,\r\n          suscipit\r\n          in iaculis id, pharetra at urna. Pellentesque tempor congue massa quis faucibus. Vestibulum nunc\r\n          eros,\r\n          convallis blandit dui sit amet, gravida adipiscing libero.</p>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n</template>\r\n\r\n<div class=\"swiper-container ctmobile-ui-demo-done-container\" id=\"swiper-container\">\r\n<div class=\"swiper-wrapper ctmobile-ui-demo-done-wrapper\">\r\n  <!--Page1-->\r\n  <div class=\"swiper-slide ctmobile-ui-demo-done-page\" data-key=\"popup-initial\">\r\n    <div class=\"ctmobile-ui-demo-done-page-content\">\r\n      <a class=\"ctmobile-ui-demo-done-button\" data-donekey=\"popup-initial-config\">配置方式</a>\r\n      <a class=\"ctmobile-ui-demo-done-button\" data-donekey=\"popup-initial-api\">api方式</a>\r\n    </div>\r\n  </div>\r\n\r\n  <!--config-Page-->\r\n  <div class=\"swiper-slide ctmobile-ui-demo-done-page\" data-key=\"popup-initial-config\">\r\n    <div class=\"ctmobile-ui-demo-done-page-header\">\r\n\r\n      <div class=\"ctmobile-ui-demo-done-page-header-title\">配置方式</div>\r\n    </div>\r\n    <div class=\"ctmobile-ui-demo-done-page-content\">\r\n      <a data-popup=\"demo-config-popup1\" class=\"ctmobile-ui-demo-done-button\">Open Popup1</a>\r\n    </div>\r\n  </div>\r\n\r\n  <!--api-Page-->\r\n  <div class=\"swiper-slide ctmobile-ui-demo-done-page\" data-key=\"popup-initial-api\">\r\n    <div class=\"ctmobile-ui-demo-done-page-header\">\r\n\r\n      <div class=\"ctmobile-ui-demo-done-page-header-title\">api方式</div>\r\n    </div>\r\n    <div class=\"ctmobile-ui-demo-done-page-content\">\r\n      <a id=\"openPopup1Btn\" class=\"ctmobile-ui-demo-done-button\">Open Popup1</a>\r\n    </div>\r\n  </div>\r\n\r\n</div>\r\n</div>\r\n\r\n```\r\n\r\n#### js\r\n\r\n```\r\n\r\nimport Popup from '@ctmobile/ui-popup/popup';\r\nimport DemoUtil, { Bone } from '@ctmobile/ui-demo-util';\r\n\r\nimport '@ctmobile/ui-popup/popup.less';\r\nimport 'normalize.less';\r\nimport './index.less';\r\n\r\nDemoUtil.initial();\r\n\r\nnew Bone(document.getElementById('swiper-container'), [\r\n  ['popup-initial'],\r\n  ['popup-initial-config'],\r\n  ['popup-initial-api'],\r\n]);\r\n\r\nPopup.setEl(document.getElementById('ctmobile-ui-doc-demo-device'));\r\n\r\nconst demoApiPopup1 = Popup.create(document.getElementById('demo-api-popup1'), {\r\n  listeners: {\r\n    create: (el) => {\r\n      el.querySelector('.openPopup2Btn').addEventListener('click', () => {\r\n        Popup.show(demoApiPopup2);\r\n      });\r\n\r\n      el.querySelector('.closeBtn').addEventListener('click', () => {\r\n        Popup.closeAll();\r\n      });\r\n    },\r\n  },\r\n});\r\n\r\nconst demoApiPopup2 = Popup.create(document.getElementById('demo-api-popup2'), {\r\n  listeners: {\r\n    create: (el) => {\r\n      el.querySelector('.closeBtn').addEventListener('click', () => {\r\n        Popup.closeAll();\r\n      });\r\n    },\r\n  },\r\n});\r\n\r\ndocument.getElementById('openPopup1Btn').addEventListener('click', () => {\r\n  Popup.show(demoApiPopup1);\r\n});\r\n\r\n```\r\n\r\n## 方法\r\n\r\n<dl>\r\n  <dt>PopupFactory</dt>\r\n  <dd>\r\n    <div>\r\n      <p>create(\r\n        <span>tel</span>,\r\n        <span>config</span>\r\n        ) - 创建一个Popup</p>\r\n      <ul>\r\n        <li>\r\n          <span>tel</span>-<span>HtmlElement</span> template的id\r\n        </li>\r\n        <li>\r\n          <span>config</span>-<span>Object</span>\r\n          <ul>\r\n            <li>\r\n              <span>listeners</span>-<span>object</span> 事件注册对象\r\n            </li>\r\n          </ul>\r\n        </li>\r\n      </ul>\r\n    </div>\r\n\r\n    <div>\r\n      <p>show(<span>popup</span>) - 显示Popup</p>\r\n      <ul>\r\n        <li>\r\n          <span>popup</span>-<span>Popup</span> 通过PopupFactory创建的Popup\r\n        </li>\r\n      </ul>\r\n    </div>\r\n\r\n    <div>\r\n      <p>close(<span>popup</span>) - 关闭Popup</p>\r\n      <ul>\r\n        <li>\r\n          <span>popup</span>-<span>Popup</span> 通过PopupFactory创建的Popup\r\n        </li>\r\n      </ul>\r\n    </div>\r\n\r\n    <div>\r\n      <p>closeAll() - 关闭所有Popup</p>\r\n    </div>\r\n\r\n    <div>\r\n      <p>distory(<span>popup</span>) - 销毁Popup</p>\r\n      <ul>\r\n        <li>\r\n          <span>popup</span>-<span>Popup</span> 通过PopupFactory创建的Popup\r\n        </li>\r\n      </ul>\r\n    </div>\r\n\r\n    <div>\r\n      <p>setEl(<span>tel</span>) - 设置Popup的上下文el</p>\r\n      <ul>\r\n        <li>\r\n          <span>tel</span>-<span>HtmlElement</span>\r\n          上下文el\r\n        </li>\r\n      </ul>\r\n    </div>\r\n\r\n    <div>\r\n      <p>getEl - 获取Popup的上下文el</p>\r\n    </div>\r\n\r\n  </dd>\r\n</dl>\r\n<dl>\r\n  <dt>Popup</dt>\r\n  <dd>\r\n    <div>\r\n      <p>show - 显示Popup</p>\r\n    </div>\r\n\r\n    <div>\r\n      <p>close - 关闭Popup</p>\r\n    </div>\r\n\r\n    <div>\r\n      <p>distory - 销毁Popup</p>\r\n    </div>\r\n\r\n    <div>\r\n      <p>isDistory - Popup是否销毁</p>\r\n    </div>\r\n\r\n    <div>\r\n      <p>getId - 获取Popup的id</p>\r\n    </div>\r\n\r\n    <div>\r\n      <p>on(\r\n        <span>type</span>,\r\n        <span>handler</span>,\r\n        ) - 注册事件</p>\r\n      <ul>\r\n        <li>\r\n          <span>type</span>-<span>string</span>\r\n          事件类型\r\n        </li>\r\n        <li>\r\n          <span>handler</span>-<span>Function</span>\r\n          事件句柄\r\n        </li>\r\n      </ul>\r\n    </div>\r\n\r\n    <div>\r\n      <p>off(\r\n        <span>type</span>,\r\n        <span>handler</span>,\r\n        ) - 删除指定type下的时间或清除所有事件</p>\r\n      <ul>\r\n        <li>\r\n          <span>type</span>-<span>string</span>\r\n          事件类型\r\n        </li>\r\n        <li>\r\n          <span>handler</span>-<span>Function</span>\r\n          事件句柄\r\n        </li>\r\n      </ul>\r\n    </div>\r\n  </dd>\r\n</dl>\r\n\r\n## 事件\r\n\r\n|  名称 |  说明 |\r\n| --- | --- |\r\n| create | Popup创建放入Dom后 |\r\n| beforeshow | popup显示之前 |\r\n| aftershow | popup显示之后 |\r\n| beforeclose | popup关闭之前 |\r\n| afterclose | popup关闭之后 |\r\n| distory | popup销毁 |\r\n| ct-popup-event-create | Popup创建放入Dom后 |\r\n| ct-popup-event-beforeshow | popup显示之前 |\r\n| ct-popup-event-aftershow | popup显示之后 |\r\n| ct-popup-event-beforeclose | popup关闭之前 |\r\n| ct-popup-event-afterclose | popup关闭之后 |\r\n| ct-popup-event-distory | popup销毁 |\r\n\r\n```\r\n\r\nimport Popup from '@ctmobile/ui-popup/popup';\r\nimport '@ctmobile/ui-popup/popup.less';\r\n\r\nlet popup1 = Popup.create(\r\n  document.getElementById('popup1'),\r\n  {\r\n    listeners: {\r\n      create: (el) => {\r\n        el.querySelector('.openPopup2').addEventListener('click', () => {\r\n          Popup.close(popup2);\r\n        });\r\n\r\n        el.querySelector('.closePopup').addEventListener('click', () => {\r\n          Popup.close(popup1);\r\n        });\r\n      }\r\n    }\r\n  }\r\n});\r\n\r\npopup1.on('beforeshow', (el) => {\r\n  console.log(el);\r\n});\r\n\r\npopup1.on('aftershow', (el) => {\r\n  console.log(el);\r\n});\r\n\r\npopup1.on('beforeclose', (el) => {\r\n  console.log(el);\r\n});\r\n\r\npopup1.on('afterclose', (el) => {\r\n  console.log(el);\r\n});\r\n\r\npopup1.on('distory', (el) => {\r\n  console.log(el);\r\n});\r\n\r\ndocument.body.addEventListener('ct-popup-event-create', (el) => {\r\n  console.log(el);\r\n});\r\n\r\ndocument.body.addEventListener('ct-popup-event-beforeshow', (el) => {\r\n  console.log(el);\r\n});\r\n\r\ndocument.body.addEventListener('ct-popup-event-aftershow', (el) => {\r\n  console.log(el);\r\n});\r\n\r\ndocument.body.addEventListener('ct-popup-event-beforeclose', (el) => {\r\n  console.log(el);\r\n});\r\n\r\ndocument.body.addEventListener('ct-popup-event-afterclose', (el) => {\r\n  console.log(el);\r\n});\r\n\r\ndocument.body.addEventListener('ct-popup-event-distory', (el) => {\r\n  console.log(el);\r\n});\r\n\r\n```\r\n","readmeFilename":"README.md"}