整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

javascript中的window.open方法详

javascript中的window.open方法详解

、window.open()支持环境：
JavaScript1.0+/JScript1.0+/Nav2+/IE3+/Opera3+

二、基本语法：
window.open(pageURL,name,parameters)
其中：
pageURL 为子窗口路径
name 为子窗口句柄
parameters 为窗口参数(各参数用逗号分隔)

三、示例：

<SCRIPT> 
<!-- 
window.open ('page.html','newwindow','height=100,width=400,top=0,left=0,toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no') 
//写成一行 
--> 
</SCRIPT>


　　脚本运行后，page.html将在新窗体newwindow中打开，宽为100，高为400，距屏顶0象素，屏左0象素，无工具条，无菜单条，无滚动条，不可调整大小，无地址栏，无状态栏。请对照。
　　上例中涉及的为常用的几个参数，除此以外还有很多其他参数，请见四。

四、各项参数
　　其中yes/no也可使用1/0；pixel value为具体的数值，单位象素。

参数 | 取值范围 | 说明

alwaysLowered | yes/no | 指定窗口隐藏在所有窗口之后
alwaysRaised | yes/no | 指定窗口悬浮在所有窗口之上
depended | yes/no | 是否和父窗口同时关闭
directories | yes/no | Nav2和3的目录栏是否可见
height | pixel value | 窗口高度
hotkeys | yes/no | 在没菜单栏的窗口中设安全退出热键
innerHeight | pixel value | 窗口中文档的像素高度
innerWidth | pixel value | 窗口中文档的像素宽度
location | yes/no | 位置栏是否可见
menubar | yes/no | 菜单栏是否可见
outerHeight | pixel value | 设定窗口(包括装饰边框)的像素高度
outerWidth | pixel value | 设定窗口(包括装饰边框)的像素宽度
resizable | yes/no | 窗口大小是否可调整
screenX | pixel value | 窗口距屏幕左边界的像素长度
screenY | pixel value | 窗口距屏幕上边界的像素长度
scrollbars | yes/no | 窗口是否可有滚动栏
titlebar | yes/no | 窗口题目栏是否可见
toolbar | yes/no | 窗口工具栏是否可见
Width | pixel value | 窗口的像素宽度
z-look | yes/no | 窗口被激活后是否浮在其它窗口之上

=====================================================


【1、最基本的弹出窗口代码】
　　其实代码非常简单：

<SCRIPT LANGUAGE="javascript"> 
<!-- 
window.open ('page.html') 
--> 
</SCRIPT>

