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>
  • 相关阅读:
    每日总结32
    每日总结31
    每日总结30
    Leetcode 115. 不同的子序列(二维DP)
    Leetcode 59. 螺旋矩阵 II
    Leetcode 227. 基本计算器 II
    macOS下将GitHub中单个子文件夹下载到本地
    P3796 【模板】AC自动机(加强版)
    P3808 【模板】AC自动机(简单版)
    【Kubernetes】副本的删除
  • 原文地址:https://www.cnblogs.com/pcd12321/p/5500961.html
Copyright © 2011-2022 走看看