点击登录按钮从上而下弹出登录界面窗口

来源：互联网发布：nodejs配合什么数据库编辑：程序博客网时间：2024/04/29 21:38
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css"/>  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script><script src="bootstrap.min.js"></script></head><body><script type="text/javascript">$('#myModal').on('shown.bs.modal', function () {  $('#myInput').focus()})</script><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>...more buttons...<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">  <div class="modal-dialog" role="document">    <div class="modal-content">      <div class="modal-header">        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>        <h4 class="modal-title" id="exampleModalLabel">New message</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="recipient-name">          </div>          <div class="form-group">            <label for="message-text" class="control-label">Message:</label>            <textarea class="form-control" id="message-text"></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></body></html>
阅读全文
0 0