js 自定义 实现 弹出式确认窗口的代码
时间: 2024-03-05 21:53:36 浏览: 25
以下是一个简单的 JavaScript 弹出式确认窗口的实现:
```html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Confirm Box</title>
</head>
<body>
<h1>JavaScript Confirm Box Example</h1>
<button onclick="showConfirm()">Show Confirm Box</button>
<script>
function showConfirm() {
var result = confirm("Are you sure you want to delete this item?");
if (result) {
alert("Item deleted successfully!");
} else {
alert("Delete operation cancelled.");
}
}
</script>
</body>
</html>
```
在这个例子中,当用户点击 "Show Confirm Box" 按钮时,会弹出一个确认窗口,询问用户是否确定删除某个项目。如果用户点击确认按钮,则会显示一个警告框,表示项目已经成功删除。如果用户点击取消按钮,则会显示一个警告框,表示删除操作已被取消。
相关问题
js 实现 自定义的弹出式确认窗口的代码
实现自定义的弹出式确认窗口需要用到 HTML、CSS 和 JavaScript。以下是一个简单的实现例子:
HTML 代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>Custom Confirm Box</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Custom Confirm Box Example</h1>
<button onclick="showConfirm()">Show Confirm Box</button>
<div id="confirm-box">
<div id="confirm-message"></div>
<div id="confirm-buttons">
<button id="confirm-yes" onclick="confirmYes()">Yes</button>
<button id="confirm-no" onclick="confirmNo()">No</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
```
CSS 代码:
```css
#confirm-box {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
border: 1px solid #ccc;
padding: 20px;
}
#confirm-message {
margin-bottom: 20px;
}
#confirm-buttons {
text-align: right;
}
#confirm-yes, #confirm-no {
margin-left: 10px;
}
```
JavaScript 代码:
```js
var confirmBox = document.getElementById("confirm-box");
var confirmMessage = document.getElementById("confirm-message");
var confirmYes = document.getElementById("confirm-yes");
var confirmNo = document.getElementById("confirm-no");
function showConfirm() {
confirmBox.style.display = "block";
confirmMessage.innerHTML = "Are you sure you want to delete this item?";
}
function confirmYes() {
confirmBox.style.display = "none";
alert("Item deleted successfully!");
}
function confirmNo() {
confirmBox.style.display = "none";
alert("Delete operation cancelled.");
}
```
在这个例子中,我们创建了一个自定义的确认框。当用户点击 "Show Confirm Box" 按钮时,会弹出一个确认框,询问用户是否确定删除某个项目。如果用户点击确认按钮,则会显示一个警告框,表示项目已经成功删除。如果用户点击取消按钮,则会显示一个警告框,表示删除操作已被取消。我们使用 CSS 对确认框进行样式设置,使用 JavaScript 来控制确认框的显示和隐藏,以及处理确认和取消操作。
html 响应式弹层插件,纯js响应式模态窗口和弹出层插件MODALit
MODALit是一个基于纯JavaScript开发的响应式模态窗口和弹出层插件,它可以帮助你在网页中轻松地添加弹出层和模态窗口。该插件具有以下特点:
1. 响应式设计:可以根据屏幕大小自动调整弹出层的大小和位置,保证在不同设备上都能正常显示。
2. 简单易用:只需引入插件文件并调用相应的方法即可创建弹出层或模态窗口。
3. 多种样式:提供了多种预设样式,同时也支持自定义样式,可以满足不同需求。
4. 动画效果:支持多种动画效果,如淡入淡出、滑动等,可以增加用户体验。
5. 兼容性良好:支持主流浏览器,包括IE8+,Chrome,Firefox等。
总之,MODALit是一个功能强大、易于使用、兼容性良好的响应式弹层插件,可以帮助你快速实现弹出层和模态窗口功能。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_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)