将其翻译为“居中的sweetalert输入文本框”,可以使用下列HTML和JavaScript代码实现:
<link href="https://cdn.jsdelivr.net/npm/sweetalert2@10.12.5/dist/sweetalert2.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10.12.5/dist/sweetalert2.min.js"></script>
<div id="myForm">
<label for="firstName">名字:</label>
<input type="text" id="firstName" name="firstName">
</div>
<script>
Swal.fire({
title: '居中的sweetalert输入文本框',
html: document.getElementById('myForm'),
showCancelButton: true,
reverseButtons: true,
focusConfirm: false,
cancelButtonText: '取消',
confirmButtonText: '提交',
customClass: {
container: 'my-swal'
}
})
</script>
在这个例子中,我们使用了SweetAlert2库的HTML模式,将自定义的表单嵌入到模态框的内容中。我们还设置了自定义CSS类“my-swal”,以居中渲染整个模态框。在对话框底部,我们添加了一个提交按钮和一个取消按钮,用户可以根据需要进行选择。