物化 CSS–模式

原文:https://www.geeksforgeeks.org/materialize-css-modals/

物化 CSS 使用模态组件来创建对话框、确认消息或向查看者呈现重要内容，其中底层内容在模态窗口关闭之前变得不活动。

为了让模态工作，将模态 Id 添加到触发器的链接中，并在网页上包含引用物化. min.js 和 jQuery。要添加“关闭”按钮，将类模式-关闭添加到您的按钮。

情态动词的类型:

  1. 基本模态:基本模态由内容和页脚组成。模态内容类被称为“主”div，而模态页脚类位于另一个“div”标签中，其中使用了“动作”按钮。

    示例:

    超文本标记语言

    ```html <!DOCTYPE html>

        

                       

        
            

    Geeks for Geeks

                                  Click Here!         

            

        
                 $(document).ready(function () {             $('.modal').modal();         }         )     

    ```

    输出:

  2. 带固定页脚的模态:如果内容较大，则使用这种类型的模态。在这种情况下，我们可以创建固定的“动作”按钮。为此，模态固定页脚类与主容器元素中的模态类一起使用。

    示例:

    超文本标记语言

    ```html <!DOCTYPE html>

        

                       

        
            
                

    Geeks for Geeks

                                              Click Here!             

                

            
        
                 $(document).ready(function () {             $('.modal').modal();         })     

                        ```

    输出:

  3. 底稿模态:模态可以显示在用户屏幕的底部，而不是中间。它就像普通模式一样，可以通过点击屏幕上的任何地方以及使用模式内的按钮来关闭。为此，底层类与< div >容器中的模态类一起使用。

    示例:

    超文本标记语言

    ```html <!DOCTYPE html>

        

                       

        
            

    Geeks for Geeks

                                  Click Here!                                
                 $(document).ready(function () {             $('.modal').modal();         })     

             ```

    输出:

版权属于：月萌API www.moonapi.com，转载请注明出处

本文链接：https://www.moonapi.com/news/8045.html