PHPIN.NET

 找回密码
 立即注册
查看: 7365|回复: 0

[实例分享] Bootstrap3弹出拟态框中包含下拉和标签页

[复制链接]

469

主题

31

回帖

5497

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
5497
发表于 2015-12-19 19:24:20 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有账号?立即注册

x
Bootstrap3弹出拟态框中包含下拉和标签页

截图.png
源码例子如下:
  1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <title>Document</title>
  6. <link href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
  7. </head>
  8. <body>
  9. <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">点击</button>
  10. <!-- Modal -->
  11. <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  12.   <div class="modal-dialog" role="document">
  13.     <div class="modal-content">
  14.       <div class="modal-header">
  15.         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  16.         <h4 class="modal-title" id="myModalLabel">Modal title</h4>
  17.       </div>
  18.       <div class="modal-body">


  19.         <div class="dropdown">
  20.           <input id="dLabel" type="text" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  21.           <div class="dropdown-menu" aria-labelledby="dLabel">

  22.                 <div>
  23.                   <!-- Nav tabs -->
  24.                   <ul class="nav nav-tabs" role="tablist">
  25.                     <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab" data-stopPropagation="true">Home</a></li>
  26.                     <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab" data-stopPropagation="true">Profile</a></li>
  27.                     <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab" data-stopPropagation="true">Messages</a></li>
  28.                     <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab" data-stopPropagation="true">Settings</a></li>
  29.                   </ul>
  30.                   <!-- Tab panes -->
  31.                   <div class="tab-content">
  32.                     <div role="tabpanel" class="tab-pane active" id="home" style="width: 500px;height: 300px">1111</div>
  33.                     <div role="tabpanel" class="tab-pane" id="profile" style="width: 500px;height: 300px">2222</div>
  34.                     <div role="tabpanel" class="tab-pane" id="messages" style="width: 500px;height: 300px">3333</div>
  35.                     <div role="tabpanel" class="tab-pane" id="settings" style="width: 500px;height: 300px">4444</div>
  36.                   </div>
  37.                 </div>


  38.           </div>
  39.         </div>



  40. <br><br><br><br><br><br>
  41.       </div>
  42.       <div class="modal-footer">
  43.         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  44.         <button type="button" class="btn btn-primary">Save changes</button>
  45.       </div>
  46.     </div>
  47.   </div>
  48. </div>
  49. <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
  50. <script src="http://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  51. <script type="text/javascript">
  52. $('.dropdown-menu').on('click', '[data-stopPropagation]', function(e) {
  53.     e.stopPropagation();
  54.     $(this).tab('show');
  55. });
  56. </script>
  57. </body>
  58. </html>
复制代码
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|PHPIN.NET ( 冀ICP备12000898号-14 )|网站地图

GMT+8, 2024-3-28 17:16

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表