浅谈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 相关文章推荐
FormValidate 表单验证功能代码更新并提供下载
Aug 23 Javascript
JavaScript 设计模式之组合模式解析
Apr 09 Javascript
如何确保JavaScript的执行顺序 之jQuery.html并非万能钥匙
Mar 03 Javascript
JS动态添加Table的TR,TD实现方法
Jan 28 Javascript
JS绘制生成花瓣效果的方法
Aug 05 Javascript
Bootstrap创建可折叠的组件
Feb 23 Javascript
jQuery Easyui快速入门教程
Aug 21 Javascript
jQuery动态增减行的实例代码解析(推荐)
Dec 05 Javascript
Bootstrap modal 多弹窗之叠加显示不出弹窗问题的解决方案
Feb 23 Javascript
详解Chart.js轻量级图表库的使用经验
May 22 Javascript
JavaScript创建对象的四种常用模式实例分析
Jan 11 Javascript
javascript canvas实现雨滴效果
Jun 09 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
VFP与其他应用程序的集成
2006/10/09 PHP
PHP实现网上点歌(二)
2006/10/09 PHP
PHP syntax error, unexpected $end 错误的一种原因及解决
2008/10/25 PHP
解析PHP中DIRECTORY_SEPARATOR,PATH_SEPARATOR两个常量的作用
2013/06/21 PHP
PHP防止post重复提交数据的简单例子
2014/06/07 PHP
php中Session的生成机制、回收机制和存储机制探究
2014/08/19 PHP
PHP return语句另类用法不止是在函数中
2014/09/17 PHP
php获取POST数据的三种方法实例详解
2016/12/20 PHP
改善你的jQuery的25个步骤 千倍级效率提升
2010/02/11 Javascript
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
2010/03/12 Javascript
JavaScript实现表格排序方法
2013/06/14 Javascript
使用js对select动态添加和删除OPTION示例代码
2013/08/12 Javascript
解析prototype,JQuery中跳出each循环的方法
2013/12/12 Javascript
JavaScript中操作Mysql数据库实例
2015/04/02 Javascript
全面解析jQuery $(document).ready()和JavaScript onload事件
2016/06/08 Javascript
jQuery获取同级元素的简单代码
2016/07/09 Javascript
React Native react-navigation 导航使用详解
2017/12/01 Javascript
JavaScript伪数组用法实例分析
2017/12/22 Javascript
Angular刷新当前页面的实现方法
2018/11/21 Javascript
详解Vue中watch对象内属性的方法
2019/02/01 Javascript
用Javascript实现发送短信验证码间隔功能
2021/02/08 Javascript
跟老齐学Python之大话题小函数(2)
2014/10/10 Python
python opencv捕获摄像头并显示内容的实现
2019/07/11 Python
前端面试必备之html5的新特性
2017/09/05 HTML / CSS
AmazeUI 按钮交互的实现示例
2020/08/24 HTML / CSS
英国高端食品和葡萄酒超市:Waitrose
2016/08/23 全球购物
Python是如何进行类型转换的
2013/06/09 面试题
工艺工程师工作职责
2013/11/23 职场文书
函授毕业生自我鉴定范文
2014/03/25 职场文书
雷人标语集锦
2014/06/19 职场文书
2014年节能减排工作总结
2014/12/06 职场文书
个人年终总结开头
2015/03/06 职场文书
物业项目经理岗位职责
2015/04/01 职场文书
2019入党申请书格式
2019/06/25 职场文书
python引入其他文件夹下的py文件具体方法
2021/05/23 Python
Python Django ORM连表正反操作技巧
2021/06/13 Python