手机网页里的模态对话框
生活随笔
收集整理的這篇文章主要介紹了
手机网页里的模态对话框
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
今日幫朋友寫了一個手機網(wǎng)頁里用的模態(tài)對話框，防止自己日后忘記，所以mark一下。原理很簡單，當(dāng)彈出了模態(tài)對話框的時候，就是touchmove事件進行監(jiān)聽，如果是對話框的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; //當(dāng)彈出模態(tài)框時就不允許滑動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>?
轉(zhuǎn)載于:https://www.cnblogs.com/longcloud/p/5065673.html
總結(jié)
以上是生活随笔為你收集整理的手机网页里的模态对话框的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 一款安全性测试工具Appscan
- 下一篇： MSN消息提示类(II)