結果展示
出現一個模態框進行顯示或者數據的輸入與傳輸
**用途：**剛剛其實已經說過了，1.進行數據的顯示 2.進行form的input表單的配合進行數據的傳輸，不過值得一提的是，模態框不能通過form的action屬性進行重定向，需要通過js+ajax進行數據的json格式傳輸或者直接獲取數據用get爲後綴的方式。
實現代碼
<html>
<head>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>
<body>
<button class="btn btn-success" data-toggle="modal" data-target="#myModal">點擊彈出</button>
<!--個人信息模態框-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="myModalLabel">
個人信息
</h4>
</div>
<div class="modal-body">
<form>
<input type="text" placeholder="請輸入用戶名">
</form>
</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>
<!-- /.modal-content -->
</div>
<!-- /.modal -->
</div>
</body>
</html>注意事項
這裏使用的是bootstrap，模態框是bootstrap的非常重要的組件，不懂的博友們可以去百度學習一下。