layer mobile手机端移动端弹出层弹出框多种效果代码-html代码-BFW代码库

代码语言：html

所属分类：弹出层

代码描述：layer mobile手机端移动端弹出层弹出框多种效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>


<html>

<head>
    <meta charset="utf-8">
    <title>layer弹层组件移动版</title>
    <meta name="description" content="">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <style>
        html,body,h1,h2,h3,h4,h5,p,div,ul,ol,li,pre,code,button{margin:0; padding:0;}
        html, body{overflow-x:hidden;}
        img{border:0}
        body{ font-family: 'seanfont', "microsoft yahei"; font-size: 14px; line-height:22px; color:#333;}
        h1{font-size:30px;}
        ol{margin-left:20px;}
        code{ margin: 0 2px; padding: 0 5px; white-space: nowrap; border: 1px solid #eaeaea; background-color: #f8f8f8; border-radius: 3px; font-size:14px;}
        pre{white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word;}
        h2{font-size:20px; margin:15px 0 10px; font-weight:400;}
        a{text-decoration: none; color:#0099cc}
        
        html{background-color:#F3F3F3;}
        .main{position:relative; max-width:640px; margin:0 auto; padding:0 10px; }
        header{background-color:#0099CC; margin-bottom:20px; color:#fff;}
        header .main{height:120px;}
        .main p{padding-bottom:5px;}
        .main strong{font-weight:400;}
        header h1{position:absolute; top:30px; left:20px;}
        header h1 code{position:relative; top:-15px; margin-left: 8px; background:none;}
        header nav{ position:absolute; bottom:15px; right:0; padding:0 10px;}
        header nav a{display:inline-block; vertical-align:top; margin:0 10px; height:30px; line-height:30px; border:1px solid #AAEAFF; border-radius:3px; padding:0 20px; color:#fff;}
        header nav a:hover{border:1px solid #fff;}
        
        .demo{margin:10px 0;}
        .demo a, .button{display:inline-block; vertical-align:top; margin:0 5px 10px 0; height:36px; line-height:36px; border-radius:3px; padding:0 30px; background-color:#FF4351; color:#fff; border:none;}
        .demo a:active, .button:active{background-color:#FEAE1B;}
        pre{padding:15px 15px 5px; margin-bottom:10px; font-size:12px; border:1px solid #ddd; border-left-width: 6px; border-radius:4px; background-color:#f2f2f2; font-family: Courier New; overflow:auto;}
        
        .api div{margin-bottom:15px;}
        .api strong{color: #4FB2E2}
    </style>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/layer.mobile.js"></script>
</head>

<body>
    <header>
        <div class="main">
            <h1>Layer For Mobile<code><script>document.write(layer.v)</script></code></h1>
            <nav>
                <a href="">文档</a>
                <a href="">下载</a>
                <a href="">PC版</a>
            </nav>
        </div>
    </header>

    <section class="main">
        <p>layer mobile是为移动设备（手机、平板等webkit内核浏览器/webview）量身定做的弹层UI。由于是采用原生 JavaScript编写，所有并不依赖任何第三方库。layer mobile完全独立于PC版的layer，您需要按照场景选择使用。layer mobile正致力于成为您WebApp开发过程中弹出交互的不二选择。<a href="https://github.com/sentsin/layer/tree/2.x/src/mobile" target="_blank">GitHub</a></p>
        <p style="margin-top: 10px;">为了精确体验，您可通过Chrome设备模式浏览。或通过<a href="javascript:;" id="erweima">手机扫二维码进入</a></p>



        <h2>小试牛刀</h2>

        <p class="demo" id="trys" style="margin-top: 20px;">
            <a href="javascript:;">信息框</a>
            <a href="javascript:;">提示</a>
            <a href="javascript:;">询问框</a>
            <a href="javascript:;">底部对话框</a>
            <a href="javascript:;">底部提示</a>
            <a href="javascript:;">自定义标题风格</a>
            <a href="javascript:;">页面层</a>
            <a href="javascript:;">loading层</a>
            <a href="javascript:;">loading带文字</a>
        </p>

        <!-- mobile -->
        <div style="margin-top: 10px;">
            <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6111334333458862" data-ad-slot="3685421435" data-ad-format="auto"></ins>
        </div>



    </section>

    <section class="main">
        <pre id="trycode" style="margin-top:10px; height:300px; overflow: auto;">
  /** 以下是小试牛刀的调用代码（此处不展示事件绑定）*/

  //信息框
  layer.open({
    content: '移动版和PC版不能同时存在同一页面'
    ,btn: '我知道了'
  });
  
  //提示
  layer.open({
    content: 'hello layer'
    ,skin: 'msg'
    ,time: 2 //2秒后自动关闭
  });
  
  //询问框
  layer.open({
    content: '您确定要刷新一下本页面吗？'
    ,btn: ['刷新', '不要']
    ,yes: function(index){
      location.reload();
      layer.close(index);
    }
  });
  
  //底部对话框
  layer.open({
    content: '这是一个底部弹出的询问提示'
    ,btn: ['删除', '取消']
    ,skin: 'footer'
    ,yes: function(index){
      layer.open({content: '执行删除操作'})
    }
  });
  
  //底部提示
  layer.open({
    content: '一个没有任何按钮的底部提示'
    ,skin: 'footer'
  });
  
  //自定义标题风格
  layer.open({
    title: [
      '我是标题',
      'background-color: #FF4351; color:#fff;'
    ]
    ,content: '标题风格任你定义。'
  });
  
  //页面层
  layer.open({
    type: 1
    ,content: '可传入任何内容，支持html。一般用于手机页面中'
    ,anim: 'up'
    ,style: 'position:fixed; bottom:0; left:0; width: 100%; height: 200px; padding:10px 0; border:none;'
  });
  
  //loading层
  layer.open({type: 2});
  
  //loading带文字
  layer.open({
    type: 2
    ,content: '加载中'
  });
</pre>



        <h2 style="padding:10px 0 5px;">功能说明</h2>

        <p><strong>一个在底部弹出的完整对话框：</strong></p>
        <pre>
<span id="demo2a">layer.open({
  title: [
    '我是标题',
    'background-color:#8DCE16; color:#f.........完整代码请登录后点击上方下载按钮下载查看