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/

  • 相关阅读:
    Ubuntu 装JDK
    U盘文件夹被病毒隐藏,且不能取消解决办法
    wireshark: there are no interfaces on which a capture can be done
    [转]Ubuntu 常用快捷键10个
    恢复被win7覆盖的Ubuntu Grub
    U盘安装Win7 64位
    荣耀3X畅玩版狙击红米note!
    Secret and Whisper
    360 chrome不能登录Google账户
    周鸿祎仍想做手机
  • 原文地址:https://www.cnblogs.com/zhaobin022/p/5062210.html
Copyright © 2011-2022 走看看