纯JS、CSS3实现高仿IOS消息alert弹窗(警告框,确认框,提示框)。老铁们,没毛病。

2023-11-08

消息警告框消息确认框消息提示框

简洁,大方的ios弹窗风格。网上有很多关于alert 弹窗的栗子可以借鉴使用。本文章主要应用在移动端上面的弹窗实现。 在项目没有应用到其他框架弹窗的基础上, 此实例应该可以满足大部分弹窗上的要求,可直接应用于项目之中。使用方法:
1、引入依赖的样式文件和脚本,(也可直接引入非压缩文件,附件包含):

<link href="popup.min.css" type="text/css" rel="stylesheet"/>
<script src="popup.min.js" type="text/javascript"></script>

2、消息警告框的方法实现,具体可参考popup.js 实现逻辑:

可选参数:
message : 提示对话框上显示的内容
title : 提示对话框上显示的标题
buttonCapture : 提示对话框上按钮显示的内容

notice('message','title','buttonCapture')"

3、确认框调用方法实现,具体可参考popup.js 实现逻辑:

可选参数:
message :确认对话框上显示的内容
title : 确认对话框上显示的标题

//弹出确认框
confirms('message','title');

//监听确认框点击“是”的按钮操作逻辑
document.getElementById("confirmY").addEventListener("click",function() {
	alert("true");
})

//监听确认框点击“否”的按钮操作逻辑
document.getElementById("confirmX").addEventListener("click",function() {
	alert("false");
})

4、提示框调用实现,具体可参考popup.js 实现逻辑:

可选参数:
message : 输入对话框上显示的内容
title : 输入对话框上显示的标题
tip : 输入对话框上编辑框显示的提示文字

//弹出提示框
prompts('message','title','tip')

//监听提示框点击“确认”的按钮,并返回编辑框的文本的操作逻辑
document.getElementById("dialogueY").addEventListener("click",function() {
	var promptObtain = document.getElementsByName("promptObtain")[0].value;
		alert(promptObtain);
	});

//监听提示框点击“取消”的按钮的操作逻辑
document.getElementById("dialogueX").addEventListener("click",function() {
	alert("取消");
});

附件Demo:
http://download.csdn.net/download/china_guanq/9949748

QQ群:595377655。问题总是能出现并着手解决的地方,欢迎加入。

在这里插入图片描述

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

