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

admin · 发表于 2015-12-19 19:24:20

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

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

x

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

截图.png

源码例子如下：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<link href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">点击</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<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="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<div class="dropdown">
<input id="dLabel" type="text" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<div class="dropdown-menu" aria-labelledby="dLabel">
<div>
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab" data-stopPropagation="true">Home</a></li>
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab" data-stopPropagation="true">Profile</a></li>
<li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab" data-stopPropagation="true">Messages</a></li>
<li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab" data-stopPropagation="true">Settings</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home" style="width: 500px;height: 300px">1111</div>
<div role="tabpanel" class="tab-pane" id="profile" style="width: 500px;height: 300px">2222</div>
<div role="tabpanel" class="tab-pane" id="messages" style="width: 500px;height: 300px">3333</div>
<div role="tabpanel" class="tab-pane" id="settings" style="width: 500px;height: 300px">4444</div>
</div>
</div>
</div>
</div>
<br><br><br><br><br><br>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript">
$('.dropdown-menu').on('click', '[data-stopPropagation]', function(e) {
e.stopPropagation();
$(this).tab('show');
});
</script>
</body>
</html>

复制代码

		自动登录	找回密码
密码			立即注册

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

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

相关帖子