JS中alert和showModal的区别
时间: 2023-12-11 08:32:05 浏览: 34
alert和showModal都是用于在页面中弹出提示框的方法,但是它们有以下几点区别:
1. alert是JavaScript自带的方法,而showModal是微信小程序提供的API。
2. alert只能弹出一个简单的提示框,而showModal可以弹出一个自定义的模态框,可以设置标题、内容、按钮等。
3. alert会阻塞代码的执行,直到用户点击确定按钮才会继续执行下面的代码,而showModal不会阻塞代码的执行,用户点击按钮后会执行相应的回调函数。
下面是一个使用alert和showModal的例子:
```javascript
// 使用alert弹出提示框
alert("Hello World!");
// 使用showModal弹出自定义模态框
wx.showModal({
title: '提示',
content: '这是一个自定义的模态框',
success: function(res) {
if (res.confirm) {
console.log('用户点击确定')
} else if (res.cancel) {
console.log('用户点击取消')
}
}
})
```
相关问题
uni.showModal 用html显示
很抱歉,uni.showModal是uni-app框架中的API,无法在HTML中使用。uni.showModal用于在小程序中显示模态弹窗,可以用于提示用户或获取用户的选择。如果您需要在HTML中显示弹窗,可以使用JavaScript中的alert()、confirm()或者自定义弹窗组件等方法。
将以上代码加上css和js
好的,以下是一个示例的 CSS 和 JavaScript 文件,可以帮助你为物业管理前端代码添加样式和交互效果:
CSS 文件(style.css):
```css
/* 全局样式 */
body {
font-family: Arial, sans-serif;
background-color: #f1f1f1;
}
/* 头部样式 */
header {
background-color: #333;
color: #fff;
padding: 20px;
}
header h1 {
margin: 0;
font-size: 32px;
}
nav {
float: right;
margin-top: 10px;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 20px;
}
nav a {
color: #fff;
text-decoration: none;
}
nav a:hover {
text-decoration: underline;
}
/* 主体样式 */
main {
margin: 20px;
background-color: #fff;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
main h2 {
margin-top: 0;
}
table {
width: 100%;
border-collapse: collapse;
}
table th, table td {
padding: 10px;
border: 1px solid #ccc;
}
table th {
background-color: #f1f1f1;
}
table td button {
padding: 5px 10px;
background-color: #333;
color: #fff;
border: none;
cursor: pointer;
}
table td button:hover {
background-color: #444;
}
/* 表单样式 */
form {
margin-bottom: 20px;
}
form label {
display: inline-block;
width: 80px;
}
form input[type=text] {
width: 200px;
padding: 5px;
border: 1px solid #ccc;
border-radius: 3px;
margin-right: 10px;
}
form button {
padding: 5px 10px;
background-color: #333;
color: #fff;
border: none;
cursor: pointer;
margin-right: 10px;
}
form button:hover {
background-color: #444;
}
form button[type=submit] {
background-color: #007bff;
}
/* 弹出框样式 */
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 9999;
}
.modal-content {
display: inline-block;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
.close {
position: absolute;
top: 5px;
right: 10px;
font-size: 20px;
color: #aaa;
cursor: pointer;
}
.close:hover {
color: #333;
}
/* JavaScript 文件 */
/* 添加事件监听器 */
document.addEventListener('DOMContentLoaded', function() {
// 点击添加按钮,弹出添加房产信息的对话框
document.querySelector('button[type=button][value=add]').addEventListener('click', function() {
showModal('添加房产信息', '房产信息添加成功!');
});
// 点击编辑按钮,弹出编辑房产信息的对话框
document.querySelectorAll('button[type=button][value=edit]').forEach(function(button) {
button.addEventListener('click', function() {
showModal('编辑房产信息', '房产信息修改成功!');
});
});
// 点击删除按钮,弹出确认删除的对话框
document.querySelectorAll('button[type=button][value=delete]').forEach(function(button) {
button.addEventListener('click', function() {
if (confirm('确定要删除该房产信息吗?')) {
alert('房产信息删除成功!');
}
});
});
// 点击关闭按钮,关闭弹出框
document.querySelectorAll('.close').forEach(function(close) {
close.addEventListener('click', function() {
hideModal();
});
});
});
/* 弹出框函数 */
function showModal(title, message) {
// 创建弹出框元素
var modal = document.createElement('div');
modal.classList.add('modal');
// 创建弹出框内容元素
var content = document.createElement('div');
content.classList.add('modal-content');
// 创建标题元素
var heading = document.createElement('h3');
heading.innerText = title;
content.appendChild(heading);
// 创建消息元素
var message = document.createElement('p');
message.innerText = message;
content.appendChild(message);
// 创建关闭按钮元素
var close = document.createElement('span');
close.classList.add('close');
close.innerHTML = '×';
content.appendChild(close);
// 将弹出框内容元素添加到弹出框元素中
modal.appendChild(content);
// 将弹出框元素添加到页面中
document.body.appendChild(modal);
// 显示弹出框
modal.style.display = 'block';
}
/* 关闭弹出框函数 */
function hideModal() {
// 获取弹出框元素
var modal = document.querySelector('.modal');
// 隐藏弹出框
modal.style.display = 'none';
// 删除弹出框元素
modal.remove();
}
```
以上代码中,CSS 文件定义了物业管理系统前端的样式,包括颜色、字体、间距、边框等。JavaScript 文件定义了物业管理系统前端的交互效果,包括添加、编辑、删除房产信息等功能的实现,以及弹出框的显示和关闭等功能。需要注意的是,以上代码仅为示例代码,实际应用中需要根据具体需求进行修改和完善。