您的位置：首页 > Web前端 > BootStrap

Bootstrap之模态框（提示框）

2016-02-29 10:49 609 查看

1 效果图

Bootstrap的模态框可以用作，操作的提示、表单弹出窗口等。

2 代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>模态框测试</title>
<script src="../../Scripts/jquery-2.2.0.js" type="text/javascript"></script>
<script src="../../Scripts/bootstrap.js" type="text/javascript"></script>
<link href="../../Styles/bootstrap.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!--
data-toggle:触发器
data-target:目标
-->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
模态框测试
</button>

<!--
tabindex:设置键盘中TAB键在控件中的移动顺序，即焦点的顺序，默认为0，-1表示此元素被忽略。
-->
<div class="modal fade" id="myModal" tabindex="-1">
<div class="modal-dialog" ><!-- 模块会话 -->
<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">模块标题</h4>
</div>
<div class="modal-body">
<p>内容主体</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary">保存</button>
</div>
</div><!-- /.model-content -->
</div><!-- /.model-dialog -->
</div><!-- /.modal -->
</body>
</html>

以上代码由两部分组成：
按钮：data-toggle和data-target属性是必备属性，前者声明了按钮的类型，后者什么了对应的模块（即模态框）。
模态框：div的嵌套为
modal--》modal-dialog--》modal-content--》modal-header（存放标题）、modal-body（存放内容）、modal-footer（存放按钮）。

3 使用

在实际使用中，如果是作为提示框使用，应将模态框部分放在一个公共的页面中。不同的提示只需修改modal-body中的内容，而不需要写多个模态款（表单的除外）。
js控制

function hintModal(bodyTest) {
console.info("执行方法");
$("#hintModalBody").html(bodyTest);
$("#hintModal").modal('show');
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航