zoukankan      html  css  js  c++  java
  • 插件书写示例

    正常模态框代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>模态框</title>
      <link rel="stylesheet" href="css/bootstrap.min.css">
      <script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
      <script type="text/javascript" src="js/bootstrap.min.js"></script>
    </head>
    <body  style="height: 1500px;">
    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
      Launch demo modal
    </button>
    
    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
          </div>
          <div class="modal-body">正常模态框</div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>
    </body>
    </html>

    插件模态框代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>模态框</title>
      <link rel="stylesheet" href="css/bootstrap.min.css">
      <script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
      <script type="text/javascript" src="js/bootstrap.min.js"></script>
    </head>
    <body  style="height: 1500px;">
    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
      Launch demo modal
    </button>
    
    <script type="text/javascript">
      window.onload  = function() {
            var qrcode_box = ['<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">'];
                //弹层主要部分
            qrcode_box.push('
                  <div class="modal-dialog">
                    <div class="modal-content">
                      <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                        </button>
                        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                      </div>
                      <div class="modal-body">插件模态框</div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary">Save changes</button>
                      </div>
                    </div>
                  </div>');
            qrcode_box.push('</div>');
            console.log(qrcode_box);
            $('body').append(qrcode_box.join(''));
      }
    </script>
    </body>
    </html>
  • 相关阅读:
    Android基础-Android Bitmap高效加载策略
    Android基础-Android进程间通信方式
    Android基础-Android虚拟机及编译过程
    Android基础-View测量、布局及绘制原理
    Android基础-Window、Activity、DecorView以及ViewRoot之间的关系
    Android基础-LruCache原理解析
    Android基础-IntentService详解
    Android基础-AsyncTask详解
    linux 校准时间
    网站自动识别移动端访问并跳转
  • 原文地址:https://www.cnblogs.com/pcd12321/p/5500961.html
Copyright © 2011-2022 走看看