當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

手机网页里的模态对话框

發布時間：2023/12/10 编程问答 27 豆豆

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

今日幫朋友寫了一個手機網頁里用的模態對話框，防止自己日后忘記，所以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 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; //當彈出模態框時就不允許滑動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>

轉載于:https://www.cnblogs.com/longcloud/p/5065673.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。