今日帮朋友写了一个手机网页里用的模态对话框，防止自己日后忘记，所以mark一下。原理很简单，当弹出了模态对话框的时候，就是touchmove事件进行监听，如果是对话框的touchmove事件，就允许拖动，其他的就不允许。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"/><title>Title</title><script src="jquery.js"></script> </head> <body> <div οnclick="showModal()" class="modal-invoker">Click Me! Show Modal!</div> <div οnclick="noResponse()" class="modal-tester">Click Me! No Response</div><div>p<br/>p<br/>p<br/>p<br/>p<br/>p<br/>p<br/>p<br/>p<br/>p<br/>p<br/>p<br/>p<br/>p<br/>p<br/>p<br/>p<br/>p<br/>p<br/>p<br/>p<br/>p<br/>p<br/>p<br/>p<br/>p<br/>p<br/>p<br/>p<br/>p<br/>p<br/>p<br/>p<br/>p<br/>p<br/>p<br/>p<br/>p<br/>p<br/>p<br/>p<br/>p<br/>p<br/>p<br/>p<br/>p<br/>p<br/>p<br/>p<br/>p<br/>p<br/>p<br/>p<br/>p<br/>p<br/>p<br/>p<br/>p<br/>p<br/>p<br/>p<br/>p<br/>p<br/>p<br/>p<br/>p<br/>p<br/>p<br/>p<br/>p<br/>p<br/>p<br/>p<br/>p<br/>p<br/>p<br/>p<br/>p<br/>p<br/>p<br/>p<br/>p<br/>p<br/>p<br/>p<br/>p<br/>p<br/>p<br/>p<br/>p<br/>p<br/>p<br/>p<br/>p<br/>p<br/>p<br/>p<br/>p<br/>p<br/>p<br/>p<br/>p<br/>p<br/>p<br/>p<br/> </div><div οnclick="clickBackground()" class="modal-background"> </div><div class="modal-container text-center"><div class="modal-title">Title</div><div class="modal-content scrollable">Description<br/>Description<br/>Description<br/>Description<br/>Description<br/>Description<br/>Description<br/>Description<br/>Description<br/>Description<br/>Description<br/>Description<br/>Description<br/>Description<br/>Description<br/>Description<br/>Description<br/>Description<br/>Description<br/>Description<br/>Description<br/>Description<br/>Description<br/>Description<br/>Description<br/>Description<br/>Description<br/>Description<br/></div><div class="modal-footer"><div class="modal-cancel-btn" οnclick="cancelModal()">Cancel</div><div class="modal-ok-btn" οnclick="okModal()">OK</div></div> </div><script>var isPreventView = false; //当弹出模态框时就不允许滑动var selScrollable ='.scrollable';$('body').on('touchmove', function(e) {if(!$(e.target).hasClass("scrollable")){if(isPreventView){e.preventDefault();}} else {if (e.target.scrollTop === 0) {e.target.scrollTop = 1;} else if (e.target.scrollHeight === e.target.scrollTop + e.target.offsetHeight) {e.target.scrollTop -= 1;} }});function clickBackground(){return;}function showModal(){$('.modal-background').css('visibility', 'visible');$('.modal-container').css('visibility', 'visible');$('body').css('overflow', 'hidden');isPreventView= true;}function hideModal(){$('.modal-background').css('visibility', 'hidden');$('.modal-container').css('visibility', 'hidden');$('body').css('overflow', 'auto');isPreventView = false;}function noResponse(){alert('Before Modal dialog show, there is a response');}function cancelModal(){alert('Cancel the modal');hideModal();}function okModal(){alert('OK the modal');hideModal();}</script><style>.modal-background{position: absolute;width: 100%;height: 100%;top: 0;left: 0;bottom: 0;right: 0;background-color: rgba(0, 0, 255, 0.5);color: rgb(0, 0, 0);visibility: hidden;}.modal-container{position: absolute;height: 200px;width: 200px;;left: Calc(50% - 100px);top: Calc(50% - 100px);background-color: #6b6a6a;visibility: hidden;}.modal-title{height: 30px;}.modal-content{height: 130px;overflow-y: scroll;}.scrollable{}.modal-footer{height: 40px;}.modal-cancel-btn{float: left;width: 100px;}.modal-ok-btn{float: left;width: 100px;}.text-center{text-align: center;}.modal-invoker{height: 200px;background-color: red;}.modal-tester{height: 200px;background-color: blue;} </style> </body> </html>
![python做excel表格代码_[宜配屋]听图阁](http://pic.xiahunao.cn/python做excel表格代码_[宜配屋]听图阁)
)
