页面中js弹窗的实现（多种样式示例）

论坛 › 期权论坛 › 期权     
php中文网最新课程   2019-6-10 04:03   4530   0
点击蓝字
关注我们！每天获取最新的编程小知识！
源 / php中文网      源 / www.php.cn
本篇文章主要给大家介绍在网页中，怎么用简单的js代码实现多种弹出窗口的效果。众所周知，大家在网站如果进行注册或者关闭、退出等等操作，会有一个提示窗口出现。这种功能大大减少了用户的失误，也提高了用户信息的安全性。那么有新手可能会问，这种判断效果是如何实现的，很难操作吗？其实只要通过本篇浅而易懂的js弹窗代码示例演示，就会很容易理解了。
这里我给大家介绍js自定义弹窗的三种方式效果。希望本篇文章介绍可以让感兴趣的朋友对js自定义弹出窗的代码原理有所帮助！
第一种js弹窗代码具体示例如下：
  1. [/code]
  2. [code]
复制代码
  1. [/code]
  2. [code]   
复制代码
  1. js自定义弹出框代码测试一
复制代码
  1.    
复制代码
  1. [/code]
  2. [code]   
复制代码
  1. [/code]
  2. [code]        
复制代码
  1. function
复制代码
  1. f1(){
复制代码
  1.             
复制代码
  1. alert(
复制代码
  1. "这是第一种弹窗提示1 alert,单击确定后才能进行下一步的操作,只是提醒,不能对脚本产生任何改变"
复制代码
  1. );
复制代码
  1.         
复制代码
  1. }
复制代码
  1.         
复制代码
  1. [/code]
  2. [code]
复制代码
  1. [/code]
  2. [code]弹窗提示1
复制代码
  1. [/code]
  2. [code]
复制代码
效果如下图：


注：JavaScript alert()函数
alert--弹出消息对话框（对话框中有一个OK按钮）
alert，中文"提醒"的意思
第二种js弹窗代码具体示例如下：
  1. [/code]
  2. [code]
复制代码
  1. [/code]
  2. [code]   
复制代码
  1. js自定义弹出框代码测试
复制代码
  1.    
复制代码
  1. [/code]
  2. [code]   
复制代码
  1. [/code]
  2. [code]        
复制代码
  1. function
复制代码
  1. f2(){
复制代码
  1.             
复制代码
  1. var
复制代码
  1. flag = confirm(
复制代码
  1. "这是第二种弹窗提示2 confirm单击确定返回true,单击取消返回false"
复制代码
  1. );
复制代码
  1.             
复制代码
  1. if
复制代码
  1. (flag){
复制代码
  1.                
复制代码
  1. alert(
复制代码
  1. "你点击的是确定"
复制代码
  1. );
复制代码
  1.             
复制代码
  1. }
复制代码
  1. else
复制代码
  1. {
复制代码
  1.                
复制代码
  1. alert(
复制代码
  1. "你单击的是取消"
复制代码
  1. );
复制代码
  1.             
复制代码
  1. }
复制代码
  1.         
复制代码
  1. }
复制代码
  1.         
复制代码
  1. [/code]
  2. [code]
复制代码
  1. [/code]
  2. [code]弹窗提示2
复制代码
  1. [/code]
  2. [code]
复制代码
效果如下图：


注：confirm()函数中的参数是确认框的提示语。此函数返回值是布尔型的，点击确定，返回值为true，点击取消返回值为false。
第三种js弹窗代码具体示例如下：
  1. [/code]
  2. [code]
复制代码
  1. [/code]
  2. [code]   
复制代码
  1. js自定义弹出框代码测试
复制代码
  1.    
复制代码
  1. [/code]
  2. [code]   
复制代码
  1. [/code]
  2. [code]        
复制代码
  1. function
复制代码
  1. f3(){
复制代码
  1.             
复制代码
  1. var
复制代码
  1. name = prompt(
复制代码
  1. "请输入你的名字:"
复制代码
  1. ,
复制代码
  1. ""
复制代码
  1. );
复制代码
  1.             
复制代码
  1. console.log(name);
复制代码
  1.             
复制代码
  1. console.log(typeof(name));
复制代码
  1.             
复制代码
  1. if
复制代码
  1. (
复制代码
  1. "php中文网"
复制代码
  1. === name){
复制代码
  1.                
复制代码
  1. alert(
复制代码
  1. "欢迎您:"
复制代码
  1. +name);
复制代码
  1.             
复制代码
  1. }
复制代码
  1. else
复制代码
  1. {
复制代码
  1.                
复制代码
  1. alert(
复制代码
  1. "输入有误!"
复制代码
  1. );
复制代码
  1.             
复制代码
  1. }
复制代码
  1.         
复制代码
  1. }
复制代码
  1.    
复制代码
  1. [/code]
  2. [code]
复制代码
  1. [/code]
  2. [code]弹窗提示3
复制代码
  1. [/code]
  2. [code]
复制代码
效果如下图：


注：第三种js弹窗代码需要注意的是,prompt有两个参数,前面是提示的话,后面是当对话框出来后,在对话框里的默认值。若点击取消按钮,则返回值为null,类型为object。若点击确认按钮,则返回值为输入的字符串(不输入时为空字符串),类型为string.
[url=http://mp.weixin.qq.com/s?__biz=MzI3MTQ5NzM0MA==&mid=2247484166&idx=2&sn=3a40a65064ae1bb5fd42b7b4e8b93c1e&chksm=eac1a215ddb62b032413acf0181490283bb8d087d59accdbb20029d74dd5d1b2f1a67ce331b8&scene=21#wechat_redirect][/url]
-END-
声明：本文选自「 php中文网 」，搜索「 phpcnnew 」即可关注！
▼请点击下方：“阅读原文”，在线查看全部文章内容！
回复
分享到 :
0 人收藏
返回列表
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

2级吧友
php中文网最新课程

积分:10
帖子:2
精华:0
+ 关注 私信
期权论坛 期权论坛
期权网络科技版权所有
关于我们
联系我们
加入我们
反馈问题
免责声明
积分充值
统一社会信用代码
积分规则
网站地图
爱文库
下属网站
官方
新浪微博
微信公众号
◆
下载
表情包
App下载
期权论坛 期权论坛

QQ咨询|关于我们|Archiver|手机版|小黑屋|( 辽ICP备15012455号-4 ) Powered by 期权论坛 X3.2 © 2001-2016 期权工具网&期权论坛 Inc.

发布
内容

下载期权论坛手机APP