boostrap --- 彈窗modal的使用

<input id="btntext" type="button" value="添加文本組件" data-toggle="modal" data-target="#myModal01"  href="../SysManage/ZuJianManage.aspx"/>
<!-- Modal -->
<div class="modal hide fade" id="myModal01" tabindex="-1" role="dialog">
<div class="modal-header"><button class="close" type="button" data-dismiss="modal">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body"></div>
</div>

注意：data-target屬性，指向了model的id，因此點擊按鈕，model就會彈出來了。
js來控制，以下代碼：
顯示：$('#myModal01').modal('show');
隱藏：$('#myModal01').modal('hide');
開關：$('#myModal01').modal('toogle');
事件: $('#myModal01').on('hidden', function () {// do something…});

 

彈窗彈出若是存在雙滾動條，那就是 model寬度和容器寬度不一致 ，如：body，html設置爲100vw,那麼.modal{ width: 100vw;}

 

若是你不須要模態框彈出時的動畫效果（淡入淡出效果），刪掉  .fade 類便可。

參考： https://v3.bootcss.com/javascript/#js-overview