務(wù)必將模態(tài)框的 HTML 代碼放在文檔的最高層級(jí)內(nèi)（也就是說(shuō)，盡量作為 body 標(biāo)簽的直接子元素）浮梢，以避免其他組件影響模態(tài)框的展現(xiàn)或功能桶癣。
一、代碼模板
<button class="btn btn-primary" data-toggle="modal" data-target="#con-close-modal">發(fā)布活動(dòng)</button>
<div id="con-close-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog" id="fabu">
<div class="modal-content">
<form data-name="" role="form" id="yz_fb" onsubmit="return false">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="road_title">發(fā)布活動(dòng)</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="field-3">活動(dòng)類(lèi)型</label>
<div for="field-3">
<select class="form-control" id="action" name="action">
<option value="1">路演</option>
<option value="2">比賽</option>
<option value="3">學(xué)習(xí)</option>
</select>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div><!-- /.modal -->
二硫麻、點(diǎn)擊發(fā)布活動(dòng)按鈕，一個(gè)漂亮的談框就出來(lái)了。
注意：data-target屬性，指向了model的id帅掘，所以點(diǎn)擊按鈕，model就會(huì)彈出來(lái)了堂油。(重點(diǎn))
三、用js來(lái)控制談框碧绞。
如下代碼：
-
顯示：
$('#con-close-modal').modal('show'); -
隱藏：
$('#con-close-modal').modal('hide');這里有個(gè)坑：
必須用.modal（'hide'）來(lái)隱藏關(guān)閉談框府框，如果用原生的.hide()將會(huì)關(guān)閉談框之后但是屏幕依然被鎖定無(wú)法操作
因?yàn)榍岸瞬寮枚嗔耍琷q引入倆次讥邻，導(dǎo)致沖突迫靖，會(huì)導(dǎo)致js報(bào)錯(cuò)：.modal（）不是一個(gè)方法，這個(gè)時(shí)候你就去試著刪掉一個(gè)jq的引入即可解決
-
開(kāi)關(guān)：
$('#con-close-modal').modal('toogle'); -
事件:
$('#con-close-modal').on('hidden', function () {// do something…});
注意：我這邊用到了href屬性兴使，這是讓model去 remote一個(gè)url系宜。當(dāng)然 ，你可以把你要的內(nèi)容发魄，直接寫(xiě)在model-body里面盹牧。
三、認(rèn)真看model的div結(jié)構(gòu)励幼，你就會(huì)明白汰寓，model-body是代表內(nèi)容，model-header是頭部苹粟，那么如果要在底部加兩個(gè)按鈕有滑，那么就得用下面的代碼了。
<div class="modal-footer">
<a href="#" class="btn">關(guān)閉</a>
<a href="#" class="btn btn-primary">保存</a>
</div>
注意：如果要給model設(shè)置寬度嵌削，那必須得加上布局毛好。就是把model放在下面的代碼塊中望艺，并且設(shè)置model的寬度。style="width:500px".對(duì)了肌访，你還不可以用span樣式直接放到class里面荣茫。。
<div class="container"></div>