css 手写 actionSheet（底部弹窗）css 手写 actionSheet（底部弹窗），框架提供的action

框架提供的actionSheet在华为手机不能使用，手写记录
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .modal {
        display: none; 
        position: fixed; 
        z-index: 1; 
        left: 0;
        top: 0;
        width: 100%; 
        height: 100%; 
        overflow: auto; 
        background-color: rgb(0,0,0); 
        background-color: rgba(0,0,0,0.4); 
        -webkit-animation-name: fadeIn; 
        -webkit-animation-duration: 0.4s;
        animation-name: fadeIn;
        animation-duration: 0.4s
    }
    
    .modal-content {
        position: fixed;
        bottom: 0;
        width: 90%;
        -webkit-animation-name: slideIn;
        -webkit-animation-duration: 0.4s;
        animation-name: slideIn;
        animation-duration: 0.4s;
        left: 50%;
        transform: translateX(-50%);
        color: #0075ff
    }
    
    .modal-body {
        padding: 2px 16px;
        border-radius: 10px;
        background: #ccc;
    }
    
    .modal-item {
        text-align: center;
        padding: 10px 0;
    }

    .modal-footer {
        margin: 10px 0;
        padding: 10px 0;
        text-align: center;
        border-radius: 10px;
        background: #ccc;
    }
    
    @-webkit-keyframes slideIn {
        from {bottom: -300px; opacity: 0} 
        to {bottom: 0; opacity: 1}
    }
    
    @keyframes slideIn {
        from {bottom: -300px; opacity: 0}
        to {bottom: 0; opacity: 1}
    }
    
    @-webkit-keyframes fadeIn {
        from {opacity: 0} 
        to {opacity: 1}
    }
    
    @keyframes fadeIn {
        from {opacity: 0} 
        to {opacity: 1}
    }
</style>
<body>
    <button id="myBtn">点击</button>
    <div id="myModal" class="modal">
        <div class="modal-content">
            <div class="modal-body">
                <div class="modal-item">1</div>
                <div class="modal-item">2</div>
            </div>
            <div class="modal-footer">
                取消
            </div>
        </div>
    </div>
    <script>
        var modal = document.getElementById('myModal');
        var btn = document.getElementById("myBtn"); 
        var span = document.getElementsByClassName("close")[0];
        
        btn.onclick = function() {
            modal.style.display = "block";
        }
        
        span.onclick = function() {
            modal.style.display = "none";
        }
        
        window.onclick = function(event) {
            if (event.target == modal) {
                modal.style.display = "none";
            }
        }
    </script>
</body>
</html>