物化 CSS – 模态

Materialise CSS 使用模态组件来创建对话框、确认消息或向查看者展示重要内容，其中底层内容在模态窗口关闭之前变为非活动状态。

为了使模态工作，将模态 Id添加到触发器的链接中，并在网页上包含参考 materialize.min.js 和 jQuery。要添加“关闭”按钮，请将类modal-close添加到您的按钮。

模态类型：

1. 基本模式：基本模式由content和footer 组成。 modal-content类在另一个使用“action”按钮的“div”标签中引用“main”div和modal-footer类。

   例子：

   HTML

     
   
       
     
       
       
       
       
       
   
     
   
       
           Geeks for Geeks
           
           
               Click Here!
           
     
           
           
               
                   Demo of Simple Modal
                   
                   
                       Content of the modal goes here. 
                       Type information here. 
                   
                   C is a procedural programming language.
                   It was initially developed by Dennis 
                   Ritchie as a system programming language 
                   to write operating system. The main 
                   features of C language include low-level
                   access to memory, simple set of keywords,
                   and clean style, these features make C 
                   language suitable for system programming 
                   like operating system or compiler development.
                   
               
     
               
                   
                       Close
                   
               
           
       
       
           $(document).ready(function () {
               $('.modal').modal();
           }
           )
       
   
     

   输出：

   

2. 带有固定页脚的模态：如果内容很大，则使用这种类型的模态。在这里，我们可以创建固定的“动作”按钮。为此， modal-fixed-footer类与主容器元素中的 modal 类一起使用。

   例子：

   HTML

     
   
       
     
       
       
       
       
       
   
     
   
       
           
               Geeks for Geeks
               
               
                   Click Here!
               
     
               
               
                   
                       Modal with Fixed Footer
                       
                           Content of the modal goes here. 
                           Type information here. 
                       
                       
                           An array is a collection of items 
                           stored at contiguous memory locations.
                           The idea is to store multiple items of 
                           the same type together. This makes 
                           it easier to calculate the position
                           of each element by simply adding an 
                           offset to a base value, i.e., the 
                           memory location of the first element of
                           the array (generally denoted by the 
                           name of the array).
                       
     
                       
                           An array is a collection of items stored 
                           at contiguous memory locations.
                           The idea is to store multiple items of 
                           the same type together.
                           This makes it easier to calculate the 
                           position of each element 
                           by simply adding an offset to a base 
                           value, i.e., the memory location of 
                           the first element of the array (generally 
                           denoted by the name of the array).
                       
                   
                   
                       
                           Agree
                       
                       
                           Disagree
                       
                   
               
           
       
       
           $(document).ready(function () {
               $('.modal').modal();
           })
       
   
     
                      

   输出：

   

3. 底部表单模式：模式可以显示在用户屏幕的底部而不是中间。它就像普通模式一样，可以通过单击屏幕上的任意位置以及使用该模式内的按钮来关闭。为此， bottom-sheet类与

   容器中的模态类一起使用。

   例子：

   HTML

     
   
       
     
       
       
       
       
       
   
     
   
       
           Geeks for Geeks
           
           
               Click Here!
           
           
           
               
                   Demo of Bottom sheet Modal
                   
                   
                       Content of the modal goes here. 
                       Type information here. 
                   
                   An array is a collection of items stored at
                   contiguous memory locations.
                   The idea is to store multiple items of the
                   same type together.
                   
               
               
                   
                       Close
                   
               
           
       
       
           $(document).ready(function () {
               $('.modal').modal();
           })
       
   
     
           

   输出：