　　因为着是一段javascripts代码，所以它们应该放在<SCRIPT LANGUAGE="javascript">标签和</script>之间。<!-- 和 -->是对一些版本低的浏览器起作用，在这些老浏览器中不会将标签中的代码作为文本显示出来。要养成这个好习惯啊。
　　Window.open ('page.html') 用于控制弹出新的窗口page.html，如果page.html不与主窗口在同一路径下，前面应写明路径，绝对路径(http://)和相对路径(../)均可。用单引号和双引号都可以，只是不要混用。
　　这一段代码可以加入HTML的任意位置，<head>和</head>之间可以，<body>间</body>也可以，越前越早执行，尤其是页面代码长，又想使页面早点弹出就尽量往前放。

【2、经过设置后的弹出窗口】

　　下面再说一说弹出窗口的设置。只要再往上面的代码中加一点东西就可以了。
　　我们来定制这个弹出的窗口的外观，尺寸大小，弹出的位置以适应该页面的具体情况。

<SCRIPT LANGUAGE="javascript"> 
<!-- 
window.open ('page.html', 'newwindow', 'height=100, width=400, top=0,left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no') 
//写成一行 
--> 
</SCRIPT>


参数解释：
<SCRIPT LANGUAGE="javascript"> js脚本开始；
window.open 弹出新窗口的命令；
'page.html' 弹出窗口的文件名；
'newwindow' 弹出窗口的名字（不是文件名），非必须，可用空''代替；
height=100 窗口高度；
width=400 窗口宽度；
top=0 窗口距离屏幕上方的象素值；
left=0 窗口距离屏幕左侧的象素值；
toolbar=no 是否显示工具栏，yes为显示；
menubar，scrollbars 表示菜单栏和滚动栏。
Resizable=no 是否允许改变窗口大小，yes为允许；
location=no 是否显示地址栏，yes为允许；
status=no 是否显示状态栏内的信息（通常是文件已经打开），yes为允许；
</SCRIPT> js脚本结束

【3、用函数控制弹出窗口】

　　下面是一个完整的代码。

<html> 
<head> 
<script LANGUAGE="JavaScript"> 
<!-- 
function openwin() { window.open ("page.html", "newwindow", "height=100, width=400, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no") 
//写成一行 
} 
//--> 
</script> 
</head> 
<body onload="openwin()"> 
…任意的页面内容… 
</body> 
</html>


这里定义了一个函数openwin(),函数内容就是打开一个窗口。在调用它之前没有任何用途。
怎么调用呢？
方法一：<body onload="openwin()"> 浏览器读页面时弹出窗口；
方法二：<body onunload="openwin()"> 浏览器离开页面时弹出窗口；
方法三：用一个连接调用：
<a href="#" onclick="openwin()">打开一个窗口</a>
注意：使用的"#"是虚连接。
方法四：用一个按钮调用：
<input type="button" onclick="openwin()" value="打开窗口">

【4、同时弹出2个窗口】

　　对源代码稍微改动一下：

<script LANGUAGE="JavaScript"> 
<!-- 
function openwin() 
{ window.open ("page.html", "newwindow", "height=100, width=100, top=0,left=0,toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no") 
//写成一行 
window.open ("page2.html", "newwindow2", "height=100, width=100, top=100, left=100,toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no") 
//写成一行 
} 
//--> 
</script>


　　为避免弹出的2个窗口覆盖，用top和left控制一下弹出的位置不要相互覆盖即可。最后用上面说过的四种方法调用即可。
注意：2个窗口的name(newwindows和newwindow2)不要相同，或者干脆全部为空。OK？

【5、主窗口打开文件1.htm，同时弹出小窗口page.html】

　　如下代码加入主窗口<head>区：

<script language="javascript"> 
<!-- 
function openwin() 
{window.open("page.html","","width=200,height=200") 
} 
//--> 
</script>


　　加入<body>区：
<a href="1.htm" onclick="openwin()">open</a>即可。

【6、弹出的窗口之定时关闭控制】

　　下面我们再对弹出的窗口进行一些控制，效果就更好了。如果我们再将一小段代码加入弹出的页面(注意是加入到page.html的HTML中，可不是主页面中，否则…)，让它10秒后自动关闭是不是更酷了？
　　首先，将如下代码加入page.html文件的<head>区：

<script language="JavaScript"> 
function closeit() 
{setTimeout("self.close()",10000) //毫秒} 
</script>


　　然后，再用<body onload="closeit()"> 这一句话代替page.html中原有的<BODY>这一句就可以了。(这一句话千万不要忘记写啊！这一句的作用是调用关闭窗口的代码，10秒钟后就自行关闭该窗口。)

【7、在弹出窗口中加上一个关闭按钮】

<FORM> 
<INPUT TYPE='BUTTON' VALUE='关闭' onClick='window.close()'> 
</FORM>


　　呵呵，现在更加完美了！

【8、内包含的弹出窗口-一个页面两个窗口】

　　上面的例子都包含两个窗口，一个是主窗口，另一个是弹出的小窗口。
　　通过下面的例子，你可以在一个页面内完成上面的效果。

<html> 
<head> 
<SCRIPT LANGUAGE="JavaScript"> 
function openwin() 
{OpenWindow=window.open("", "newwin", "height=250, width=250,toolbar=no,scrollbars="+scroll+",menubar=no"); 
//写成一行 
OpenWindow.document.write("<TITLE>例子</TITLE>") 
OpenWindow.document.write("<BODY BGCOLOR=#ffffff>") 
OpenWindow.document.write("<h1>Hello!</h1>") 
OpenWindow.document.write("New window opened!") 
OpenWindow.document.write("</BODY>") 
OpenWindow.document.write("</HTML>") 
OpenWindow.document.close()} 
</SCRIPT> 
</head> 
<body> 
<a href="#" onclick="openwin()">打开一个窗口</a> 
<input type="button" onclick="openwin()" value="打开窗口"> 
</body> 
</html>


　　看看 OpenWindow.document.write()里面的代码不就是标准的HTML吗？只要按照格式写更多的行即可。千万注意多一个标签或少一个标签就会出现错误。记得用OpenWindow.document.close()结束啊。

【9、终极应用--弹出的窗口之Cookie控制】

　　回想一下，上面的弹出窗口虽然酷，但是有一点小毛病(沉浸在喜悦之中，一定没有发现吧？)比如你将上面的脚本放在一个需要频繁经过的页面里(例如首页)，那么每次刷新这个页面，窗口都会弹出一次，是不是非常烦人？:-(有解决的办法吗？Yes! ;-) Follow me.
　　我们使用cookie来控制一下就可以了。
　　首先，将如下代码加入主页面HTML的<HEAD>区：

<script> 
function openwin() 
{window.open("page.html","","width=200,height=200")} 
function get_cookie(Name) 
{var search=Name + "=" 
var returnvalue=""; 
if (document.cookie.length > 0) { 
offset=document.cookie.indexOf(search) 
if (offset !=-1) { 
offset +=search.length 
end=document.cookie.indexOf(";", offset); 
if (end==-1) 
end=document.cookie.length; 
returnvalue=unescape(document.cookie.substring(offset,end)) 
} 
} 
return returnvalue; 
} 
function loadpopup(){ 
if (get_cookie('popped')==''){ 
openwin() 
document.cookie="popped=yes" 
} 
} 
</script>


　　然后，用<body onload="loadpopup()">（注意不是openwin而是loadpop啊！）替换主页面中原有的<BODY>这一句即可。你可以试着刷新一下这个页面或重新进入该页面，窗口再也不会弹出了。真正的Pop-Only-Once！
　　写到这里弹出窗口的制作和应用技巧基本上算是完成了，俺也累坏了，一口气说了这么多，希望对正在制作网页的朋友有所帮助俺就非常欣慰了。
　　需要注意的是，JS脚本中的的大小写最好前后保持一致。

如果使用超级链接作为弹出窗口的触发控件，要注意的是：不能更改target属性(即：target=-self或不进行设置)，否则可能会弹出一个以上的窗口

过观察弹窗，我们会发现大多数弹窗都存在着破坏用户体验，降低用户好感度的效果。因此本文结合这一现象，讲具体分析背后的原理以及避免的方法。

无论是否使用弹出窗口，大多数窗口叠加都出现在错误的时间，在进行关键任务时中断用户，使用不良语言，并导致用户迷失方向。

通过进行数十年的用户研究，我们知道人们不喜欢弹出窗口和弹出框。在最近的一次可用性研究中，我想起了这一事实。在尝试完成任务时，一名参与者在连续遇到多个弹出窗口后将他的手机扔到了桌子上。令人沮丧的是，他放弃了任务，离开了网站，给组织留下了非常坏的印象。其他几个用户也有类似的看法，尽管他们没有扔掉他们的手机。

弹出窗口（也称为叠加或弹出）是覆盖在页面内容上部（层）显示的窗口或对话框。弹出窗口可以根据两个维度进行分类：

（1）用户是否可以与页面的其余部分进行交互：

  • 模态框（Modal）：在用户明确地与叠加层交互之前，页面上的内容将被禁用。
  • 非模态框（nonmodal）：用户仍然可以与背景内容进行交互（例如，通过选择链接或点击按钮），同时覆盖叠加仍然可见。

（2）背景是否变暗：

  • 如果背景变暗，则弹出窗口称为lightbox。
  • 当背景内容没有视觉上的变暗时，没有特殊名称。

虽然在许多情况下lightbox属于模态框（Modal），但并非总是如此。

在弹出窗口的定义中，模态框（Modal）禁用所有背景内容，非模态框（nonmodal）叠加保留用户与背景内容交互的能力，lightbox使背景内容变暗。

几个星期以来，我捕获了在网站和移动应用程序中遇到的每个弹出窗口的屏幕截图：平均每周 25 个弹出窗口，这比任何人能够忍受的都要多（但非常能代表今天的互联网用户体验）。

这个实验连同我的可用性研究一起出现了无数糟糕的实践，并证明叠加已经远远被过度使用了。 我们已经接近网站滥用这些元素的程度，以至于有问题的实例远远超过弹出窗口仍然是一种有用的设计策略的情况。

在本文中，我将概述我观察到的问题并讨论要考虑的关键因素，以及弹出窗口的实际替代方案，以遵循组织的意图和用户体验。

弹出窗口的时机：在交互之前或关键任务期间不要提示

1. 在加载主页内容之前显示弹出窗口

无论使用何种变体，在用户可以从你的网站或应用程序中收集有价值的内容之前，切勿显示弹出窗口。这种趋势是非常具有侵入性的，因为用户的任务在他们登陆页面之前就被打断了。人们已经习惯于在网站上看到过早的弹出窗口并且通常忽略它们或者立即寻找最快的方式来关闭弹出窗口返回任务。在页面加载之前出现的弹出窗口使网站看起来很不舒服，用户体验感让人抓狂。

此外，未能识别这些事实的网站在搜索引擎结果中排名很低[Google惩罚网站]（https://webmasters.googleblog.com/2016/08/helping-users-easily-access-content-on.html）的做法是使用户无法访问内容，特别是在移动设备上。

替代方案：

等待弹出窗口中的内容，直到它与用户的上下文相关。使用互惠原则：在向他们询问任何内容之前给予访问者有价值的内容，无论是请求电子邮件地址，还是取消弹出窗口的操作。运行用户测试以确定适合计划在弹出窗口中显示的任何内容的上下文，并找出显示该内容的最佳方式；在许多情况下，它不会在弹出窗口中。在页面内容加载之前显示任何类型的弹出窗口是可接受的唯一用例是，当你的网站有法律义务要求用户同意接受使用cookie或验证其年龄时。

在加载主页面内容之前，HuffPost向用户提供了一个lightbox。这是一种可接受的使用其他有问题的做法，因为该网站在使用个人数据（包括位置）时在法律上有义务征得同意。

2. 在用户登录后立即显示弹出窗口

用户登录后显示的弹出窗口与页面内容加载前显示的弹出窗口一样令人烦恼。当用户登录帐户时，他们会考虑下一步或后续任务，否则他们为什么会登录？！立即出现任何类型的弹出窗口会分散注意力并妨碍他们完成下一步。因为他们专注于下一步，所以用户可能不会关注弹出窗口或突然关闭弹出窗口。不仅如此，他们可能会因为中断以及关闭弹出窗口或移动它所需的额外时间和交互成本而感到沮丧。

替代方案：

在登录帐户后，为用户提供一些时间和空间来完成任务，并且不会立即显示弹出窗口。在经过一段时间后，最终提供有用的、可以接受的帐户提示、指南或新功能是，但前提是用户的任务得到显示的内容或新功能的增强或进一步支持。在这些情况下，总是倾向于使用较少侵入性的方法（如工具提示和小型非模态框叠加层）来传达这些元素。

Gmail使用相对不显眼的非模态框叠加层来引入支持用户当前清理收件箱任务的新功能。非模态框叠加出现在用户与收件箱交互之后，而不是在登录后立即显示。

3. 在交互之前询问电子邮件地址

许多网站和应用程序在有机会与内容交互之前使用弹出窗口来询问用户的电子邮件地址。

电子商务、新闻网站和应用程序以及博客是此类别中最大的违规者。这种方法存在问题，因为人们不仅会因为弹出窗口、其弹出时机以及网站过早要求电子邮件地址这一事实感到恼火，而且他们还会认为该网站会向他们发送垃圾邮件。

例如：登陆 Uncommon Goods 网站的一个用户在受到模态框（Modal）的问候时感到不满，其要求输入她的电子邮件地址才可以访问秘密销售。

她说：

“在网站上做其他事情之前，这样的东西突然出现，真让我恼火。如果我第一次来到这个网站，我怎么知道我是否想成为电子邮件订阅者？我希望稍后再说。”

一个用户在登录 Uncommon Goods 网站时看到一个模态框（Modal），在她到达网站后不久就要求她提供电子邮件地址，这让用户感到恼火。

在询问用户的电子邮件地址时，需要考虑许多权衡因素。网站和应用程序通常使用过早的模态框（Modal），因为它们产生的指标会在短期内上升。然而，短期指标通常会以使许多用户感到沮丧为代价，而这些用户并非出于任意激励，例如秘密销售。

替代方案：

与其在早期显示电子邮件弹出窗口，不如考虑用户何时最愿意与您共享其电子邮件地址。他们是否正在浏览具有适用促销代码的类别？或许他们只是阅读（或扫描）了整篇博文。这些动作可能是最小侵入性非模态叠加的适当触发器，可能出现在靠近右上角或右下角的位置，使用合理数量的屏幕空间。向用户提供有价值的和有形的内容，以换取他们的电子邮件地址; 不要只是指望他们主动交出来。

MarkManson.net网站在人们到达博客文章底部后，显示了一个最小的侵入性非模态框覆盖。该弹出窗口还提供了一个免费的电子书作为奖励。

4. 在人们做了任何有意义的事情之前要求反馈

接收用户的反馈非常重要，但当用户在你的网站上做任何事情之前，不应该向他们发送反馈提示。网站和应用程序倾向于立即向用户提供反馈弹出窗口，希望他们能够给予高度评价并继续他们的任务。但是这种情况很少发生; 更常见的是，用户迅速关闭弹出窗口，无意再次寻找它。

在体验中的适当位置从用户那里获得有意义的反馈，可以深入了解他们面临的挑战和障碍。 但是如果你过早地要求反馈，你可能会在最重要的时候没有得到任何反馈。

例如，当一名研究参与者试图在ATT.com上支付电话账单时，对出现的反馈模式感到沮丧。她说，“嗯，我付账单后会给出反馈，但现在我很沮丧，因为我还没有做任何事情就让我给出反馈。”

一名研究参与者在试图支付电话费时不情愿地关闭了反馈模式。她说，她都还没有在网站上做任何事情，就被要求提供反馈。

替代方案：

要求用户在完成您网站上的顶级任务后立即提供反馈。此方法可以最大限度地减少中断并确保反馈基于实际的互动。

例如，视频会议软件 BlueJeans 在会议结束后要求用户提供反馈。此请求未提前显示，但在上下文相关且适当的时间出现了。

用户在完成关键任务后立即询问用户的反馈，而不是在用户到达你的网站后立即征求反馈。这样，你就增加了接收相关评论或评级的机会。在这种情况下使用模态框叠加对用户来说不那么烦人和具有侵入性

5. 在关键任务期间中断用户请求反馈

用户讨厌被打断，但是在完成关键任务的过程中，大量网站和应用程序通过反馈弹出窗口干扰用户。大多数情况下，提供反馈并不是用户访问网站的首要原因，因此也不要在关键任务中使用弹出窗口来扰乱人们。

美联航应用程序在关键任务中间显示模态框叠加：检索登机牌。

替代方案：

除了要求用户仅在完成关键任务后提供反馈之外，还提供静态的、非侵入性的方式，以便随时提供反馈。屏幕一侧的选项卡，页脚中的链接或导航中的链接都是破坏性模态框的可接受替代方案，并让用户在准备就绪时能够分享他们的观点。

雀巢应用程序没有使用反馈模式中断用户，但在网站的页脚中包含反馈链接。

英国航空公司在其所有页面的右侧显示一个标记为**反馈**的按钮。

6. 逐个显示多个弹出窗口

在彼此上方显示多个弹出窗口会使你的网站看起来不专业、绝望和杂乱无章。它还会压倒用户并迫使他们花费精力来关闭每个窗口。如果你的站点使用许多不同类型的弹出窗口，测试实施以避免一次向用户显示多个弹出窗口。

替代方案：

如果你必须在弹出窗口中显示关键信息（例如重要警告以防止或纠正错误），请确保一次只显示一个。更妙的是，不要在弹出窗口中显示关键信息，因为人们倾向于在没有阅读的情况下关闭它们。相反，使用视觉上不同的元素并将其直接放在页面上，其中消息提示最适合上下文。确保副本清楚、准确地传达用户需要做些什么来纠正问题并继续前进。

在结账流程结束时，Lulus同时提供了多个反馈模式。更好的方法是一次只显示一个或将反馈表单嵌入确认页面。

Canva 在页面上直接显示关键信息做得很好。它使用位于顶部的视觉上不同的内容模块而不是弹出窗口。消息提示帮助用户了解他们需要做些什么来纠正问题。

弹出上下文：不妨碍内容的转换或访问

7. 在用户移动到新的子域或外部站点之前显示模态框覆盖

某些公司网站会链接到位于子域和外部站点上的内容或应用程序。在用户离开主站点之前，会出现一个模态框叠加图，提醒用户即将发生的转换。这种类型的弹出窗口是有问题的，因为它过分强调了过渡，使用户感到迷茫和困惑，特别是如果子站点是在新的浏览器选项卡中打开时。

在我们的一次可用性测试会议期间，一位在HSBC网站上寻找工作的参与者在尝试基本上分为3个不同网站的任务时遇到了两种不同的过渡模式。

他说：

“它一直把我带到其他网站，我甚至不知道我在哪里了。如果他们的工作申请流程如此复杂和脱节，我真的不认为这是一个好的工作地方。无论这个网站看起来多么漂亮，这似乎都是一团糟。”

点击Careers菜单后，模态框警告用户他们即将离开初始站点。

在同一个网站上，用户还看到了另外一种模式，表明他们要去第三个网站申请这份工作。

替代方案：

将用户链接到外部属性时，删除模态框，最小化站点之间的过渡，并始终保留回主站点的导航。如果你的用户确实需要在离开你的网站时收到警告，使用较少侵入性的选项（例如链接上的工具提示）以淡化过渡转换。

Eli Lilly：向用户提供了一个信息丰富的工具提示，让他们知道他们将访问不同的网站。工具提示帮助用户记住他们的位置和去向。

8. 通过模态框叠加中断对内容的访问

在用户加载文章或其他长篇内容（例如通常在网站的关于我们或新闻部分中找到的内容）之后立即出现的模态对话框，使其看起来好像网站在限制对该内容的访问。这种环境是一个特别不好的表现，因为它会降低网站的可信度。

CNN移动应用程序中的一个用户在登陆他想阅读的文章后立即遇到邮件订阅模态框时感到沮丧。他说：

“这导致我对CNN的怀疑达到顶峰。不要要求我填写电子邮件或立即注册任何内容。”

CNN的移动应用程序在用户登陆页面阅读文章时显示一个具有权限提示的模态框。这样做是有问题的，因为注册CNN的时事通讯不是用户在那里的原因; 阅读内容才是。

替代方案：

允许用户在不中断的情况下直接使用内容。将弹出窗口替换为页面顶部的易于关闭的横幅。弹出窗口的替代方案将允许用户如果想要订阅时事通讯时可以自行订阅，而不会阻断他们收看信息的主要任务。

Conde’Nast Traveler的网站在导航下方的一个微妙且非侵入性的横幅中介绍了其简报订阅。这种设计允许感兴趣的用户订阅时事通讯，但并没有分散那些只想阅读网站内容的人的注意力。

弹出内容：不要假设模态框叠加将传递消息

9. 使用模态框叠加来进行GDPR和cookie通知

用户已经匆忙关闭了模态框叠加，因为他们认为没有任何好处。为了传达与GDPR和cookie的使用相关的重要信息，请不要使用模态框叠加。

替代方案：最好放置在页面底部或侧面的非模态框叠加。这些功能的侵入性要小得多，并且允许用户继续执行任务。确保提供有关如何收集和使用用户个人数据的足够信息。

Reddit 使用小而不显眼的非模态框覆盖来请求用户是否同意cookie; 但是，描述人们数据使用方式的语言过于模糊。

NNgroup.com使用非模态框覆盖，其中包含有关cookie使用的清晰语言。我们概述了为什么我们收集人们的数据以及这些数据是如何专门用于他们利益。

10. 鼓励模态叠加中的频道转换，而不传达特定的好处

经常可以看到鼓励用户从移动网站过渡到相关移动应用程序的模式，尤其是在电子商务或新闻网站上。在许多情况下，这些叠加是破坏性的并且存在问题：通常，网络用户是一次性用户，他们没有兴趣为临时任务下载应用程序。

可以理解的是，组织希望鼓励应用程序下载，但模式覆盖不是宣传你的移动应用程序的正确方法。即使是手机上有应用程序的用户也可能不愿意切换频道，因为害怕重新开始他们的流程。模态框叠加只会困扰他们。

替代方案：

为组织的移动应用程序创建意识，但不以侵入用户当前任务为代价。偏向于低调的方法，例如标准的顶部横幅，并概述了使用该应用程序来简化人们向该频道过渡的好处。

Wayfair用一种鼓励下载其移动应用程序的通用模式打断了用户。用户认为他们必须投入大量的工作才能在另一个渠道上重新开始他们的任务，而不会带来实际的好处。

梅西百货在鼓励手机应用程序下载方面做得不错。 页面底部的非模态框叠加包含对频道转换的奖励以及显示应用的用户评级。

总结

鉴于这个总体结论，你可能想知道何时可以使用弹出窗口；答案是——谨慎使用。

抵制跟随人群的冲动，不要因为中断而淹没用户以支持短期指标。探索尊重用户需求的替代方法，并保持组织收集反馈的意图，通知用户数据收集，获取电子邮件地址或鼓励频道转换。

保留使用模态框叠加，以便仅在适当的时间提供关键信息。不要通过大量的侵入式弹出窗口中断基本任务或阻止相关内容。进行可用性测试，以确保你的弹出窗口不会让你的用户感到沮丧，并且作为额外的好处，你将获得真正的意见反馈，以帮助你改善整体体验。

原文作者：Anna Kaley

原文地址：https://www.nngroup.com/articles/popups/

译文地址：https://www.jianshu.com/p/7a0d1157c9c9

编译作者：iris0327，公众号：设计吐司

本文由 @iris0327 授权发布于人人都是产品经理。未经许可，禁止转载

题图来自Unsplash, 基于CC0协议

绍

sweetalert2是一个漂亮的、响应式、可定制的替代JAVASCRIPT原生的弹出框插件。sweetalert2相比sweetalert更加强大,但它不是sweetalert的扩展，它是一个全新的插件，且支持三大流行前端框架React、Vue、Angular。

Github和官网

https://github.com/sweetalert2/sweetalert2

https://sweetalert2.github.io/

安装

提供了很多安装方式

  • 使用npm安装
npm install --save sweetalert2
  • 使用cdn
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>

注意：如果想要兼容IE11，还得引入polyfill.js

<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.js"></script>

模块化用法

// ES6 Modules or TypeScript
import Swal from 'sweetalert2'
// CommonJS
const Swal=require('sweetalert2')

示例

  • 最基本的信息弹出框
Swal.fire('基本信息弹框')

  • 标题下包含文字
Swal.fire(
 '标题下有文字',
 '标题下的文字?',
 'question'
 )

  • 底部文字
Swal.fire({
 type: 'error',
 title: '标题',
 text: '出错啦！',
 footer: '<a href>为什么会出错?</a>'
 })

  • 自定义html
Swal.fire({
 title: '<strong>HTML <u>示例</u></strong>',
 type: 'info',
 html:
 '你可以使用自定义的html<a href="https://wwwbaidu.com">百度一下<a>',
 showCloseButton: true,
 showCancelButton: true,
 focusConfirm: false,
 confirmButtonText:
 '好的',
 confirmButtonAriaLabel: '看起来不错',
 cancelButtonText:
 '取消',
 cancelButtonAriaLabel: '取消',
 })

  • 自定义弹框的位置
Swal.fire({
 position: 'top-end',
 type: 'success',
 title: '你的修改以保存',
 showConfirmButton: false,
 timer: 1500
 })

  • 函数回调
Swal.fire({
 title: '确定要删除么?',
 text: "删除后将无法撤销!",
 type: 'warning',
 showCancelButton: true,
 confirmButtonColor: '#3085d6',
 cancelButtonColor: '#d33',
 confirmButtonText: '确定',
 cancelButtonText:'取消'
 }).then((result)=> {
 if (result.value) {
 Swal.fire(
 '删除成功!',
 '文件已被删除',
 'success'
 )
 }
 })

  • 自定义图片，禁止动画
Swal.fire({
 title: '标题',
 text: '自定义图片',
 imageUrl: 'https://unsplash.it/400/200',
 imageWidth: 400,
 imageHeight: 200,
 imageAlt: 'Custom image',
 animation: false
 })

  • 自定义宽度、边框和背景
Swal.fire({
 title: '自定义宽度、边框和背景',
 width: 600,
 padding: '3em',
 background: '#fff url(/images/trees.png)',
 })

  • 自定义关闭（自动关闭）
let timerInterval
Swal.fire({
 title: '自动关闭的弹框!',
 html: '我会在<strong></strong> 秒后关闭.',
 timer: 2000,
 onBeforeOpen: ()=> {
 Swal.showLoading()
 timerInterval=setInterval(()=> {
 Swal.getContent().querySelector('strong')
 .textContent=Swal.getTimerLeft()
 }, 100)
 },
 onClose: ()=> {
 clearInterval(timerInterval)
 }
}).then((result)=> {
 if (
 // Read more about handling dismissals
 result.dismiss===Swal.DismissReason.timer
 ) {
 console.log('I was closed by the timer')
 }
})

  • 异步提交
Swal.fire({
 title: '提交用户名',
 input: 'text',
 inputAttributes: {
 autocapitalize: 'off'
 },
 showCancelButton: true,
 confirmButtonText: '提交',
 cancelButtonText: '取消',
 showLoaderOnConfirm: true,
 preConfirm: (login)=> {
 return fetch(`//api.github.com/users/${login}`)
 .then(response=> {
 if (!response.ok) {
 throw new Error(response.statusText)
 }
 return response.json()
 })
 .catch(error=> {
 Swal.showValidationMessage(
 `请求出错: ${error}`
 )
 })
 },
 allowOutsideClick: ()=> !Swal.isLoading()
 }).then((result)=> {
 if (result.value) {
 Swal.fire({
 title: `${result.value.login}'s avatar`,
 imageUrl: result.value.avatar_url
 })
 }
 })

  • 三步曲
Swal.mixin({
 input: 'text',
 confirmButtonText: '下一步',
 showCancelButton: true,
 cancelButtonText:'取消',
 progressSteps: ['1', '2', '3']
 }).queue([
 {
 title: '问题1',
 text: '使用modal很简单？'
 },
 '问题2',
 '问题3'
 ]).then((result)=> {
 if (result.value) {
 Swal.fire({
 title: '所有问题回答完成!',
 html:
 '你的答案是: <pre><code>' +
 JSON.stringify(result.value) +
 '</code></pre>',
 confirmButtonText: 'Lovely!'
 })
 }
 })

这里就简单介绍这些示例，更多示例详见官方文档

弹框类型

  • success


  • error


  • warning


  • info


  • question

相关项目

  • ngx-sweetalert2 - Angular 4+集成

https://github.com/sweetalert2/ngx-sweetalert2

  • sweetalert2-react-content - React集成

https://github.com/sweetalert2/sweetalert2-react-content

  • sweetalert2-webpack-demo - webpack demo

https://github.com/sweetalert2/sweetalert2-webpack-demo

  • sweetalert2-parcel-demo - parcel demo

https://github.com/sweetalert2/sweetalert2-parcel-demo

  • Vue.js集成（社区维护）

https://github.com/avil13/vue-sweetalert2

  • Laravel 5 Package（社区维护）

https://github.com/realrashid/sweet-alert

浏览器兼容性

总结

sweetalert2是原本sweetalert的升级版，功能更加强大，文档更加全面，写法更加先进，是Web开发中常用的插件，当然同样优秀的还有很多，比如国产的layer.js也很好用，选择一个适合自己的就成，今天的介绍就到这里，希望能对你有所帮助，如果还有更好的推荐，欢迎到评论区留言，谢谢！


在线咨询
上一篇：HTML &lt;area&gt;
下一篇：HTML通用属性和各种事件属性

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

推荐阅读
友情链接 科尔沁左翼后旗 齐河县 恩施市 上蔡县 武陟县 东安县 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服