如何在引导程序中更改模式关闭按钮的位置？

模态组件是显示在页面顶部的对话框或弹出窗口。模态既可以用作警报窗口，也可以接受某些输入值。

基本模态示例：要更改关闭按钮的位置，我们需要创建一个模态元素。下面的代码将创建一个非常基本的模态。

HTML

    
        Modal Closing Button
        
        
        
        
        
        
        
  
        
        
        
        
  
        
        
        
            .center {
                margin: 0 auto;
                text-align: center;
                justify-content: center;
            }
            .btn-div {
                margin-top: 20px;
            }
        
    
    
        
            
                
                    
                    
                        
                          Modal Heading
                        
                        
                            ×
                        
                    
  
                    
                    
                        Modal Body
                    
  
                    
                    
                        Modal Footer
                    
                
            
        
        
            
                
            
            
            
                Open Modal
            
        
    

输出：

方法：在上面，您可以观察到模式标题内具有class =“ close”的按钮。该按钮用于关闭模态元素。 data-dismiss属性用于切换模式元素的显示样式。

      ×

• ＆times;给出十字图标。
• 数据删除将模式元素的显示属性从“块”切换为“无”。
• 您可以将该按钮描述从标题移动到整个模式分区内的任何位置，以移动关闭按钮，也可以声明自己的额外关闭按钮。

以下是上述步骤的实现方法。

方法1：移动按钮说明。

的HTML

    
        Modal Closing Button
        
        
        
        
        
        
  
        
        
  
        
        
  
        
        
        
            .center {
                margin: 0 auto;
                text-align: center;
                justify-content: center;
            }
            .btn-div {
                margin-top: 20px;
            }
        
    
    
        
            
                
                    
                    
                        
                          Modal Heading
                        
  
                        
                    
  
                    
                    
                        Modal Body
  
                        
                        
                            ×
                        
                    
  
                    
                    
                        Modal Footer
                    
                
            
        
        
            
                
            
            
            
                Open Modal
            
        
    

输出：由于该按钮已移至主体部分，因此该按钮出现在模式元素的主体部分中。

方法2：使用data-dismiss属性定义自己的关闭按钮。

的HTML

    
        Modal Closing Button
        
        
        
        
        
        
  
        
        
        
        
  
        
        
        
            .center {
                margin: 0 auto;
                text-align: center;
                justify-content: center;
            }
            .btn-div {
                margin-top: 20px;
            }
        
    
    
        
            
                
                    
                    
                        
                          Modal Heading
                        
                        
                            ×
                        
                    
  
                    
                    
                        Modal Body
                    
  
                    
                    
                        Modal Footer
  
                        
                        
                            Close Modal
                        
                    
                
            
        
        
            
                
            
            
            
                Open Modal
            
        
    

输出：模态页脚部分中提供了一个新的关闭按钮。