手机网页里的模态对话框

今日帮朋友写了一个手机网页里用的模态对话框，防止自己日后忘记，所以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;
        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>

 

posted @ 2015-12-22 09:52  龙之云  阅读(396)  评论(0)  编辑  收藏  举报