请帮我生成一个西门子Opcenter Execution Foundation风格的html对话框,对话框里有个下拉菜单和一个富文本框,还有确认按钮和取消按钮
时间: 2023-12-06 19:45:35 浏览: 89
好的,以下是一个示例代码,可以参考一下:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Opcenter Execution Foundation 对话框</title>
<style type="text/css">
/* 对话框样式 */
.dialog {
width: 400px;
height: 300px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0,0,0,.2);
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
z-index: 9999;
padding: 20px;
box-sizing: border-box;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
font-size: 14px;
color: #333;
}
/* 下拉菜单样式 */
.select {
display: block;
margin-bottom: 10px;
padding: 5px;
background-color: #f5f5f5;
border: 1px solid #ddd;
border-radius: 3px;
width: 100%;
box-sizing: border-box;
}
/* 富文本框样式 */
.rich-text {
display: block;
margin-bottom: 10px;
padding: 5px;
background-color: #f5f5f5;
border: 1px solid #ddd;
border-radius: 3px;
width: 100%;
height: 200px;
box-sizing: border-box;
}
/* 按钮样式 */
.btn {
display: inline-block;
padding: 5px 10px;
background-color: #0073c6;
color: #fff;
border: none;
border-radius: 3px;
cursor: pointer;
margin-right: 10px;
}
.btn:hover {
background-color: #0060a3;
}
</style>
</head>
<body>
<!-- 对话框 -->
<div class="dialog">
<!-- 下拉菜单 -->
<select class="select">
<option value="">请选择</option>
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
<option value="4">选项4</option>
</select>
<!-- 富文本框 -->
<textarea class="rich-text"></textarea>
<!-- 按钮组 -->
<div>
<button class="btn confirm">确认</button>
<button class="btn cancel">取消</button>
</div>
</div>
<!-- 引入 jQuery 库 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- JS 代码 -->
<script type="text/javascript">
$(function() {
// 确认按钮点击事件
$('.confirm').click(function() {
// 获取下拉菜单和富文本框的值
var selectValue = $('.select').val();
var richTextValue = $('.rich-text').val();
// TODO:处理确认操作
});
// 取消按钮点击事件
$('.cancel').click(function() {
// TODO:处理取消操作
});
});
</script>
</body>
</html>
```
阅读全文
相关推荐














