今日帮朋友写了一个手机网页里用的模态对话框，防止自己日后忘记，所以mark一下。原理很简单，当弹出了模态对话框的时候，就是touchmove事件进行监听，如果是对话框的touchmove事件，就允许拖动，其他的就不允许。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"/> <title>Title</title> <script src="jquery.js"></script> </head> <body> <div onclick="showModal()" class="modal-invoker">Click Me! Show Modal!</div> <div onclick="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 onclick="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" onclick="cancelModal()">Cancel</div> <div class="modal-ok-btn" onclick="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; 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; 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; 100px; } .modal-ok-btn{ float: left; 100px; } .text-center{ text-align: center; } .modal-invoker{ height: 200px; background-color: red; } .modal-tester{ height: 200px; background-color: blue; } </style> </body> </html>