modal footer添加自定义按钮

在网页设计中，模态footer通常位于弹出框、对话框或窗口的底部，它包含常见的操作选项，如“确定”、“取消”等。如果你想在modal footer中添加自定义按钮，可以按照以下步骤操作：

1. **HTML结构**:
创建一个新的`<button>`元素，并赋予它适当的class名或ID，以便于CSS和JavaScript进行样式定制：

   <div class="modal-footer">
     <button type="button" class="custom-btn">我的自定义按钮</button>
     <!-- 其他默认按钮，如关闭按钮 -->
     <button type="button" class="close-btn">关闭</button>
   </div>

2. **CSS样式**:
使用CSS为`.custom-btn`添加颜色、大小、图标或其他视觉效果。例如：

   .custom-btn {
     background-color: #4CAF50;
     color: white;
     padding: 10px 20px;
     border: none;
     cursor: pointer;
   }

3. **JavaScript交互**:
如果需要事件处理，比如点击按钮后触发某个函数，可以在脚本中绑定事件监听器：

   document.querySelector('.custom-btn').addEventListener('click', function() {
     // 这里编写你的自定义功能代码
   });