html如何写出有两个按钮的弹窗的代码,一个按钮叫”confirm“,一个叫“cancel”
时间: 2024-05-07 08:16:35 浏览: 15
以下是一个简单的通过html实现带有两个按钮的弹出框的代码:
```
<!DOCTYPE html>
<html>
<head>
<title>弹出框</title>
</head>
<body>
<button onclick="myFunction()">打开弹出框</button>
<script>
function myFunction() {
var result = confirm("你确定要执行此操作吗?");
if (result == true) {
alert("你点击了确认按钮!");
} else {
alert("你点击了取消按钮!");
}
}
</script>
</body>
</html>
```
在这个例子中,我们使用了JavaScript的confirm()函数来显示带有“确认”和“取消”两个按钮的弹出框。当用户点击其中一个按钮时,我们可以根据用户的选择作出相应的反应。
相关问题
pyQT5实现:创建一个选项卡弹窗,用于选择是否继续运行
以下是一个简单的pyQT5代码示例,用于创建一个选项卡弹窗,询问用户是否继续运行。
```python
import sys
from PyQt5.QtWidgets import QApplication, QWidget, QTabWidget, QVBoxLayout, QHBoxLayout, QLabel, QPushButton
class TabDialog(QWidget):
def __init__(self):
super().__init__()
self.setWindowTitle('选项卡弹窗')
self.setGeometry(300, 300, 300, 200)
# 创建选项卡控件
self.tab_widget = QTabWidget()
self.tab_widget.addTab(ConfirmTab(), '确认')
self.tab_widget.addTab(CancelTab(), '取消')
# 创建垂直布局
vbox = QVBoxLayout()
vbox.addWidget(self.tab_widget)
# 设置窗口布局
self.setLayout(vbox)
class ConfirmTab(QWidget):
def __init__(self):
super().__init__()
# 创建水平布局
hbox = QHBoxLayout()
# 创建标签和按钮
label = QLabel('是否继续运行?')
confirm_button = QPushButton('确认')
confirm_button.clicked.connect(self.confirm_action)
# 将标签和按钮添加到水平布局中
hbox.addWidget(label)
hbox.addWidget(confirm_button)
# 设置当前选项卡布局
self.setLayout(hbox)
def confirm_action(self):
print('确认')
QApplication.quit()
class CancelTab(QWidget):
def __init__(self):
super().__init__()
# 创建水平布局
hbox = QHBoxLayout()
# 创建标签和按钮
label = QLabel('是否取消运行?')
cancel_button = QPushButton('取消')
cancel_button.clicked.connect(self.cancel_action)
# 将标签和按钮添加到水平布局中
hbox.addWidget(label)
hbox.addWidget(cancel_button)
# 设置当前选项卡布局
self.setLayout(hbox)
def cancel_action(self):
print('取消')
QApplication.quit()
if __name__ == '__main__':
app = QApplication(sys.argv)
dialog = TabDialog()
dialog.show()
sys.exit(app.exec_())
```
在上面的代码中,我们首先创建一个继承自QWidget的TabDialog类,用于显示选项卡弹窗。在TabDialog类的构造函数中,我们创建一个QTabWidget控件,并将两个自定义的选项卡(ConfirmTab和CancelTab)添加到其中。
接下来,我们为每个选项卡创建一个继承自QWidget的子类(ConfirmTab和CancelTab)。在这些子类中,我们使用QHBoxLayout布局来创建一个标签和一个按钮,并将它们添加到水平布局中。然后,我们将这个水平布局设置为当前选项卡的布局。
最后,我们在按钮的clicked信号中连接一个槽函数,以响应用户的操作。在这个示例中,我们只是简单地打印出用户的选择,然后退出应用程序。
给我一个代码案例,首先有一个盒子,盒子旁边有一个按钮,点击按钮之后出现一个弹窗,可以选择改变盒子大小和颜色,都是使用鼠标移入来改变的,然后话有两个按钮一个是确定样式,一个是取消
很高兴为您提供一个代码案例,以下是使用 HTML、CSS 和 JavaScript 实现的盒子大小和颜色改变的弹窗:
HTML 代码:
```
<div id="box"></div>
<button id="btn">改变盒子</button>
<div id="popup">
<h2>改变盒子样式</h2>
<label>宽度:<input type="range" id="width" min="50" max="500" value="200"></label>
<label>高度:<input type="range" id="height" min="50" max="500" value="200"></label>
<label>颜色:<input type="color" id="color" value="#ff0000"></label>
<button id="confirm">确定</button>
<button id="cancel">取消</button>
</div>
```
CSS 代码:
```
#box {
width: 200px;
height: 200px;
background-color: #ff0000;
margin: 20px;
}
#popup {
display: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 20px;
background-color: #fff;
border: 1px solid #ccc;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
#popup label {
display: block;
margin-bottom: 10px;
}
#popup button {
margin-top: 20px;
margin-right: 10px;
}
#confirm {
background-color: #4caf50;
color: #fff;
border: none;
}
#cancel {
background-color: #f44336;
color: #fff;
border: none;
}
```
JavaScript 代码:
```
var box = document.getElementById('box');
var btn = document.getElementById('btn');
var popup = document.getElementById('popup');
var width = document.getElementById('width');
var height = document.getElementById('height');
var color = document.getElementById('color');
var confirm = document.getElementById('confirm');
var cancel = document.getElementById('cancel');
btn.addEventListener('click', function() {
popup.style.display = 'block';
});
confirm.addEventListener('click', function() {
box.style.width = width.value + 'px';
box.style.height = height.value + 'px';
box.style.backgroundColor = color.value;
popup.style.display = 'none';
});
cancel.addEventListener('click', function() {
popup.style.display = 'none';
});
```
当用户点击按钮时,弹窗会出现,用户可以使用滑块和颜色选择器来改变盒子的大小和颜色,然后用户可以点击“确定”按钮来应用更改,或者点击“取消”按钮来关闭弹窗。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)