用bootstrap3 做个模态框

我们经常在网页上使用模态框这一元素

使用起来的效果如下

点击一个连接或按钮后弹出一个新的“网页”

使用bootstrap3可以方便快速的创建这一效果

比如我的这个登录框的代码

    
    

      

        

          

            
              ×
            
            

              登录到先声文库
            
          
          

            
              

                账号
                

                  
                
              
              

                密码
                

                  
                
              
            
          
          

            关闭
            
            
            
          
        
      

    

注意

1

千万不要在一个模态框上重叠另一个模态框。要想同时支持多个模态框，需要自己写额外的代码来实现。
模态框的 HTML 代码放置的位置

2

务必将模态框的 HTML 代码放在文档的最高层级内（也就是说，尽量作为 body 标签的直接子元素），以避免其他组件影响模态框的展现和/或功能。

class="modal fade"

这个类说明这是一个模态框，且出现、关闭时带有动画效果
不想要动画效果可以去除fade类

在这一层中增加类modal-lg 和 modal-sm可以控制模态框的大小
比如我要在模态框中显示pdf 就需要用大的模态框了

QQ截图20141122131412.png

代码

    

      

        

          

            
              ×
            
            

              {{你的标题}}
            
          
          
It appears you don't have Adobe Reader or PDF support in this web browser. Click here to download the PDF
          

            关闭
            
            点击下载
            
          
        
      

    

和

可以为模态框增加头和脚 效果如图

显示模态框

可以为控制元素如 和添加
data-toggle="modal" data-target="#register"属性来控制模态框的显示

比如这样的代码将显示 id为register的模态框
注册

或者也可以写成
注册

当然也可以通过js来调用

模态框的事件

Bootstrap 的模态框类提供了一些事件用于监听并执行你自己的代码。

事件类型    描述
show.bs.modal   show 方法调用之后立即触发该事件。如果是通过点击某个作为触发器的元素，则此元素可以通过事件的 relatedTarget 属性进行访问。
shown.bs.modal  此事件在模态框已经显示出来（并且同时在 CSS 过渡效果完成）之后被触发。如果是通过点击某个作为触发器的元素，则此元素可以通过事件的 relatedTarget 属性进行访问。
hide.bs.modal   hide 方法调用之后立即触发该事件。
hidden.bs.modal 此事件在模态框被隐藏（并且同时在 CSS 过渡效果完成）之后被触发。
loaded.bs.modal 从远端的数据源加载完数据之后触发该事件。


$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})