自定义JavaScript confirm与alert提示框文字实例教程
版权申诉
5星 · 超过95%的资源 139 浏览量
更新于2024-09-11
收藏 56KB PDF 举报 "这篇教程将展示如何在JavaScript中自定义`alert`和`confirm`对话框的文字内容，创建一个自定义的提示窗口。"
在网页开发中，`alert`、`confirm`和`prompt`是JavaScript提供的内置函数，用于与用户进行简单的交互。它们会弹出一个系统级别的对话框，显示预设的信息并等待用户的回应。`alert`用于显示一条消息，`confirm`用于显示一条消息并要求用户确认，`prompt`则用于获取用户输入。然而，这些对话框的样式和内容通常无法直接自定义。要改变它们的外观或文字，我们需要创建自定义的弹窗。
在本实例中，我们将创建一个自定义的`confirm`对话框，以显示自定义的文字内容。首先，我们需要在HTML中构建一个模拟对话框的结构：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
/* 添加CSS样式以美化对话框 */
</style>
</head>
<body>
<!-- 创建自定义对话框元素 -->
<div id="selfWindow">
<!-- 包含对话框内容的区域 -->
<div id="selInfo">这里是自定义的确认信息</div>
<!-- 添加关闭按钮 -->
<div id="selfClose"></div>
<!-- 创建按钮容器 -->
<div id="selfBtnBox">
<!-- 自定义确认按钮 -->
<button class="selfBtn" onclick="customConfirm()">确认</button>
<!-- 自定义取消按钮 -->
<button class="selfBtn" onclick="closeSelfWindow()">取消</button>
</div>
</div>
<!-- JavaScript代码段 -->
<script>
function customConfirm() {
// 在这里处理确认操作
}
function closeSelfWindow() {
// 隐藏自定义对话框
}
</script>
</body>
</html>
```
在这个例子中，`#selfWindow`是自定义对话框的容器，`#selInfo`用于显示确认信息，而`#selfClose`是一个关闭按钮。通过CSS，我们可以自由地调整这些元素的样式，使其符合我们的设计需求。
接着，我们需要编写JavaScript来控制这个自定义对话框的行为。`customConfirm`函数应该包含你希望在用户点击“确认”时执行的逻辑，而`closeSelfWindow`函数则负责隐藏对话框。你可以根据需要添加更多的交互功能，例如动画效果、键盘响应等。
当需要调用`confirm`函数时，可以使用这个自定义对话框来替代。例如，原生的`confirm("是否继续?")`可以替换为显示自定义对话框并捕获用户的选择。
请注意，虽然这个方法可以提供更丰富的用户体验，但自定义对话框可能不适用于所有场景，因为它们不会像系统级对话框那样阻止页面的其他操作。在某些情况下，可能需要使用模态组件（modal）或者第三方库如SweetAlert来实现更复杂的需求。
这个实例展示了如何利用HTML、CSS和JavaScript来创建一个可自定义的确认提示框，从而替代JavaScript原生的`confirm`函数。这不仅可以改变对话框的文字内容，还能扩展其功能和视觉效果，提高用户体验。
修改修改js confirm alert 提示框文字的简单实例提示框文字的简单实例
下面小编就为大家带来一篇修改js confirm alert 提示框文字的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
修改修改js confirm alert 提示框文字的简单实例提示框文字的简单实例
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<style>
*{padding: 0; margin: 0;}
html{
height: 100%;
}
body{
font-size: 16px; font-family: "Microsoft Yahei"; height: 100%;
}
h1,h2,h3{
font-weight: lighter;
}
a{
text-decoration: none;
}
#selfWinsow{
width: 60%; margin: 0 20%; background: #fff; position: fixed;top: 35%;border: 1px solid #ccc; padding: 0 2% 2% 2%;
}
#slefClose{
width: 25px; height: 25px; position: absolute;right: 1rem; top: 0.4rem; z-index: 9999; cursor: pointer;
}
#slefClose::after{
position: absolute; width: 30px; height: 30px; content: "×"; font-size: 2.5rem; line-height: 30px;
}
#selfWinsow h2{
font-size: 1rem; border-bottom: 1px solid #ccc; line-height: 100%; padding:1rem 0;
}
#selInfo{
font-size: 0.95rem; line-height: 2.1rem; padding: 0.5rem;
}
#selfBtBox{
padding: 1rem; margin: 0px auto; border: 1px solid #ccc; overflow: hidden;
}
.selfBt{
padding: 0.8rem 2%;background: #323434; color: #fff; float: left; line-height: 100%; text-align: center; cursor: pointer;
}
.selfBtDouble{
width: 46%;
}
.selfBtSingle{
color: #fff; width: 100%; padding: 0.8rem 0;
}
#selfOk{
background: #323434;
}
.selftalkNo{
float: left;
position: relative;
top: -5px;
padding: 4px 10px;
display: inline-block;
margin-left: 5px;
color: #000;
}
.selftalkOk{
float: right;
position: relative;
top: -5px;
display: inline-block;
margin-right: 5px;
padding: 4px 10px;
color: #fff;
}
#selfNo,#linkTo2{
background: #eeeeee; color: #555555
}
#selfBack{
width: 100%; background: rgba(0,0,0,.6);
}
#selfInput{
display: block;
width: 100%; padding: 0.5rem 0; border: 1px solid #eee; border-radius: 3px; margin-bottom: 1rem; text-indent: 0.6rem
}
#selfInput:focus{
border: 1px solid #087690;
}
</style>
<title></title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<!--<script type="text/javascript" src="SelfWindow.js"></script>-->
<script>
/*
*selfWindow组建，主要是用于模拟移动网站的alert(),confirm()窗口点解某一按钮跳转到某一个页面的效果,
*因为给予移动web，所以没有兼容低版本ie
*调用方法：var win = new SelfWinsow({
* types : "confirm",//这里可以选择的参数有，alert,confirm,confirm2,link
* slefTitle : "香送网温馨提示",//弹窗标题
* selfInfo : "Are you really to remove this tool?",//弹窗信息
* selfOk : "YES",//自定义确定按钮文字
* selfNo : "NO",//自定义否认按钮文字
* callback:fn,//当types为confirm,confirm2或者是talk时的回调函数，confirm为模拟
*/
var SelfWinsow = function(settings){this.init(settings)};
SelfWinsow.prototype = {
init:function(settings){
this.opts = {
types : "",
slefTitle : "",
selfInfo : typeof settings == "string" ? settings : "if have any incorrect , and you will continue?",
selfOk : "continue operator the deposit",
selfNo : "back loading page"
};
this.setting(settings);
if(typeof settings == "string"){
this.opts.selfInfo == settings;
}
if(settings == "" || settings == undefined || settings == null){
this.selfAlert();
}else if(settings.types == "confirm"){
this.selfConfirm();
}else if(settings.types == "confirm2"){
this.selfConfirm2();
}else if(settings.types == "link"){
this.selfLink();
下载后可阅读完整内容，剩余3页未读，立即下载
2023-12-01 上传
2023-05-25 上传
2024-09-15 上传
2023-09-26 上传
2023-11-14 上传
2023-06-09 上传
weixin_38568031
- 粉丝: 5
- 资源: 895
我的内容管理
展开
最新资源
- 李兴华Java基础教程：从入门到精通
- U盘与硬盘启动安装教程：从菜鸟到专家
- C++面试宝典：动态内存管理与继承解析
- C++ STL源码深度解析：专家级剖析与关键技术
- C/C++调用DOS命令实战指南
- 神经网络补偿的多传感器航迹融合技术
- GIS中的大地坐标系与椭球体解析
- 海思Hi3515 H.264编解码处理器用户手册
- Oracle基础练习题与解答
- 谷歌地球3D建筑筛选新流程详解
- CFO与CIO携手：数据管理与企业增值的战略
- Eclipse IDE基础教程：从入门到精通
- Shell脚本专家宝典：全面学习与资源指南
- Tomcat安装指南：附带JDK配置步骤
- NA3003A电子水准仪数据格式解析与转换研究
- 自动化专业英语词汇精华：必备术语集锦
