轻松搞懂javascript中的弹框样式

您所在的位置:网站首页 js边框样式 轻松搞懂javascript中的弹框样式

轻松搞懂javascript中的弹框样式

2023-01-05 06:13| 来源: 网络整理| 查看: 265

三种弹出框都属于window对象,完整写作window.alter,三种弹出框都可省略window.

基本使用方法alert

alert弹出警告框,只有一个确定按钮

alert("快点我");

alert()函数会在浏览器中间偏上的位置弹出一个小窗口,显示一些代码中定义好的信息,并等待用户点击确定。

我们通常称这个弹出的窗口为对话框,实际上它的学名叫做模态窗(modal),模态框的作用是强制要求用户和窗体交互,否则无法继续操作页面的其他部分。

confirm

confirm弹出确认框,有两个按钮:确定和取消,分别返回true和false,用于向用户发送一个选择性问题,这个问题只有是否两个答案,例如:你确定是18岁?

语法:

result = confirm(question);

question是confirm函数要显示的问题。

prompt

prompt弹出提示框,确定,取消,输入框,确定返回输入框的值(不输入为空""),取消返回Null

msg = prompt(title,[default]) title:弹窗的标题,通常是提示语句或者疑问句,例如:请输入年龄、您今年几岁了? 这是一个提示框,确定返回输入值,取消返回Null" default[可选]:"输入框内默认文本",弹窗可以通过default赋予初始值。

alert的主要作用是提醒或告知用户一条消息,如果希望得到用户更多的反馈,就需要使用prompt。

prompt可以使浏览器弹出一个带有标题和输入框的弹窗,通过弹窗的输入框就能得到用户输入的数据。

let age = prompt('请输入您的年龄?',38); let name = prompt('请输入您的名字。','悟空'); alert(`${name}今年${age}岁了。`);代码测试 弹出框测试 弹出框测试 警告框 确认框 提示框

function test_1(){ alert(("这是一个警告框")); } function test_2(){ test2 = confirm("这是一个确认框,确定返回true,取消返回false"); document.getElementById("demo").innerHTML = test2; } function test_3(){ var test3 = prompt("这是一个提示框,确定返回输入值,取消返回Null","输入框内默认文本"); document.getElementById("demo").innerHTML = test3; } 实验效果https://www.zhihu.com/video/1592964201173123072

以上案例同时使用了prompt、confirm、alert三种弹窗方式,这也正应对了三种交互方式,即询问确认告知



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3