/* 弹窗 */
    .modal {
        display: none; /* 默认隐藏 */
        position: fixed;
        margin: 0 auto;
        bottom: 0;
        z-index: 999;
        left: 0;
        top: 0;
        width: 100%;
        height: 108%;
        overflow: auto;
        border-radius: 10px;
        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: 0px;
       /* margin: 0 auto;*/
        background-color: #fefefe;
        width: 100%;
        z-index: 999;
        border-radius: 10px;
        -webkit-animation-name: slideIn;
        -webkit-animation-duration: 0.4s;
        animation-name: slideIn;
        animation-duration: 0.4s
    }

    /* 关闭按钮 */
    .close {
        /*color: white;*/        
        font-size: 16px;
        font-weight: bold;
    }

    .close:hover,
    .close:focus {
        color: #000;
        text-decoration: none;
        cursor: pointer;
    }

    .modal-header {
        padding: 2px 16px;
        background-color: #5cb85c;
        color: white;
    }

   .modal-body {padding: 2px 16px;}

    .modal-footer {
        padding: 2px 16px;
        background-color: #5cb85c;
        color: white;
    }

    /* 添加动画 */
    @-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}
    }