zoukankan      html  css  js  c++  java
  • Bootstrap4 模态对话框示例

    <!DOCTYPE html>
    <html>
    <head>
      <title>Bootstrap 实例</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
      <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
      <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
      <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    </head>
    <body>
    
    <div class="container">
      <h2>模态框实例</h2>
      <!-- 按钮:用于打开模态框 -->
      <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
        打开模态框
      </button>
    
      <button type="button" class="btn btn-primary" id="btnOpenModal">
        js打开模态框
      </button>
    
       
      <!-- 模态框 -->
      <div class="modal fade" id="myModal">
        <div class="modal-dialog">
          <div class="modal-content">
       
            <!-- 模态框头部 -->
            <div class="modal-header">
              <h4 class="modal-title">模态框头部</h4>
              <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
       
            <!-- 模态框主体 -->
            <div class="modal-body">
              
              <form>
                <div class="form-group">
                  <label for="username">Name:</label>
                  <input type="username" class="form-control" id="username" placeholder="Enter email">
                </div>
                <div class="form-group">
                  <label for="email">Email:</label>
                  <input type="email" class="form-control" id="email" placeholder="Enter email">
                </div>
                <div class="form-group">
                  <label for="pwd">Password:</label>
                  <input type="password" class="form-control" id="pwd" placeholder="Enter password">
                </div>
                <div class="form-check">
                  <label class="form-check-label">
                    <input class="form-check-input" type="checkbox"> Remember me
                  </label>
                </div>
              </form>
    
            </div>
       
            <!-- 模态框底部 -->
            <div class="modal-footer">
              <button type="button" class="btn btn-primary" data-dismiss="modal">确定</button>
              <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
            </div>
       
          </div>
        </div>
      </div>
      
    </div>
    
    <script type="text/javascript">
      $(function(){
        $('#btnOpenModal').click(function(){
          $('#myModal').modal('show')
        });
    
        $('#myModal').on('show.bs.modal', function (e) {
          console.log('对话框正在打开');
        });
    
        $('#myModal').on('shown.bs.modal', function (e) {
          console.log('对话框打开了');
        });
    
        $('#myModal').on('hide.bs.modal', function (e) {
          console.log('对话框正在关闭');
        });
    
        $('#myModal').on('hidden.bs.modal', function (e) {
          console.log('对话框关闭了');
        });
    
      });
    </script>
    </body>
    </html>
    
  • 相关阅读:
    BZOJ1527 : [POI2005]Pun-point
    2016-2017 ACM-ICPC Southwestern European Regional Programming Contest (SWERC 2016)
    2016-2017 ACM-ICPC Northwestern European Regional Programming Contest (NWERC 2016)
    NAIPC-2016
    BZOJ2498 : Xavier is Learning to Count
    ACM ICPC Vietnam National Second Round
    XVI Open Cup named after E.V. Pankratiev. GP of Ukraine
    XVI Open Cup named after E.V. Pankratiev. GP of Peterhof
    HDU5509 : Pattern String
    BZOJ4583 : 购物
  • 原文地址:https://www.cnblogs.com/AlexanderZhao/p/12878767.html
Copyright © 2011-2022 走看看