html 超链接 模态对话框,自定义html结构的模态对话框

用popover改造实现：

样式部分：

.mui-popover{

display: none;

position: fixed;

width: 80%;

height: auto;

border-radius: 0;

left: 50%;

top: 50%;

margin: 0 auto;

z-index: 9999;

background-color: #fff;

-webkit-transform: translateX(-50%) translateY(-50%);

-moz-transform: translateX(-50%) translateY(-50%);

-ms-transform: translateX(-50%) translateY(-50%);

transform: translateX(-50%) translateY(-50%);

}

.mui-popover-arrow{

display: none;

}

逻辑封装：

/**

* 自定义弹出层

* @param {Object} opt

*/

var popover = function(opt) {

var el;

if(typeof opt === 'object'){

el = document.querySelector(opt.el);

if(opt.style) {

el.setAttribute('style', opt.style);

}

}else{

el = document.querySelector(opt);

}

var mask = mui.createMask(function() {

el.classList.remove('mui-active');

});

this.open = function() {

mask.show();

el.classList.add('mui-active');

}

this.close = function() {

mask.close();

el.classList.remove('mui-active');

}

}

调用：

• Item1
• Item2
• Item3
• Item4
• Item5

打开弹出菜单

var pop = new popover('#pop');

document.querySelector('#openPopover').addEventListener('tap',function () {

pop.open();

})

mui('.mui-table-view').on('tap','li a',function(){

mui.toast(this.innerHTML);

pop.close();

})

预览地址：demo