浅谈javascript中的三种弹窗


Posted in Javascript onOctober 21, 2016

js中三种弹窗

1)alert 弹出警告 无返回值---------alert('第一行\n第二行');

2)confirm()选择确定或取消,返回t或f----var result = confirm('是否删除!');

3)prompt()弹出输入框,返回输入内容----var value = prompt('输入你的名字:', '请在这里输入名字');

当然也可以自定义好看的样式。下面代码有问题明天再改。

<script>
//window.confirm
//prompt
window.alert = function(title,str) 
{ 
var shield = document.createElement("DIV"); 
shield.id = "shield"; 
shield.style.position = "absolute"; 
shield.style.left = "0px"; 
shield.style.top = "0px"; 
shield.style.width = "100%"; 
shield.style.height = document.body.scrollHeight+"px"; 
//弹出对话框时的背景颜色 
shield.style.background = "#fff"; 
shield.style.textAlign = "center"; 
shield.style.zIndex = "25"; 
//背景透明 IE有效 
//shield.style.filter = "alpha(opacity=0)"; 
var alertFram = document.createElement("DIV"); 
alertFram.id="alertFram"; 
alertFram.style.position = "absolute"; 
alertFram.style.left = "50%"; 
alertFram.style.top = "50%"; 
alertFram.style.marginLeft = "-225px"; 
alertFram.style.marginTop = "-75px"; 
alertFram.style.width = "450px"; 
alertFram.style.height = "150px"; 
alertFram.style.background = "#ff0000"; 
alertFram.style.textAlign = "center"; 
alertFram.style.lineHeight = "150px"; 
alertFram.style.zIndex = "300"; 
strHtml = "<ul style=\"list-style:none;margin:0px;padding:0px;width:100%\">\n"; 
strHtml += " <li style=\"background:#DD828D;text-align:left;padding-left:20px;font-size:14px;font-weight:bold;height:25px;line-height:25px;border:1px solid #F9CADE;\">" + title + "</li>\n"; 
strHtml += " <li style=\"background:#fff;text-align:center;font-size:12px;height:120px;line-height:120px;border-left:1px solid #F9CADE;border-right:1px solid #F9CADE;\">" + str + "</li>\n"; 
strHtml += " <li style=\"background:#FDEEF4;text-align:center;font-weight:bold;height:25px;line-height:25px; border:1px solid #e85727;\"><input type=\"button\" value=\"确 定\" onclick=\"doOk()\" /></li>\n"; 
strHtml += "</ul>\n"; 
alertFram.innerHTML = strHtml; 
document.body.appendChild(alertFram); 
document.body.appendChild(shield); 
var ad = setInterval("doAlpha()",5); 
this.doOk = function(){ 
alertFram.style.display = "none"; 
shield.style.display = "none"; 
} 
alertFram.focus(); 
document.body.onselectstart = function(){return false;}; 
}
</script>

以上就是小编为大家带来的浅谈javascript中的三种弹窗全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
js获取当前日期代码适用于网页头部
Jun 27 Javascript
JavaScript将数组转换成CSV格式的方法
Mar 19 Javascript
Java中Timer的用法详解
Oct 21 Javascript
jQuery页面加载初始化的3种方法(推荐)
Jun 02 Javascript
AngularJS使用ng-repeat和ng-if实现数据的删选显示效果示例【适用于表单数据的显示】
Dec 13 Javascript
jQuery焦点图轮播效果实现方法
Dec 19 Javascript
微信小程序通过api接口将json数据展现到小程序示例
Jan 20 Javascript
vue2.0 兄弟组件(平级)通讯的实现代码
Jan 15 Javascript
详解vue 单页应用(spa)前端路由实现原理
Apr 04 Javascript
详解Vue调用手机相机和相册以及上传
May 05 Javascript
layui的表单验证支持ajax判断用户名是否重复的实例
Sep 06 Javascript
解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题
Oct 25 Javascript
JS动态给对象添加属性和值的实现方法
Oct 21 #Javascript
AngularJS 与百度地图的结合实例
Oct 20 #Javascript
Bootstrap图片轮播组件Carousel使用方法详解
Oct 20 #Javascript
JavaScript 身份证号有效验证详解及实例代码
Oct 20 #Javascript
AngularJS  双向数据绑定详解简单实例
Oct 20 #Javascript
Bootstrap模态框禁用空白处点击关闭
Oct 20 #Javascript
canvas实现手机端用来上传用户头像的代码
Oct 20 #Javascript
You might like
数字转英文
2006/12/06 PHP
PHP仿盗链代码
2012/06/03 PHP
PHP生成验证码时“图像因其本身有错无法显示”的解决方法
2013/08/07 PHP
简要剖析PHP的Yii框架的组件化机制的基本知识
2016/03/17 PHP
PHP按一定比例压缩图片的方法
2018/10/12 PHP
在页面上点击任一链接时触发一个事件的代码
2007/04/07 Javascript
纯JS实现的批量图片预览加载功能
2011/08/14 Javascript
js取消单选按钮选中并判断对象是否为空
2013/11/14 Javascript
jquery mobile动态添加元素之后不能正确渲染解决方法说明
2014/03/05 Javascript
JavaScript设计模式之单例模式实例
2014/09/24 Javascript
jQuery使用load()方法载入另外一个网页文件内的指定标签内容到div标签的方法
2015/03/25 Javascript
JS中setTimeout的巧妙用法前端函数节流
2016/03/24 Javascript
根据Bootstrap Paginator改写的js分页插件
2016/12/25 Javascript
react实现pure render时bind(this)隐患需注意!
2017/03/09 Javascript
基于IView中on-change属性的使用详解
2018/03/15 Javascript
深入浅出理解JavaScript闭包的功能与用法
2018/08/01 Javascript
解决axios发送post请求返回400状态码的问题
2018/08/11 Javascript
JS如何获取地址栏的参数实例讲解
2018/10/06 Javascript
JS 实现获取验证码 倒计时功能
2018/10/29 Javascript
关于javascript中的promise的用法和注意事项(推荐)
2021/01/15 Javascript
python生成器的使用方法
2013/11/21 Python
python 使用re.search()筛选后 选取部分结果的方法
2018/11/28 Python
python虚拟环境迁移方法
2019/01/03 Python
django项目中使用手机号登录的实例代码
2019/08/15 Python
python GUI库图形界面开发之PyQt5访问系统剪切板QClipboard类详细使用方法与实例
2020/02/27 Python
Python实现播放和录制声音的功能
2020/08/12 Python
python3实现名片管理系统(控制台版)
2020/11/29 Python
浅谈HTML5新增和废弃的标签
2019/04/28 HTML / CSS
幼儿园园长岗位职责
2013/11/26 职场文书
2014年父亲节活动方案
2014/03/06 职场文书
经典婚礼主持词
2014/03/13 职场文书
户外宣传策划方案
2014/05/25 职场文书
安全责任书怎么写
2014/07/28 职场文书
创业计划书之熟食店
2019/10/16 职场文书
MySQL数据库压缩版本安装与配置详细教程
2021/05/21 MySQL
Python中使用Opencv开发停车位计数器功能
2022/04/04 Python