H5上的ActionForm

朝友char發表於2019-04-03
H5ORM

方式一:遮罩層和ActionForm分開

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    .mask{
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        opacity: 0;
        visibility: hidden;
        -webkit-transition-duration: 0.3s;
        transition-duration: 0.3s;
        background: rgba(0,0,0,0.6);
        transition-duration: 0.3s;
        z-index: 9999;
    }

    .mask-visible{
        opacity: 1;
        visibility: visible;
    }

    .action-form{
        position: fixed;
        left: 0;
        bottom: 0;
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        z-index: 10000;
        width: 100%;
        background-color: #efeff4;
        -webkit-transition: -webkit-transform 0.3s;
        transition: -webkit-transform 0.3s;
        transition: transform 0.3s;
        transition: transform 0.3s,-webkit-transform 0.3s;
    }

    .action-form-visible{
        -webkit-transform: translate(0);
        transform: translate(0);
    }
</style>
<body>
    <div>
        <input type="text"></input><button>我是按鈕</button><br>
        <input type="text"></input><button>我是按鈕</button><br>
        <input type="text"></input><button>我是按鈕</button><br>
        <input type="text"></input><button>我是按鈕</button><br>
        <input type="text"></input><button>我是按鈕</button><br>
        <input type="text"></input><button>我是按鈕</button><br>
        <input type="text"></input><button>我是按鈕</button><br>
        <input type="text"></input><button>我是按鈕</button><br>
        <input type="text"></input><button>我是按鈕</button><br>
        <input type="text"></input><button>我是按鈕</button><br>
        <input type="text"></input><button>我是按鈕</button><br>
        <input type="text"></input><button>我是按鈕</button><br>
    </div>
    <div>
        <div class="mask mask-visible"></div>
        <div class="action-form action-form-visible">
            <input type="text"></input><button>我是按鈕</button><br>
            <input type="text"></input><button>我是按鈕</button><br>
            <input type="text"></input><button>我是按鈕</button><br>
            <input type="text"></input><button>我是按鈕</button><br>
            <input type="text"></input><button>我是按鈕</button><br>
            <input type="text"></input><button>我是按鈕</button><br>
        </div>
    </div>
</body>
</html>
複製程式碼

方式二：ActionForm嵌入到遮罩層裡面

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    .action-form-mask{
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        opacity: 0;
        visibility: hidden;
        background: rgba(0,0,0,0.6);
        -webkit-transition-duration: 0.3s;
        transition-duration: 0.3s;
        transition-duration: 0.3s;
        z-index: 9999;
    }

    .action-form-mask-visible{
        opacity: 1;
        visibility: visible;
    }

    .action-form{
        position: fixed;
        left: 0;
        bottom: 0;
        z-index: 10000;
        width: 100%;
        background-color: #efeff4;
    }
</style>
<body>
    <div>
        <input type="text"></input><button>我是按鈕</button><br>
        <input type="text"></input><button>我是按鈕</button><br>
        <input type="text"></input><button>我是按鈕</button><br>
        <input type="text"></input><button>我是按鈕</button><br>
        <input type="text"></input><button>我是按鈕</button><br>
        <input type="text"></input><button>我是按鈕</button><br>
        <input type="text"></input><button>我是按鈕</button><br>
        <input type="text"></input><button>我是按鈕</button><br>
        <input type="text"></input><button>我是按鈕</button><br>
        <input type="text"></input><button>我是按鈕</button><br>
        <input type="text"></input><button>我是按鈕</button><br>
        <input type="text"></input><button>我是按鈕</button><br>
    </div>
    <div class="action-form-mask action-form-mask-visible">
        <div class="action-form">
            <input type="text"></input><button>我是按鈕</button><br>
            <input type="text"></input><button>我是按鈕</button><br>
            <input type="text"></input><button>我是按鈕</button><br>
            <input type="text"></input><button>我是按鈕</button><br>
            <input type="text"></input><button>我是按鈕</button><br>
            <input type="text"></input><button>我是按鈕</button><br>
        </div>
    </div>
</body>
</html>
複製程式碼

相關文章