bootstrap 模态框

展示大模态框和小模态框两种，通过modal-lg和modal-sm来控制，bootstrap的模态框自带响应式，移动端优先，在移动端也能有很好的效果：

happy new years！

在移动端，大模态框和小模态框都是同样大小。

    
        
        
        
        
        
        
        
        
    
    
        
            Large modal
        
        

            

                

                    

                        

                            新年快乐
                        
                    
                    

                        是否踏入2019年？
                    
                    

                        
                            关闭
                        
                        
                            确定
                        
                    
                
            
        
        
        
            Small modal
        
        

            

                

                    

                        

                            新年快乐
                        
                    
                    

                        是否踏入2019年？
                    
                    

                        
                            关闭
                        
                        
                            确定
                        
                    
                
            
        
        
        
        
        
    

happy new years！

happy new years！

js控制模态框的隐藏

$("#myBtn").click(function() {
    setTimeout(function() {
        $('#myModal').modal("hide")
    },3000);
})

模态框隐藏.png

官网https://v4.bootcss.com/docs/4.0/components/modal/#remove-animation