zoukankan      html  css  js  c++  java
  • bootstrap 模态框

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset='utf-8' />
            <title></title>
         <link rel="stylesheet" href="css/bootstrap.min.css">
    
    
        </head>
        <body>
        <table border="10">
            <tr>
                <td>id</td>
                <td>name</td>
                <td>time</td>
                <td>operation</td>
                <td>
                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">EDIT SERVER</button>
    
                </td>
            </tr>
        </table>
    
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content" style="margin-top: 100px;">
          <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="exampleModalLabel">EDIT SERVER01</h4>
          </div>
          <div class="modal-body">
            <form>
              <div class="form-group">
                <label for="recipient-name" class="control-label">Recipient:</label>
                <input type="text" class="form-control" id="server-id" value="1">
              </div>
              <div class="form-group">
                <label for="message-text" class="control-label">Message:</label>
                <textarea class="form-control" id="server-name">2</textarea>
              </div>
                          <div class="form-group">
                <label for="message-text" class="control-label">1:</label>
                <textarea class="form-control" id="server-time">3</textarea>
              </div>
                          <div class="form-group">
                <label for="message-text" class="control-label">2:</label>
                <textarea class="form-control" id="server-opt">4</textarea>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Send message</button>
          </div>
        </div>
      </div>
    </div>
    
    
    
    
    
               <script src="jquery-1.11.3.min.js"></script>
            <script src="js/bootstrap.min.js"></script>
    
          <script type="text/javascript">
              $('#exampleModal').on('show.bs.modal', function (event) {
                      var button = $(event.relatedTarget) // Button that triggered the modal
                      var recipient = button.data('whatever') // Extract info from data-* attributes
                      // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
                      // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
                      var modal = $(this)
                      var f = modal.find("form")
                      var name = f.children().eq(1).children().eq(1).val();
                      console.log(name)
                     // modal.find('.modal-title').text('New message to ' + recipient)
                    //  modal.find('.modal-body input').val(recipient)
              })
    
    
                        $('#exampleModal1').on('show.bs.modal', function (event) {
                      var button = $(event.relatedTarget) // Button that triggered the modal
                      var recipient = button.data('whatever') // Extract info from data-* attributes
                      // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
                      // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
                      var modal = $(this)
                     // modal.find('.modal-title').text('New message to ' + recipient)
                    //  modal.find('.modal-body input').val(recipient)
              })
            </script>
        </body>
    </html>

     更多的内容可以上bootstrap 官网查找

    http://v3.bootcss.com/javascript/

  • 相关阅读:
    TRansportation ANalysis and SIMulation System
    源数据的换行符
    小学生的加减乘除
    ORDER BY today_used ASC' % (MAX_USED_TIMES)
    线程污染 重复请求
    SQLite支持的并发访问数
    数组和链表的对比
    第一类 第二类 反向 螺旋 数学归纳法
    阶乘
    api 爬虫 避免相同 input 在信息未更新 情况下 重复请求重复
  • 原文地址:https://www.cnblogs.com/zhaobin022/p/5062210.html
Copyright © 2011-2022 走看看