bootstrap弹出层效果

  1.    
  2. <!DOCTYPE html>  
  3. <html>  
  4.     <head>  
  5.         <meta http-equiv="Content-type" content="text/html; charset=utf-8">  
  6.         <link rel="stylesheet" href="https://files.cnblogs.com/rubylouvre/bootstrap.css"/>   
  7.         <script src="https://files.cnblogs.com/rubylouvre/jquery1.83.js" > </script>  
  8.         <script src="https://files.cnblogs.com/rubylouvre/bootstrap-transition.js"></script>  
  9.         <script src="https://files.cnblogs.com/rubylouvre/bootstrap-modal.js"></script>  
  10.    
  11.          
  12.     </head>  
  13.     <body>  
  14.         <a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>  
  15.         <!-- Modal -->  
  16.         <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">  
  17.             <div class="modal-header">  
  18.                 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>  
  19.                 <h3 id="myModalLabel">Modal header</h3>  
  20.             </div>  
  21.             <div class="modal-body">  
  22.                 <p>弹出层…</p>  
  23.             </div>  
  24.             <div class="modal-footer">  
  25.                 <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>  
  26.                 <button class="btn btn-primary">Save changes</button>  
  27.             </div>  
  28.         </div>  
  29.     </body>  
  30. </html>  
posted @ 2015-01-05 14:53  指尖凝墨  阅读(219)  评论(0)  编辑  收藏  举报