當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

手机网页里的模态对话框

發(fā)布時(shí)間：2023/12/10 编程问答 25 豆豆

生活随笔收集整理的這篇文章主要介紹了手机网页里的模态对话框小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

今日幫朋友寫了一個(gè)手機(jī)網(wǎng)頁里用的模態(tài)對(duì)話框，防止自己日后忘記，所以mark一下。原理很簡(jiǎn)單，當(dāng)彈出了模態(tài)對(duì)話框的時(shí)候，就是touchmove事件進(jìn)行監(jiān)聽，如果是對(duì)話框的touchmove事件，就允許拖動(dòng)，其他的就不允許。

<!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 p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p </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 Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description </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)框時(shí)就不允許滑動(dòng)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é)

以上是生活随笔為你收集整理的手机网页里的模态对话框的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。