demo:http://7li.github.io/components/modal/
Repo:https://github.com/7li/swipe
/*********************************************************************** Modal Component @author < 702368372atqqcom> Lyz @options-title {string} Modal title Html-content {string} Modal content html -Close {Function} Callback when modal is Closed-scroll {Boolean} Can document scroll @usage modal ({Tit Le: ' <span>foo</span> ', content: ' <div>bar</div> ', close:function () {Console.lo G (' Modal closed. '); }, Scoll:false}) @version 0.0.1 ***********************************************************************/defin E (function () {function modal (options) {var defaults = {title: ' Hint ', content: ' Hello sg-modal ', close: NULL, scroll:true}; Costomer Options options = options? Options: {}; Options.title = Options.title = = = undefined? Defaults.title:options.title; Options.content = Options.content = = = undefined? Defaults.content:options.content; Options.close = Options.close = = = undefined? Defaults.close:options.close; Options.scroll = Options.scroll = = = undefined? Defaults.scroll:options.scroll; Display modal var maskcreated = Document.queryselector ('. Sg-modal-mask '); Maskcreated? Fillmodal (): Createmodal (); var modal = Document.queryselector ('. Sg-modal '); var dialog = Document.queryselector ('. Sg-modal-dialog '); var closebtn = Document.queryselector ('. Sg-modal-close '); Modal.style.display = ' block '; Center the dialog var clientheight = document.documentElement.clientHeight; var clientwidth = document.documentElement.clientWidth; var dialogheight = dialog.offsetheight; var dialogwidth = dialog.offsetwidth; Dialog.style.top = (clientheight-dialogheight)/2 + ' px '; Dialog.style.left = (clientwidth-dialogwidth)/2 + ' px '; Bind modal Close Closebtn.addeventlistener (' click ', Closehandler); Prevent Document Scroll if (!options.scroll) {docUment.addeventlistener (' Touchmove ', preventdefault); Document.addeventlistener (' MouseWheel ', preventdefault); } function Closehandler () {modal.style.display = ' none '; Closebtn.removeeventlistener (' click ', Closehandler); if (options.close) {options.close (); Options.close = null; } if (!options.scroll) {document.removeeventlistener (' touchmove ', preventdefault); Document.removeeventlistener (' MouseWheel ', preventdefault); }} function Createmodal () {var str, tmp; str = ' <div class= ' Sg-modal "style=" Display:none;position:fixed;left:0;top:0;width:100%;height:100%;z-index : 999999 ">"; str + = ' <div class= "Sg-modal-mask" style= "Position:fixed;width:100%;height:100%;background: #000; opacity:0.3;" ></div> '; str + = ' <div class= "Sg-modal-dialog" style= "Position:absolute;backgound: #fff;" > '; str + = ' <div class= "Sg-modal-close" style= "Display:block;position:absolute;righT:0;top:0;font-size:28px;color: #999; " >x</div> '; str + = '
Cell phone Popup module (native JS)