Demo：
Repo:https://github.com/7LI/swipe
/*********************************************************************** Modal component @author <702368372atqqcom> lyz @option- title {String} Modal title html- content {String} Modal content html- close {Function} Callback when modal is closed- scroll {Boolean} Can document scroll @usagemodal({title: '<span>foo</span>',content: '<div>bar</div>',close: function() {console.log('Modal closed.');},scoll: false})@version 0.0.1 ***********************************************************************/define(function() { function modal(options){var defaults = {title: '提示',content: 'Hello sg-modal',close: null,scroll: true};// Costomer optionsoptions = 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 modalvar 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 dialogvar 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 closecloseBtn.addEventListener('click', closeHandler);// Prevent document scrollif (!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;">×</div>';str += ' <h1 class="sg-modal-title" style="height:40px;line-height:40px;padding-left:10px;background:#fff;min-width:50px">' + options.title + '</h1>';str += ' <div class="sg-modal-content" style="background:#fff;">' + options.content + '</div>';str += '</div>'str += '</div>';tmp = document.createElement('div');tmp.innerHTML = str;document.body.appendChild(tmp.firstElementChild);}function fillModal() {var title = document.querySelector('.sg-modal-title');var content = document.querySelector('.sg-modal-content');title.innerHTML = options.title;content.innerHTML = options.content;}function preventDefault(e) {e.preventDefault()} } modal.close = function() {var closeBtn = document.querySelector('.sg-modal-close');closeBtn && closeBtn.click(); } return modal;})本文出自：
，没有天生的信心，只有不断培养的信心。
