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