<!--弹窗代码开始--> <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 "复制公众号" butt
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点数解答]
- <!--弹窗代码开始--> <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 "复制公众号" butt（625点数解答 | 2024-08-24 22:43:19）169
- <!DOCTYPE html> <html> <head> <style> .container { max-width: 600px; margin: 20px auto; padding: 15px; background: #fafafa; } .card { background: white; border-radius: 15px; padding: 20px; margin-bottom: 20px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); } .title { color: #FF4F6D; font-size: 20px; margin: 10px 0; font-weight: bold; } .tag { background: #FFF0F3; color: #FF4F6D; padding: 3px 8px; border-radius: 5px; display: inline-block; margin: 5px 0; } .buttons {（179点数解答 | 2025-03-29 16:06:33）114
- <!DOCTYPE html> <html> <head> <style> body { font-family: 'Arial', sans-serif; background: #fff5f7; padding: 20px; } .container { max-width: 600px; margin: 0 auto; background: white; border-radius: 15px; padding: 25px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); } .title { color: #ff3366; font-size: 24px; text-align: center; padding: 15px; background: #fff0f3; border-radius: 10px; margin-bottom: 20px; } .tip-card { background: #f8f9fa; border-left: 4px solid #f（308点数解答 | 2025-02-26 23:11:57）201
- <!DOCTYPE html> <html> <head> <style> body { background: #fff5f7; font-family: "Microsoft YaHei", sans-serif; padding: 20px; } .container { max-width: 600px; margin: 0 auto; background: white; border-radius: 15px; padding: 25px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); } .title { color: #ff4b6e; font-size: 24px; font-weight: bold; margin-bottom: 15px; text-align: center; } .subtitle { color: #666; font-size: 14px; margin-bottom: 20px; text-align: center; } .（338点数解答 | 2025-02-26 22:59:16）231
- <!DOCTYPE html> <html> <head> <style> body { font-family: Arial, sans-serif; background: #f5f5f5; } .container { max-width: 500px; margin: 20px auto; padding: 20px; background: white; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.1); } .header { text-align: center; font-size: 24px; font-weight: bold; margin-bottom: 20px; color: #333; } .flavor { display: flex; justify-content: space-between; margin: 15px 0; padding: 10px; border-bottom: 1px dashed #ee（1102点数解答 | 2025-06-23 18:32:52）68
- <!DOCTYPE html> <html> <head> <title>PCSP金属盘-AR泡沫玻璃板安装仿真</title> <style> body { font-family: Arial, sans-serif; margin: 20px; } .diagram { background: #f5f5f5; padding: 15px; margin: 10px 0; border-radius: 5px; } pre { background: #eee; padding: 10px; overflow-x: auto; } table { border-collapse: collapse; width: 100%; margin: 15px 0; } th, td { border: 1px solid #ddd; padding: 8px; text-align: left; } button { padding: 8px 12px; margin: 5px（1571点数解答 | 2025-06-16 21:26:05）75
- body { font-family: Arial, sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; margin: 0; background-color: #faf8ef; } header { text-align: center; margin-bottom: 20px; } h1 { font-size: 60px; margin: 0; } button { padding: 10px 20px; font-size: 16px; margin-top: 10px; cursor: pointer; } p { font-size: 24px; margin: 10px 0; } #grid-container { width: 460px;（186点数解答 | 2025-04-24 21:22:45）82
- <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>湖南2025届高考物理公式手册</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/docx/7.4.1/docx.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script> <script src="https://cdnjs.cloudflare.（405点数解答 | 2025-05-28 22:10:21）93
- <!DOCTYPE html> <html> <head> <style> .sunscreen-guide { max-width: 600px; margin: 20px auto; padding: 25px; background: #fff9fb; border-radius: 15px; box-shadow: 0 4px 10px rgba(255,150,180,0.1); font-family: -apple-system, system-ui; } .title { color: #ff5e8e; font-size: 24px; text-align: center; margin-bottom: 25px; position: relative; } .tip-card { background: white; padding: 18px; margin: 15px 0; border-radius: 12px; border-left: 4px solid #ffb6c1; box-（173点数解答 | 2025-02-21 14:42:02）100
- <!DOCTYPE html> <html> <head> <title>从优秀到卓越：数据对比</title> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script> <style> .container { width: 90%; margin: 20px auto; position: relative; } .btn-group { text-align: center; margin: 20px 0; } button { background: #2c3e50; c（1719点数解答 | 2025-06-26 15:47:17）78
- <style>#player { margin: 1px auto; max-width: 100%; border-radius: 10px; display: block; } #xjjsp { display: none; } #ckxjj,#gbxjj { width: 100%; height: 40px; border: none; background-color: #f95491; color: #fff; margin-top: 1px; border-radius: 5px; font-size: 18px; cursor: pointer; transition: 0.2s; } #ckxjj:hover,#gbxjj:hover { background-color: #eeb4bf; } .kzsp { width: 100%; display: flex; justify-content: space-between; } .kzsp>button { border: none; height: 40px; padding: 0 30px; font-siz（35点数解答 | 2024-11-06 20:53:40）141
- <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>工程项目里程碑节点</title> <script src="https://cdn.jsdelivr.net/npm/exceljs/dist/exceljs.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/file-saver/dist/FileSaver.min.js"></script> <style> body { font-family: Arial, sans-serif; margin: 20px; line-height: 1.6; } h1 { （310点数解答 | 2025-05-22 07:42:44）103