Bootstrap3 模态框使用实例
不支持同时打开多个模态框
务必尽量将HTML代码放置在模态框的body位置以避免其他组件影响模态框
*autofocus对于模态框无效,需要自己调用$('#myModal').on('shown.bs.modal',function(){
$('#myInput').focus()
})*
实例
静态
<divclass="modalfade"tabindex="-1"role="dialog"> <divclass="modal-dialog"role="document"> <divclass="modal-content"> <divclass="modal-header"> <buttontype="button"class="close"data-dismiss="modal"aria-label="Close"><spanaria-hidden="true">×</span></button> <h4class="modal-title">Modaltitle</h4> </div> <divclass="modal-body"> <p>Onefinebody…</p> </div> <divclass="modal-footer"> <buttontype="button"class="btnbtn-default"data-dismiss="modal">Close</button> <buttontype="button"class="btnbtn-primary">Savechanges</button> </div> </div><!--/.modal-content--> </div><!--/.modal-dialog--> </div><!--/.modal-->
动态
<!--Buttontriggermodal--> <buttontype="button"class="btnbtn-primarybtn-lg"data-toggle="modal"data-target="#myModal"> Launchdemomodal </button> <!--Modal--> <divclass="modalfade"id="myModal"tabindex="-1"role="dialog"aria-labelledby="myModalLabel"> <divclass="modal-dialog"role="document"> <divclass="modal-content"> <divclass="modal-header"> <buttontype="button"class="close"data-dismiss="modal"aria-label="Close"><spanaria-hidden="true">×</span></button> <h4class="modal-title"id="myModalLabel">Modaltitle</h4> </div> <divclass="modal-body"> ... </div> <divclass="modal-footer"> <buttontype="button"class="btnbtn-default"data-dismiss="modal">Close</button> <buttontype="button"class="btnbtn-primary">Savechanges</button> </div> </div> </div> </div>
可选尺寸
<!--Largemodal--> <buttontype="button"class="btnbtn-primary"data-toggle="modal"data-target=".bs-example-modal-lg">Largemodal</button> <divclass="modalfadebs-example-modal-lg"tabindex="-1"role="dialog"aria-labelledby="myLargeModalLabel"> <divclass="modal-dialogmodal-lg"role="document"> <divclass="modal-content"> ... </div> </div> </div> <!--Smallmodal--> <buttontype="button"class="btnbtn-primary"data-toggle="modal"data-target=".bs-example-modal-sm">Smallmodal</button> <divclass="modalfadebs-example-modal-sm"tabindex="-1"role="dialog"aria-labelledby="mySmallModalLabel"> <divclass="modal-dialogmodal-sm"role="document"> <divclass="modal-content"> ... </div> </div> </div>
禁用fade
<divclass="modal"tabindex="-1"role="dialog"aria-labelledby="..."> ... </div>
使用栅格系统
仅需在body中使用.rows
<divclass="modalfade"tabindex="-1"role="dialog"aria-labelledby="gridSystemModalLabel"> <divclass="modal-dialog"role="document"> <divclass="modal-content"> <divclass="modal-header"> <buttontype="button"class="close"data-dismiss="modal"aria-label="Close"><spanaria-hidden="true">×</span></button> <h4class="modal-title"id="gridSystemModalLabel">Modaltitle</h4> </div> <divclass="modal-body"> <divclass="row"> <divclass="col-md-4">.col-md-4</div> <divclass="col-md-4col-md-offset-4">.col-md-4.col-md-offset-4</div> </div> <divclass="row"> <divclass="col-md-3col-md-offset-3">.col-md-3.col-md-offset-3</div> <divclass="col-md-2col-md-offset-4">.col-md-2.col-md-offset-4</div> </div> <divclass="row"> <divclass="col-md-6col-md-offset-3">.col-md-6.col-md-offset-3</div> </div> <divclass="row"> <divclass="col-sm-9"> Level1:.col-sm-9 <divclass="row"> <divclass="col-xs-8col-sm-6"> Level2:.col-xs-8.col-sm-6 </div> <divclass="col-xs-4col-sm-6"> Level2:.col-xs-4.col-sm-6 </div> </div> </div> </div> </div> <divclass="modal-footer"> <buttontype="button"class="btnbtn-default"data-dismiss="modal">Close</button> <buttontype="button"class="btnbtn-primary">Savechanges</button> </div> </div><!--/.modal-content--> </div><!--/.modal-dialog--> </div><!--/.modal-->
使用方法
通过data属性
<buttontype="button"data-toggle="modal"data-target="#myModal">Launchmodal</button>
通过JavaScript调用
$('#myModal').modal(options)
参数
方法
模态框激活
.modal(options)
$('#myModal').modal({
keyboard:false
})
模态框触发手动打开或者关闭
触发在shown.bs.modal以及hidden.bs.modal事件之前
.modal('toggle')
手动打开模态框
触发在shown.bs.modal之前
$('#myModal').modal('show')
手动隐藏模态框
触发在hidden.bs.modal之前
$('#myModal').modal('hide')
事件
按照时间先后顺序分别为show.bs.modalshown.bs.modalhide.bs.modal hidden.bs.modal
调用方式
$('#myModal').on('hidden.bs.modal',function(e){
//dosomething...
})
以上所述是小编给大家介绍的Bootstrap3模态框使用实例，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！