手机端js弹层用于显示用户须知 php | html | css | linux | phpstudy | 微信开发

手机端js弹层用于显示用户须知 overflow:auto 内容自动滚动

*{padding:0px;margin:0px;}

    .pop { display: none; width: 85%; min-height: 470px; max-height: 750px; height:470px; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; padding: 25px; z-index: 10000; border-radius: 8px; background-color: #fff; box-shadow: 0 3px 18px rgba(100, 0, 0, .5); }

    .pop-top{ height:40px; width:100%; border-bottom: 1px #E5E5E5 solid; }

    .pop-top h2{ float: left; display:black}

    .pop-top span{ float: right; cursor: pointer; font-weight: bold; display:black; margin-top: -26px;}

    .pop-cancel, .pop-ok { padding:8px 15px; margin:15px 5px; border: none; border-radius: 5px; background-color: #337AB7; color: #fff; cursor:pointer; }

    .pop-cancel { background-color: #FFF; border:1px #CECECE solid; color: #000; }

    .pop-content{ height: 380px; }

    .pop-content-left{ float: left; }

    .pop-content-right{ width: 100%; float: left; padding-top:10px;   font-size: 16px; line-height:35px; overflow: auto;

    height: 380px; }

    .bgPop{ display: none; position: absolute; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,.2); }

</head>

<body>

<div class=”bgPop”></div>

<div class=”pop”>

    <div class=”pop-top”>

        <h3>用户协议</h3>

        <span class=”pop-close”>Ｘ</span>

    </div>

    <div class=”pop-content”>

        <div class=”pop-content-left”>

            <img src=”” alt=”” class=”teathumb”>

        </div>

        <div class=”pop-content-right”>

          {$xy}

        </div>

    </div>

</div>

<script>

    $(document).ready(function () {

        $(‘.pop-close’).click(function () {

            $(‘.bgPop,.pop’).hide();

        });

        $(‘.click_pop’).click(function () {

            $(‘.bgPop,.pop’).show();

        });

    })

</script>