zoukankan      html  css  js  c++  java
  • 一、移动端弹框滚动条出现两条

    一、移动端弹框滚动条问题  html格式化

    移动端

    代码如下:

    <!DOCTYPE html>
    <html>
    
    <head>
        <title></title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover">
        <style type="text/css">
    
        </style>
    </head>
    
    <body>
        <button class="click" style=" 200px;height: 200px;background-color: red;"></button>
        <section>
            <p>111111111111</p>
            <p>111111111111</p>
            <p>111111111111</p>
            <p>111111111111</p>
            <p>111111111111</p>
            <p>111111111111</p>
            <p>111111111111</p>
            <p>111111111111</p>
            <p>111111111111</p>
            <p>111111111111</p>
            <p>111111111111</p>
            <p>111111111111</p>
            <p>111111111111</p>
            <p>111111111111</p>
            <p>111111111111</p>
            <p>111111111111</p>
            <p>111111111111</p>
            <p>111111111111</p>
            <p>111111111111</p>
            <p>111111111111</p>
            <p>111111111111</p>
            <p>111111111111</p>
            <p>111111111111</p>
            <p>111111111111</p>
            <p>111111111111</p>
            <p>111111111111</p>
            <p>111111111111</p>
            <p>111111111111</p>
            <p>111111111111</p>
            <p>111111111111</p>
            <p>111111111111</p>
            <p>111111111111</p>
            <p>111111111111</p>
            <p>111111111111</p>
            <p>111111111111</p>
            <p>111111111111</p>
            <p>111111111111</p>
        </section>
        <section class="layer_notice" style="display: none;">
            <p>222222222222</p>
            <p>222222222222</p>
            <p>222222222222</p>
            <p>222222222222</p>
            <p>222222222222</p>
            <p>222222222222</p>
            <p>222222222222</p>
            <p>222222222222</p>
            <p>222222222222</p>
            <p>222222222222</p>
            <p>222222222222</p>
            <p>222222222222</p>
            <p>222222222222</p>
            <p>222222222222</p>
            <p>222222222222</p>
            <p>222222222222</p>
            <p>222222222222</p>
            <p>222222222222</p>
            <p>222222222222</p>
            <p>222222222222</p>
            <p>222222222222</p>
            <p>222222222222</p>
            <p>222222222222</p>
            <p>222222222222</p>
            <p>222222222222</p>
            <p>222222222222</p>
            <p>222222222222</p>
            <p>222222222222</p>
            <p>222222222222</p>
            <p>222222222222</p>
            <p>222222222222</p>
            <p>222222222222</p>
            <p>222222222222</p>
            <p>222222222222</p>
            <p>222222222222</p>
            <p>222222222222</p>
            <p>222222222222</p>
            <p>222222222222</p>
            <p>222222222222</p>
            <p>222222222222</p>
            <p>222222222222</p>
            <p>222222222222</p>
            <p>222222222222</p>
            <p>222222222222</p>
            <p>222222222222</p>
            <p>222222222222</p>
            <p>222222222222</p>
        </section>
        <script src="https://cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>
        <script src="https://www.layuicdn.com/layui/layui.js"></script>
        <script type="text/javascript">
        $(document).ready(function() {
            layui.use(['layer'], function() {
                var layer = layui.layer //日期
                $(".click").click(function() {
                    //捕获页
                    layer.open({
                        type: 1,
                        shade: false,
                        fixed: true,
                        scrollbar: false, //屏蔽浏览器滚动条
                        area: ['100%', '100%'],
                        title: "测试", //不显示标题
                        content: $('.layer_notice'), //捕获的元素,注意:最好该指定的元素要存放在body最外层,否则可能被其它的相对元素所影响
                        cancel: function() {
                            //layer.msg('捕获就是从页面已经存在的元素上,包裹layer的结构', {time: 5000, icon:6});
                        },
                        success: function() {}
                    });
                });
            });
        });
        </script>
    </body>
    
    </html>
  • 相关阅读:
    C#使用Xamarin开发可移植移动应用(5.进阶篇显示弹出窗口与通讯中心)附源码
    C#使用Xamarin开发可移植移动应用(4.进阶篇MVVM双向绑定和命令绑定)附源码
    C#使用Xamarin开发可移植移动应用(3.Xamarin.Views控件)附源码
    C#使用Xamarin开发可移植移动应用(2.Xamarin.Forms布局,本篇很长,注意)附源码
    C#使用Xamarin开发可移植移动应用(1.入门与Xamarin.Forms页面),附源码
    ASP.NET Core之跨平台的实时性能监控(2.健康检查)
    Android Studio 快捷键:重载与重写、try catch代码块、导包 快捷键
    新版本jQuery对动态添加元素绑定点击事件实例
    ssm框架中,mybatis的sql语句日志输出
    maven环境下的ssm框架上传excel 案例
  • 原文地址:https://www.cnblogs.com/fger/p/12611008.html
Copyright © 2011-2022 走看看