It looks like you're trying to customize the SweetAlert dialog box by adding specific CSS styles for alignment and button appearances. However, your message was cut off before you could finish describing the styling for the "复制公众号" (Copy Official Account) button. Below is a complete example of what you might be looking for, including the "复制公众号" button with some assumed styles: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Custom SweetAlert Example</title> <link rel="stylesheet" href="https://cdn.ioszn.com/css/sweetalert.css"> <script src="https://cdn.ioszn.com/js/sweetalert.min.js"></script> <style> /* Center align buttons in SweetAlert dialog */ .swal-footer { text-align: center; } /* Add your custom button styles here */ .custom-swal-button { font-size: 14px; padding: 10px 20px; border-radius: 5px; } /* Style for the "确认密码" button */ .swal-button--confirm { background-color: cornflowerblue; /* Change to your desired color */ color: white; /* Text color */ } /* Style for the "复制公众号" button */ .swal-button--copy-account { background-color: #3399ff; color: white; margin-left: 10px; } </style> </head> <body> <script> // Function to trigger the alert function showAlert() { swal({ title: "示例", text: "这是示例文本，你可以在这里写一些需要告诉用户的信息。", icon: "info", buttons: { confirm: { text: "确认密码", className: "swal-button--confirm custom-swal-button", }, copyAccount: { text: "复制公众号", className: "swal-button--copy-account custom-swal-button", }, }, footer: "<span class='swal-footer'>自定义底部内容</span>" }); } // Call the function to show the alert showAlert(); </script> </body> </html> ``` Explanation: 1. CSS Styling: - The `.swal-footer` class centers the buttons. - The `.custom-swal-button` class sets common styles for all buttons. - The `.swal-button--confirm` and `.swal-button--copy-account` classes set specific styles for the "确认密码" and "复制公众号" buttons, respectively. 2. JavaScript Code: - The `showAlert` function creates a SweetAlert dialog with a title, text, and two buttons. - The `buttons` object defines the text and class names for each button. - The `footer` option adds a custom footer to the dialog. This code should help you achieve the desired customizations for your SweetAlert dialog. If you need further customization or have any other questions, feel free to ask! [2024-08-24 22:43:19 | AI写代码神器 | 625点数解答]