纯JS、CSS3实现高仿IOS消息alert弹窗(警告框,确认框,提示框)。老铁们,没毛病。 的相关文章

  • Firebase 更改显示在谷歌登录警报上的应用程序名称?

    我有一个 firebase 项目 但不知何故我输错了应用程序名称 有没有办法更改谷歌登录警报上显示的应用程序名称 您应该更改项目中的产品名称
  • 在提交表单之前添加确认提醒

    我有一个表单允许用户从数据库中删除一些数据 我想要一些确认信息以防止意外删除 我想做以下事情 按下提交后 会弹出警告 您确定吗 如果用户点击 是 则运行脚本 如果用户点击 否 则不要提交脚本 如何才能做到这一点 我已经添加了 onSubmi
  • Windows Phone 8 中的弹出窗口

    我想显示一个弹出窗口 其中媒体元素作为一个控件 当用户单击按钮时 我必须显示此弹出窗口 当用户单击设备的后退按钮时 应关闭弹出窗口 请帮助我如何在 Windows Phone 8 应用程序中执行此操作 带 MediaElement 的弹出窗
  • 想要 javascript 中 $bhai 的值

    bin sh echo Content type text html echo echo echo echo echo echo
  • 卸载警报错误“NS_ERROR_NOT_AVAILABLE”

  • 为什么从移动设备触发时我的触发状态为“已暂停”

    我使用 Google 表格中的数据验证实现了按钮单击解决方法功能 并且每当从移动设备执行触发器时 它都处于 暂停 状态 当执行此触发器时 我将显示对话框 当从浏览器执行时 该对话框工作得非常好 代码片段 function onSheetEd
  • Java fxml 应用程序无法正常工作 - 找不到符号错误

    我从下载了一个java fxml应用程序https github com HassanAlthaf AlarmApplication当我尝试运行它时 从 MainView java 类中收到 找不到符号 错误 这是 Mainview jav
  • 甜蜜警报功能不显示消息

    我试图在将记录插入数据库后显示一条警报消息 并且正常的 js 警报工作正常 其代码是 echo echo exit 但是 当我使用 sweet Alert 函数而不是普通的 js 函数时 它不会显示
  • 在 javascript 警报中编写 php

    我用以下方式在JS中编写PHP alert echo Error login 关联一个xml 用symfony翻译成两种语言 但现在不起作用 我该如何解决 您缺少引号alert call alert
  • 带 2 个按钮的警报

    我将在我的应用程序中添加一个指向网站的链接 用户将单击一个显示 网站 的按钮 然后将出现一个带有 2 个按钮的警报 其中一个按钮只是取消按钮 另一个按钮将打开网站 你能帮我解决这个问题吗 Thanks 将其放入您的头文件中 interfac
  • 检测页面上是否显示警报或确认

    有没有办法使用 JavaScript 或 jQuery 来检测是否显示确认框或警报框 如果您想在以下情况下运行一些代码alert 火灾 你可以尝试这样的事情 我只在 Chrome 中进行了测试 所以我不确定浏览器是否支持 Example h
  • 使用应用程序期间可达性连接丢失时弹出警报(IOS xcode swift)

    我是 IOS 应用程序开发的初学者 希望 在使用应用程序期间失去可达性连接时弹出警报 IOS xcode swift 但我只在启动我的应用程序时收到弹出警报 当互联网连接丢失时 使用我的应用程序时不会弹出警报 请各位好心人帮忙 谢谢 我做了
  • Android - 通知后删除接近警报

    我想做的是拥有一个接近警报服务 当您步入半径范围内时 不停止服务 该服务仅触发一次通知 每次您步入半径内和每次您走出半径时 我的代码都会触发通知 我一直在尝试使用布尔值和removeProximityAlert 但没有成功 有任何想法吗 i
  • 如何接收短信并根据短信内容拨打电话提醒某人?

    因此 我尝试接收传入的短信 并根据短信的内容拨打带有特定录音的电话 例如 我有一个带调制解调器的门传感器 可以在门打开或关闭时向我的 twilio 发送文本 如果 Twilio 收到 门已打开 文本 则 twilio 将拨打我的手机并播放显
  • 如何在vue中创建警报确认框

    我想在删除文件之前显示一个对话框 我如何用vue做到这一点 这是我尝试的 我的删除文件按钮 a href Delete a 这是我的删除方法 DeleteUser id index axios delete api artist id th
  • Javascript 和 AJAX,仅在使用alert()时有效

    我的 JavaScript 遇到问题 它的行为似乎很奇怪 这就是正在发生的事情 我有一个表单 在用户提交后 它调用一个函数 onsubmit 事件 来验证提交的数据 如果有问题或者用户名 电子邮件已经在数据库中 这部分使用 ajax 它将返
  • 具有多个选项的警报

    只是想知道 是否可以创建具有多个选项的警报 例如 在 Facebook 中 当您在未完成输入消息的情况下尝试关闭选项卡 窗口时 会弹出一条带有 离开此页面 和 留在此页面 选项的警报 以表单为例 您正在寻找 window onbeforeu
  • 使用 MVVM 在 SwiftUI 中呈现警报

    我正在尝试使用 SwiftUI 和 MVVM 架构构建一个应用程序 我希望我的视图在其 ViewModel 认为有必要时 例如 当它从模型中获得某种新结果时 显示警报 因此 假设每当虚拟机检测到新结果时 它就会设置其status因此 视图模
  • 如何使用 Prometheus 警报规则检测新指标

    假设我有一个指标request failures对于用户 对于每个用户 我向指标添加一个唯一的标签值 所以对于用户来说u1 当请求失败两次时 我得到以下指标 request failures user name u1 2 我还有一条规则 当
  • Android 删除接近警报

    我正在开发处理接近警报的应用程序 我可以添加接近警报 但无法删除这些接近警报 我已经在手机和虚拟设备上尝试过我的代码 但无法删除它们 这是我的代码 将位置保存到数据库并添加接近警报的活动 saveButton setOnClickListe

随机推荐