详解JavaScript实现JS弹窗的三种方式
前言
在网页开发中，经常会用到弹窗这个功能。弹窗可以用来展示一些重要信息、提醒用户进行操作，甚至用来进行登录等相关操作。本文将详细介绍 JavaScript 实现三种 JS 弹窗的方式。
方式一：原生 JavaScript 实现
原生 JavaScript 实现弹窗的方式主要使用 window.alert()、window.confirm() 和 window.prompt() 这三个方法实现。
1. window.alert()
window.alert("这是一个 alert 弹窗");
以上代码可以创建一个带有 OK 按钮的弹窗，点击 OK 按钮后弹窗会自动关闭。window.alert() 方法可以用于提醒用户一些信息。
2. window.confirm()
if(window.confirm("你确定要删除这个文件吗？")){
// 用户点击确定按钮
} else {
// 用户点击取消按钮
}
以上代码可以创建一个带有确定和取消按钮的弹窗，如果用户点击确定按钮，程序的执行会跳转到 if 语句的代码块中，否则跳转到 else 语句的代码块中。
3. window.prompt()
var userName = window.prompt("请输入您的名字：");
if (userName != null){
document.write("你好，" + userName + "!");
}
以上代码可以创建一个带有输入框、确定和取消按钮的弹窗。当用户点击确定按钮时，弹窗会返回输入框中的内容。
方式二：使用第三方插件
除了原生 JavaScript 实现外，还可以使用一些第三方插件实现弹窗的效果。其中比较常见的插件有 jQuery UI、SweetAlert、layer 等。
1. jQuery UI
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery UI 弹窗</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<p>This is an example of a basic modal dialog.</p>
</div>
<script>
$( "#dialog" ).dialog();
</script>
</body>
</html>
使用 jQuery UI 实现弹窗需要引入 jQuery 和 jQuery UI 的库文件，并在代码中指定弹窗的标题、内容等相关参数。
2. SweetAlert
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>SweetAlert 弹窗实例</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@10.8.0/dist/sweetalert2.min.css">
</head>
<body>
<button onclick="showAlert()">SweetAlert 弹窗</button>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10.8.0/dist/sweetalert2.min.js"></script>
<script>
function showAlert() {
Swal.fire({
title: '警告',
text: '你确认要删除这条数据吗？',
icon: 'warning',
showCancelButton: true,
cancelButtonText: "取消",
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: '确定'
}).then((result) => {
if (result.isConfirmed) {
Swal.fire(
'已删除!',
'你的数据已被删除。',
'success'
)
}
})
}
</script>
</body>
</html>
使用 SweetAlert 实现弹窗需要引入 SweetAlert 的库文件，并在代码中指定弹窗的标题、内容、图标等相关参数。与 jQuery UI 不同，SweetAlert 的弹窗样式更为美观。
方式三：使用 CSS 实现
除了 JavaScript 和第三方插件实现弹窗外，还可以使用 CSS 和 HTML 实现弹窗的效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS 实现弹窗</title>
<style type="text/css">
.dialog_box{
background-color: #fff;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0px 0px 5px #ccc;
width: 300px;
height: 200px;
position: absolute;
left: 0; right: 0; top: 0; bottom: 0;
margin: auto;
padding: 10px;
text-align: center;
}
.mask{
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
z-index: 100;
display: none;
}
.dialog_box h1{
font-size: 20px;
margin-top: 20px;
}
.dialog_box button{
width: 60px;
margin-top: 30px;
height: 30px;
}
</style>
</head>
<body>
<div class="mask"></div>
<div class="dialog_box">
<h1>欢迎使用弹窗</h1>
<button onclick="hideDialog()">关闭</button>
</div>
<script>
function showDialog(){
document.querySelector('.mask').style.display='block';
document.querySelector('.dialog_box').style.display='block';
}
function hideDialog(){
document.querySelector('.mask').style.display='none';
document.querySelector('.dialog_box').style.display='none';
}
</script>
<button onclick="showDialog()">CSS 弹窗</button>
</body>
</html>
使用 CSS 实现弹窗需要先定义弹窗的样式，再使用 JavaScript 控制弹窗的显示和隐藏。
结束语
以上就是三种实现 JS 弹窗的方式。通过选择不同的方式可以实现不同的效果，读者可以根据自己的需求选择合适的方式。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：详解JavaScript实现JS弹窗的三种方式 - Python技术站
微信扫一扫 
支付宝扫一扫 