第一步:给body加上个css类别样式
body.modal-open {
position: fixed;
width: 100%;
}
第二步:创建核心函数:
/**
* ModalHelper helpers resolve the modal scrolling issue on mobile devices
* https://github.com/twbs/bootstrap/issues/15852
* requires document.scrollingElement polyfill https://github.com/yangg/scrolling-element
*/
var ModalHelper = (function(bodyCls) {
var scrollTop;
return {
//打开弹窗
afterOpen: function() {
scrollTop = document.scrollingElement.scrollTop;
document.body.classList.add(bodyCls);
document.body.style.top = -scrollTop + 'px';
},
//关闭弹窗
beforeClose: function() {
document.body.classList.remove(bodyCls);
// scrollTop lost after set position:fixed, restore it back.
document.body.style.top = 0;
document.scrollingElement.scrollTop = scrollTop;
}
};
})('modal-open');
第三步:打开/关闭弹窗,引用核心函数
function openModal() {
ModalHelper.afterOpen();
$('.Modal').addClass('active');
}
function closeModal() {
ModalHelper.beforeClose();
$('.Modal').removeClass('active');
}
第四步:在事件里调用方法
$(".target").toggle(function(e){
e.preventDefault();
openModal();
},function(e){
e.preventDefault();
closeModal();
})
本人菜鸟一个,在大神代码的基础上进行了优化,请各路神仙多多指教,谢谢~~