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 .........完整代码请登录后点击上方下载按钮下载查看