📌  相关文章
📜  带示例的模态JavaScript插件(引导程序)

📅  最后修改于: 2021-05-25 17:46:51             🧑  作者: Mango

您可以使用Bootstrap的Javascript Modal插件来创建用户通知，灯箱或自定义内容框。
例子： 


 
Modal example 
 




 
 
    
      
    
    

输出：

滚动内容的长度大于视口的长度：
当模式中的内容大于用户的视口时，模式将变为可滚动状态，并且它们独立于页面的内容滚动。源代码与上面相同。
输出：

垂直居中模态：
要使模态垂直居中，应在具有“ modal-dialog”类的div中添加“ modal-dialog-centered”类。 

 
 
Modal example 
 




 
 
    
      
    
    

 

输出 ：

不同大小的模态：
您可以为模态使用不同的大小。将以下类之一添加到具有“ modal-dialog”类的div中。下表描述了Bootstrap提供的不同大小。您还可以通过JS或CSS使用自定义尺寸。

Size Class Width (px)
Small .modal-sm 300
Default None 500
Large .modal-lg 800
Extra Large .modal-xl 1140

源代码： 

 
 
Modal example 
 




 

  
    
    
  
    
  
    
    
  
    
  
    
    
        

 

输出 ：