Bootstrap之javascript插件---彈出框(模態框)Modal
阿新 • • 發佈:2017-12-19
boot mis out strong 設置 cnblogs true -o 分享圖片
簡介:
彈出框是一個經常使用的組件,一般用於彈出提示信息,確認信息,表單內容。
完整結構分析(可以沒有頭部和底部):
代碼示例:
<!-- 彈出框的頭部 --> <div class="modal fade"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <buttontype="button" class="close" data-dismiss="modal"> <span aria-hidden="true">×</span><span class="sr-only">Close</span> </button> <h4 class="modal-title">Modal title</h4> </div> <!-- 彈出框的內容 --> <div class="modal-body"> ... </div> <!-- 彈出框的底部 --> <div class="modal-footer"> <!-- 設置了data-dismiss="modal"屬性,就可以關閉該彈出框 --> <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>
※ 當需要為某個元素設置彈出框時,為該元素設置 data-toggle="modal"(激活模態框屬性),data-target="#about"(用於指向被控制的模態框)此處也不是特別理解,如有高見請各位小夥伴不吝賜教。
Bootstrap之javascript插件---彈出框(模態框)Modal