Bootstrap模态框怎么用-创新互联

这篇文章主要为大家展示了Bootstrap模态框怎么用，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带大家一起来研究并学习一下“Bootstrap模态框怎么用”这篇文章吧。

Bootstrap是什么

Bootstrap是目前最受欢迎的前端框架，它是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷，它还有一个响应好的Grid系统，并且能够在手机端通用，而Bootstrap是使用许多可重用的CSS和JavaScript组件，可以帮助实现需要的几乎任何类型的网站的功能，此外，所有这些组件都是响应式的。

一个最简单的模态框由头部、body和放在底部的按钮，静态模态框如下：

  
    
      
        
×
        
模态框头部      
             
 
模态框主体部分
      
 
      
         
 关闭        
 保存      
 
    
 
  
 

如果不想要动画效果（在这里是淡入淡出的效果），可以把class的fade去掉即可。

modal-header类的p是头部，我们可以在这里加上合适的头部，也就是标题；modal-body类的p是主体内容，按需加入适当内容；modal-footer类的p是底部，一般是加上'关闭窗口'、'保存'或类似的内容。

demo中的'博主myvin的其他信息'弹出的模态框是这样的：

要实现的模态框和上面的静态模态框很相似，只是title、body和下面的一个button，因为是一个关闭的button，所以保留一个dismiss的data，即data-dismiss="modal"，表示这是一个具有关闭的button。直接贴出code：

 
        
          
            
×
            
博主myvin的其他信息          
          
            
当爱情来得过于汹涌，我们该如何抉择？
当情感在时间的浪潮里激情得澎湃，我们又该何去何从？
“不死鸟，不死鸟。”有太多的东西徘徊在我们的周身，或激情或萧条，我们又该怎么权衡？
《不死鸟》，也许这里有你曾经经历过的点点滴滴，也许有你即将经历的枝枝叶叶。
然而在某些东西面前，爱情又是那么的脆弱......
摊开《不死鸟》，就是摊开你的一生......

点击查看博主myvin的遗作(博主又名：晓马哥vin)

http://www.rongshuxia.com/book/5509439<;/a>
          
          
           
 关闭         
  
        
  
      
  
    
  

正如我们最开始说的，这是一个静态模态框，所以并没有实现点击弹出模态框的效果，所以我们接下来要做的就是添加一个点击'博主myvin的其他信息'就会弹出我们上面写出的模态框的效果。当然要实现也很简单。我们先看看我们很早之前写的导航栏的一段代码：

博主myvin的其他信息

我们写了一个有a的li，我们现在要做的就是点击这个li就能跳转到那个信息modal。因为我们写的那个modal设置了一个id=about，所以我们只要使li的target是这个modal就ok了，这里我们用data：

data-target="#about"

现在点击这个li就能正常淡入淡出的弹出一个modal了。

注册和登陆按钮

注册和登陆按钮其实也分别是一个modal，要实现的效果如下

点击登陆或注册按钮，弹出modal，在modal顶部其实两个tab，分别点击注册或登陆按钮会分别切换到相应的tab，所以是一个tab和modal的组合。之前我们聊过tab，再结合上面说的modal，这个效果并不难做。

在这里我们省去了modal-header，只在modal-body中加入了两个tab，而tab是一个ul和一个tab-content组成，

所以code如下：

      
        
          
            
x            
              
登陆              
注册            
            
              
                
                  
                    

                  
                    
                  
                  
                    
   
                  
                    
                  
                  
                    
                  
                  
                    
注册                  
                
              
              
                
                  <
p class="form-group">                    
                  
                  
                    
                  
                  
                   
 立刻登录                    
 忘记密码                  
 
                
               
 
            
 
          
 
          
           
 
        
 
      
 
    
 

同样我们需要在导航栏中的登陆/注册按钮处添加target：

 登陆   
 注册

但是这样写的话会有一个小问题：

在聊tab的时候，我们说过得给其中一个tab设置active类，因为初始化是有一个tab显示的，那么在这个登陆/注册modal中，如果我们给其中一个tab添加active类，比如我们给登陆的li和相应的tab-content添加active类，那么效果自然是这样的：

我们先点击登陆按钮，弹出的modal中的登陆tab显示；如果我们先点击注册按钮，那么还是登陆tab显示??因为我们只给注册添加了active，在tab中，有active的会首先显示。无论我们先点击哪个效果总是这样的：

如果我们给注册和登陆都添加上active类呢？效果是这样的：

因为都添加了active，所以两个tab都显示打开，因为登陆p在注册p上面，所以总是显示登陆tab。

那如果我们两者都不添加active呢？那么效果是这个样子的：

显然，以上三种情况都不符合我们的实现效果。

这里说一个一个直接笨拙的方法，那就是点击哪个按钮就将active类添加到相应的按钮上，同时移除另一个按钮上的active类，js实现如下：

      $('#signin-button').click(function(){       
      $('#signup-li').removeClass('active');        
      $('#signup-tab').removeClass('active');        
      $('#signin-li').addClass('active');        
      $('#signin-tab').addClass('active');      
      });      
      $('#signup-button').click(function(){        
      $('#signin-li').removeClass('active');        
      $('#signin-tab').removeClass('active');        
      $('#signup-li').addClass('active');        
      $('#signup-tab').addClass('active');      
      });

这样一个基本的网页就算完成了。

以上就是关于“Bootstrap模态框怎么用”的内容，如果改文章对你有所帮助并觉得写得不错，劳请分享给你的好友一起学习新知识，若想了解更多相关知识内容，请多多关注创新互联行业资讯频道。