Bootstrap響應式前端框架筆記十六——模態框交互

Bootstrap響應式前端框架筆記十六——模態框交互

    模態框也能夠稱爲彈出窗，其做用是當用戶點擊某個功能按鈕後，在網頁上彈出一個內容窗口。在Bootstrap中，建立模態框十分簡單。首先模態框組件經過modal類來建立，其默認隱藏，開發者能夠使用data相關屬性來將其喚出。簡單示例以下：

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
正常模態框
</button>
<!--這裏設置的id用於綁定在按鈕事件上-->
<div class="modal fade" id="myModal" tabindex="-1">
    <!--modal-dialog爲懸浮框模式的模態框-->
	<div class="modal-dialog">
        <!--模態框組件內容部分-->
		<div class="modal-content">
            <!--頭部內容-->
			<div class="modal-header">
                <!--爲按鈕綁定data-dismiss="modal"能夠實現點擊取消模態框-->
				<button type="button" class="close" data-dismiss="modal"><span>&times;</span>
                </button>
				<h4 class="modal-title" id="myModalLabel">模態框標題</h4>
			</div>
            <!--模態框主體內容-->
		    <div class="modal-body">
		    模態框內容
		    </div>
            <!--模態框尾部內容-->
	        <div class="modal-footer">
		        <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
		        <button type="button" class="btn btn-primary" data-dismiss="modal">保存</button>
		    </div>
	    </div>
    </div>
</div>

效果以下：

能夠爲model-dialog類增長modal-lg或者modal-sm能夠建立大號的模態框或者小號的模態框。須要注意，模態框的彈出時有漸入動畫的，若是不須要動畫效果，只須要將fade類去掉便可。

    對於定義爲modal模塊的div，開發者也能夠經過設置data屬性的方式來對模態框進行設置，列舉以下：

data-backdrop	布爾"true"或"false"	若是設置爲true，則顯示灰色背景，不然不顯示灰色背景
data-keyboard	布爾值	設置點擊鍵盤esc鍵是否隱藏模態框，注意，必須設置tabindex屬性，這個值纔有效
data-show	布爾值	模態框初始化後是否當即展現
data-remote	路徑	若是配置了url，會將內容加載進modal-content中

modal模塊也支持經過js代碼來進行相關控制，支持的方法以下：

$('#open').on("click",function(){
    //展現模態框
    $('#myModal').modal('show');
});
$('#close').on("click",function(){
    //隱藏模態框
	$('#myModal').modal('hide');
});
$('#exchange').on("click",function(){
    //顯示或隱藏進行切換
	$('#myModal').modal('toggle');
});
$('#setting').on("click",function(){
    //對模態框的屬性進行設置 傳入對象
	$('#myModal').modal({
		keyboard:false
	});
});

模態框也能夠添加一些特有的事件回調，示例以下：

$('#myModal').on('show.bs.modal',function(e){
	console.log("模態框將要展現觸發")
});
$('#myModal').on('shown.bs.modal',function(e){
	console.log("模態框已經展現後觸發")
});
$('#myModal').on('hide.bs.modal',function(e){
	console.log("模態框將要消失觸發")
});
$('#myModal').on('hidden.bs.modal',function(e){
	console.log("模態框已經消失後觸發")
});
$('#myModal').on('loaded.bs.modal',function(e){
	console.log("從遠端數據源加載數據完成")
});

   另外，本篇博客中全部的實例代碼及顯示效果，在以下地址中，須要的能夠自行對照學習。

http://zyhshao.github.io/bootStrapDemo/modelJS.html。

前端學習新人，有志同道合的朋友，歡迎交流與指導，QQ羣:541458536