淘先锋技术网

首页 1 2 3 4 5 6 7

1、什么是模态框?

这里说的模态框,其实就是指的在覆盖在父窗体上的子窗体。可用来做交互,其实经常我我们会看到模态框用来登录、确定等等交互,就比如这样的:

这就是一个模态框,相信大家都差不多遇到,那到底是怎么实现这种效果的呢,bootstrap已经为我们提供了相应的组件。

2、创建模态框

现在让我们先看看bootstrap给我提供的模态框的基本结构,自己先看看最基本的代码结构:

<!-- 模态框(Modal) -->
<div class="modal fade" id="myModal" >
  <div class="modal-dialog">
    <div class="modal-content">
     <div class="modal-header">
       <button type="button" class="close">&times;</button>
       <h4 class="modal-title">模态框(Modal)标题</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">提交更改</button>
     </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal -->
</div>

上面就是最简单的模态框的结构,我们先一起看看代码的大概意思:

modal:表示这是一个模态框;

fade:表示淡入淡出的效果;

modal-dialog :表示用户操作的窗口;

modal-content :表示模态框的主体内容;

modal-header:表示模态框主体内容的头部;

modal-title:表示模态头部中的标题;

modal-body:表示模态框主体内容的主体部分;

modal-footer :表示模态框主体内容的底部;

data-dismiss:这个属性,表示关闭,使用jQuery实现关闭模态框的效果;

如果你直接复制了上面的代码,是不是很奇怪咋没有用?因为模态框默认是隐藏状态,需要触发事件,比如你点击某个按钮,模态框就会弹出了,所以我们只需要给模态框一个触发条件:

上面我给了一个按钮,通过点击按钮来触发模态框,先看看这个按钮怎么控制模态框:

data-target:表示指定操作id为myModal的模态框;

data-toggle:表示切换模态框的有隐藏和显示(使用jQuery中的toggle方法);

好了,这样的话,一个模态框的基本结构已经完成,看看效果图是怎么样的:

当我们完成了模态框暗暗高兴的时候,却发现随便点下模态框外面的蒙板,模态框就消失了,这个好像和我们别的网站看到的很多模态框效果不一样啊,别急,bootstrap还提供了很多class类实现不同的效果,我们一个一个慢慢看。

data-backdrop="static":指定一个静态的背景,当用户点击模态框外部时不会关闭模态框(为false灰色蒙蔽效果会消失;默认为true);

data-keyboard="true":表示ESC健是否有效,不写这个属性,默认为true,必须添加tabindex="-1"才能生效(tabindex用来设置元素的tab健循序,要设置一个数字才能生效);

具体的效果大家可以去尝试下。

3、使用js操作模态框

bootstrap中的js操作都是有依赖jQuery,模态框一样如此。

<button class="btn btn-warning" id="btn_modal">打开模态框</button>
<script>
        //点击显示模态框
	$("#btn_modal").click(function(){
		$("#myModal").modal("show")
	})
        
        //点击隐藏模态框
//	$("#btn_modal").click(function(){
//		$("#myModal").modal("hide")
//	})

</script>

我们可以直接使用modal()方法,可以直接在modal()方法里添加状态;

模态框还为我们提供了几种事件方法;

show.bs.modal:在调用 show 方法后触发。例如:

$('#myModal').on('show.bs.modal', function () {
    alert("我要打开模态框")
})

shown.bs.modal:当模态框对用户可见时触发(将等待 CSS 过渡效果完成)。

$('#myModal').on('shown.bs.modal', function () {
  alert("我已经打开了模态框")
})

hide.bs.modal:当调用 hide 实例方法时触发。

$('#myModal').on('hide.bs.modal', function () {
  alert("我要隐藏模态框")
})

hidden.bs.modal:当模态框完全对用户隐藏时触发。

$('#myModal').on('hidden.bs.modal', function () {
  alert("我要已经隐藏了模态框")
})

bootstrap提供的方法和class类大致上就这些,可以根据实际的情况使用这些方法。